Acelerar WordPress de forma gratuita con el CDN de CloudFlare y este magnífico plugin

Acelerar WordPress no es una tarea fácil ya que a la hora de optimizarlo hay muchas variables que hay que sopesar para conseguir unos TTFB (time to first byte) aceptables o, dicho en otras palabras, el tiempo necesario hasta cargar el primer byte.

Para que entiendas de una forma simple, el TTFB es el tiempo que tiene que esperar el navegador web hasta recibir el primer byte de datos del lado del servidor y cuanto más se tarde el servidor en recibir esos datos más se demora la visualización de la página web en el ordenador del visitante.

Por eso para mejorar los tiempos de carga TTFB es recomendable como primer medida contratar un hosting de calidad porque si en este punto vamos a lo barato... olvídate de tener buenos TTFB. Si me preguntas cuál recomendaría, intentaré responder dependiendo de lo que puedas invertir y qué tipo de proyecto web tienes en mente.

Como sabes, soy afiliado de Kinsta, Webempresa y Tropical Server porque los considero de primer nivel, además de tener un soporte increíble con planes para todos los gustos y presupuestos. Échales un vistazo a estos artículos para que tengas una opinión más formada antes de tomar una decisión.

Pero hoy quiero hablarte de un excelente plugin que se llama WP Cloudflare Super Page Cache y puedes echarle un vistazo en el repositorio de WordPress aquí. ¡Vamos a ello!

¿Qué es CloudFlare?

Cloudflare en un CDN (Red de distribución de contenidos) de proxy inverso. Sirve entre otras cosas como firewall y acelera tu sitio web.

¿Cómo lo hace? Haciendo una copia de tus contenidos estáticos en la nube en + de 200 ubicaciones que tiene CloudFlare a lo largo del planeta.

Cuando un visitante, por ejemplo, quiere acceder desde Tokio a tu web que se encuentra en Estados Unidos, el contenido se obtiene del servidor más cercano a Tokio, disminuyendo de esta manera las peticiones al servidor origen y sirviendo los contenidos estáticos más rápido y además reduciendo de forma considerable la carga de CPU de tu alojamiento web.

¿Qué es WP Cloudflare Super Page Cache?

Acelerar WordPress con WP Cloudflare Super Page Cache es muy fácil, pero para utilizarlo tienes que tener una cuenta activa de CloudFlare y funciona en el modo free o gratuito.

WP Cloudflare Super Page Cache es un plugin sencillo, pero muy potente que te permitirá aprovechar la caché completa de CloudFlare o Cache Everything. Si bien esta regla puedes utilizarla sin necesidad de este plugin, existe una pega con la caché completa de CF, porque es muy agresiva en el sentido que cachea todo lo que encuentra sin discriminar nada y es aquí donde está el problema.

CloudFlare en su plan gratuito permite que puedas utilizar solo 3 reglas como máximo y una de ellas podría ser Cache Everything (caché completa), no obstante... ¿Qué pasaría si hay contenidos que no se deben cachear como por ejemplo, los usuarios que inician sesión en tu sitio ya sea para hacer un curso, comprar en la tienda online o acceder a contenidos solo para miembros?

Con esta regla activa Cache Everything (caché completa) no habría diferencia, se mostraría todos los contenidos para todos incluyendo los contenidos solo para usuarios con sesión iniciada. ¡Sería un caos! Porque esta regla no discrimina, cachea todo para todos.

Para solventar este problema se creó este plugin gratuito WP Cloudflare Super Page de la gente de Optimole que es la alternativa gratuita al servicio extra que ofrece CloudFlare que se llama APO (Automatic Platform Optimization) optimización automática de la plataforma de WordPress.

Seguro te preguntarás qué hace APO en CloudFlare, pues optimiza de forma muy fina tu WordPress, para que todas tus páginas y entradas de WordPress se sirvan como HTML estático desde la nube de CloudFlare acelerando los tiempos de carga de forma estrepitosa, pero tiene un coste mensual.

Si ya eras usuario de CloudFlare, seguro estarás pensando que esto ya lo hacía antes sin APO y sin plugin. La respuesta es no, porque la versión gratuita de CF puede entregar CSS, HTML, JavaScript e imágenes, pero no del sitio completo y no de recursos de terceros (nadie regala nada). Por eso crearon APO por una módica suma de $5 mensuales, donde puedes cachear todo el contenido estático omitiendo la cache para los usuarios conectados.

Y es aquí donde entra el plugin gratuito de WP Cloudflare Super Page porque podrás hacer los mismo que APO, pero de forma gratuita. ¡¿A qué mola?!

¿Y cómo lo hace? Pues aprovecha la regla de cachear todo de CloudFlare (Cache Everything), omitiendo la caché para usuarios conectados incluso si estás usando el plan gratuito. ¡Es una pasada!

En este tutorial se da por hecho que ya tienes una cuenta de CloudFlare funcionando en perfecta condiciones como dios manda. Si no tienes una cuenta CloudFlare todavía puedes crearla aquí y seguir su asistente que te guiará paso a paso para cambiar tus DNS actuales a los DNS de CloudFlare.

También puedes consultar este mega tutorial: CloudFlare CDN Tutorial: Configuración paso a paso para WordPress 

Luego puedes seguir con este tutorial para aprovechar la caché completa de CloudFlare con el plugin WP Cloudflare Super Page y una vez terminado tu web volará con unos tiempos de carga increíbles.

Instalando el plugin WP Cloudflare Super Page

Crear un Token personalizado en CloudFlare

Ahora toca el turno de configurar el plugin WP Cloudflare Super Page y para poder hacerlo recuerda que debes darte de alta creando una cuenta gratuita en CloudFlare, seguir el asistente que te guiará paso a paso para agregar tu dominio y cambiar los DNS actuales por los DNS de CloudFlare, si no haces esto primero no podrás configurar con éxito el plugin WP Cloudflare Super Page.

Para que el plugin WP Cloudflare Super Page pueda comunicarse con la plataforma externa de CloudFlare necesitas crear un Token de la API de CloudFlare y puedes acceder desde el siguiente enlace a tu perfil de CloudFlare. En las siguientes imágenes te mostraré todo el proceso y verás que es muy simple. 

Activando el plugin WP Cloudflare Super Page

Una vez creado el Token personalizado de CloudFlare pasamos a nuestro WordPress y entramos en la configuración de WP Cloudflare Super Page para agregar el Token de la API de CF que creamos antes. Desde este momento manejaremos todo desde aquí sin necesidad de volver a la plataforma externa de CF.

En la parte superior de esta captura dentro de tus sitio verás unas instrucciones para crear el Token personalizado en CloudFlare, pero como ya lo hiciste en los pasos anteriores puedes obviar esta parte y seguir con la configuración de la imagen siguiente.

Modo reglas de páginas

El plugin WP Cloudflare Super Page trabaja de forma predeterminada con reglas de páginas y fundamentalmente con la regla Cache Everything (Almacenar todo en caché) agregada de forma automática por el plugin en la sección Reglas de la plataforma CloudFlare como puedes observar en la siguiente imagen.

Ahora bien el plan gratuito de CloudFlare solo permite utilizar 3 reglas y si necesitas más debes comprarlas. En el modo reglas de página (predeterminado), el plugin al activarlo, agrega la regla de caché completa (Cache Everything) como se ve resaltado en la imagen superior y si no lo hiciera por algún motivo debes agregarla de forma manual para que WP Cloudflare Super Page pueda funcionar.

La primera y segunda regla que se ven el la captura están agregadas de forma manual y son opcionales, pero si estás experimentando problemas al iniciar sesión el la administración de WordPress deberías tener esta regla para indicarle a CloudFlare que omita la caché en el acceso a la administración de WordPress.

La segunda regla que puedes ver en la captura superior es útil si estás utilizando un maquetador o editor visual, yo utilizo Thrive Architect y todos los plugin de Thrive Suite, y con esta regla le indico a CloudFlare que no almacene en caché los contenidos que lleven la etiqueta *tve=true* para evitar conflictos a la hora de crear los artículos. 

Cómo omite WP Cloudflare Super Page la cache para usuarios con sesión iniciada

El problema de la regla Cache Everything de CloudFlare es que cachea todo lo que se le cruza por el camino sin excepción y no discrimina sin un usuario está conectado y sirve los mismos contenidos en caché para todos.

Pero para solventar este problema hay que decirle a CloudFlare que no sirva contenidos en caché a los usuarios conectados, ya sea porque están haciendo un curso, comprando en la tienda o accediendo a contenidos solo para miembros.

En este punto la caché debe ser dinámica por los usuarios conectados porque tienen que interactuar en la web en tiempo real obteniendo los contenidos sin cachear desde el servidor de origen que en este caso sería tu hosting actual. 

¿Entonces cuál es la solución? Pues los creadores de WP Cloudflare Super Page implementaron un destructor de caché para los usuarios conectados y que es este swcfpc=1, cuando un usuario está conectado se agrega el paramento swcfpc=1 a todas las URLs de tu web hasta que el usuario cierra la sesión, entonces en ese momento se sirve el contenido desde la caché de CloudFlare. ¡Ingenioso! ¿Verdad? 

Problemas conocidos con el destructor de cache swcfpc=1

El sistema del parámetro swcfpc=1 está muy bien en sitios web que no usan maquetadores visuales con Thrive Architect, Divi, Page Builder, Elementor, etc.

Porque se han reportado casos con estos maquetadores visuales y a mi me ha pasado con Thrive Architect que el parámetro swcfpc=1 sigue apareciendo después de cerrar sesión y se incrustan en los botones de las landing page cuando se está editando y no hay forma de eliminarlos, solo de forma manual y no fue muy divertido...

Este plugin gratuito está en constante desarrollo y en cada actualización se van puliendo errores y espero que la incidencia que ocurre con los editores visuales se pueda solucionar pronto.

Modo Workers de CloudFlare

Pero no todo está perdido, si te resulta molesto el destructor de cache swcfpc=1 en el modo regla de páginas, hay otro modo de aprovechar la caché completa de CloudFlare y se llama Workers.

Workers de CloudFlare es un sistema de pago, pero tiene una opción gratuita que te permite atender 100.000 solicitudes al día/gratis, pero si no te alcanza con el básico deberás pagar $5 por mes que te ofrecerá 10 millones de solicitudes/mes y después 0,50 $ por cada millón adicional de solicitudes.

Si tu web es pequeña y de poco tráfico con el básico gratuito te irá bien y si te pasas de la cuota gratuita los contenidos de tu web se seguirán sirviendo, pero desde el servidor de origen o sea tu hosting. 

Si tu sitio crece y no puedes pagar por los Workers, siempre puedes utilizar el modo reglas de página con el destructor de caché swcfpc=1 que siempre será gratuito.

El modo Workers está implementado dentro de la configuración del plugin WP Cloudflare Super Page y para utilizarlo solo debes activarlo como se muestra en la siguiente captura.

Excluir páginas específicas en la caché de CloudFlare 

La magia del plugin WP Cloudflare Super Page es que te permite excluir de la caché de CloudFlare ciertas páginas que no debería entrar en la caché nunca como por ejemplo, las páginas del carrito de WooCommerce y cualquier página que consideres que debe ser siempre dinámica. 

El resto de las opciones del plugin no deberías tocarlas a no ser que seas un usuario experimentado porque con la configuración por defecto generalmente suele funcionar muy bien y en casos muy específicos habría que hacer ajustes más finos.

Cómo sé si WP Cloudflare Super Page está funcionando

Para saber si el plugin está haciendo su trabajo puedes ver los encabezados cargando la portada de tú sitio web y con el botón derecho del ratón hacer clic en inspeccionar, ir a la pestaña Red como se ve en la imagen superior.

Para poder ver los encabezados una vez recargada la página debes hacer clic en la primera línea de la columna de la izquierda (azul) donde se ven todas las urls, en ese momento se mostrará todos los encabezados o cabeceras  en la columna de la derecha.

Estos encabezados indican que la web está sirviendo contenidos desde CloudFlare con un estado HIT (punto 2) y que la cache de control s-maxage=31536000, max-age=60 coincide con la del plugin más abajo (punto 5), además está indicando que el plugin está activo (punto 4) y que se está sirviendo contenido desde CF (punto 3 ) y por último que el estado del plugin el estado es HIT y coincide con el (punto 2).

Este es un escenario óptimo, pero en el caso que un usuario haya iniciado sesión el (cf-cache-status HIT) cambiará a cf-cache-status Dynamic y los contenidos se servirán desde tu servidor origen (tu hosting) cuando se cierre la sesión ese mismo usuario seguirá recibiendo contenidos pero esta vez desde CloudFlare.

Cómo borrar la caché de una sola página

En la barra de administración de WordPress del lado del Front-End encontrarás un icono con forma de nube con dos opciones de vaciado disponibles como se ve en la siguiente imagen.

El antes y el después de WP Cloudflare Super Page 

Para saber si hay alguna diferencias debes hacer algunas pruebas con las herramientas de métricas como por ejemplo GTmetrix, una prueba con el plugin desactivado y la otra con el plugin en funcionamiento repitiendo la operación un par de veces.

Conclusión y recomendaciones

WP Cloudflare Super Page es un plugin que hace muy bien su trabajo aprovechando la caché completa de CloudFlare de forma gratuita, para servir todo el contenido estático de tu web a una velocidad impresionante porque hace uso de los + de 200 servidores de la red de CDN de CloudFlare repartidos por todo el mundo para que tus contenidos se sirvan del lugar más próximo acortando los tiempos de espera en sitios muy alejados de tu servidor de origen.

Los desarrolladores insisten que si vas a utilizar WP Cloudflare Super Page no utilices ningún otro complemento porque puede producir incompatibilidades y si lo tienes que utilizar sí o sí tienes que desactivar la caché de página del complemento en cuestión, llámese Varnish, LiteSpeed (caché de nivel servidor) o W3 Total Cache, WP Fastest Cache (cache de disco tradicional) etc. para que puedas usar sus otros beneficios de optimización.

En mi experiencia personal me funciona mejor sin ningún complemento de caché extra, solo el plugin WP Cloudflare Super Page es suficiente porque además todo el código de Thrive Architect y Thrive Suite estan super optimizados por lo tanto no necesito minimizar más el CSS, JS. 

Pero claro cada web es un mundo y hay muchos escenarios posibles y plugins que interactúan con ella, por eso es mejor que hagas pruebas y muchas pruebas hasta llegar a una configuración ideal.

Preguntas Frecuentes

Si tienes dudas dentro del plugin en la pestaña FAQ están las respuestas a los problemas más comunes que se puedan presentar y esta todo muy bien documentado, además puedes formular tus consultas en el foro de los desarrolladores, que por cierto son muy amables y siempre están dispuestos a ayudar.