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

MCD Diseño Web

Por: MCD

Tiempo de lectura minutos

  • Portada
  • /
  • Blog
  • /
  • Acelerar WordPress de forma gratuita con el CDN de CloudFlare y este magnífico plugin
acelerar wordpress

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.

CloudFlare + WP Cloudflare Super Page Cache = Obtienes la caché completa gratis para tu WordPress. Entra y te cuento más...

Tweetealo a tus amigos

¿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.

Crear una cuenta de CloudFlare con este mega tutorial es muy fácil

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

acelerar wordpress
acelerar wordpress

El procedimiento para instalar el plugin es el de toda la vida, ir al menú lateral Plugins >> Añadir nuevo y el campo disponible escribir WP Cloudflare Super Page una vez localizado deber hacer clic en Instalar ahora. como se indica en la captura superior.

acelerar wordpress

Una vez instalado el botón cambiará de estado y se mostrará como Activar, debes hacer clic en el para terminar el proceso de instalación y activación del mismo.

CloudFlare cache completa totalmente gratis para tu WordPress. Entra y te cuento más...

Tweetealo a tus amigos

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. 

acelerar wordpress

Dentro de tu perfil de CloudFlare encontrarás un botón que dice Crear token, debes hacer clic en él para pasar al siguiente paso.

acelerar wordpress

Ahora debes desplazarte al final de la página donde dice Crear token personalizado y hacer clic en el botón Comenzar para avanzar al siguiente paso. 

acelerar wordpress

Este punto es el más importante y debes rellenar el formulario con las opciones que se ven en la imagen superior. Tómate el tiempo y revisa una por una para que coincidan con la captura, cuando hayas terminado debes hacer clic en el botón Ir al resumen para pasar a la siguiente pantalla.

acelerar wordpress

En esta pantalla puedes ver todas la reglas creadas en la pantalla anterior y ya estaría todo lista para crear tu Token personalizado haz clic en el botón Crear token para pasar a la última pantalla.

acelerar wordpress

¡Enhorabuena! Ya está listo tu Token y debes hacer clic en el botón Copy para copiar y pegarlo en tu bloc de notas o en algún lugar seguro para utilizarlo en la configuración del plugin WP Cloudflare Super Page, porque una vez que cierres esta pantalla no podrás ver el código nuevamente y tendrías que hacer todo el proceso nuevamente.

acelerar wordpress

El Token personalizado debería quedar Activo como se muestra en la imagen superior, pero si no lo estuviera puedes activarlo haciendo clic en el menú de 3 puntos (...). Ahora si es el momento de pasar al plugin WP Cloudflare Super Page para activarlo.

¿Quieres velocidad de CloudFlare gratis? Con este plugin podrás lograrlo en minutos y tu web volará. Entra y te cuento más...

Tweetealo a tus amigos

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.

acelerar wordpress

Para acceder a la configuración del plugin WP Cloudflare Super Page debes ir en el menú lateral hasta Ajustes >>  WP Cloudflare Super Page

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.

acelerar wordpress
  1. 1
    Aquí debes elegir en el menú desplegable Token de la API.
  2. 2
    Ahora debes agregar el correo electrónico que utilizaste al crear la cuenta en CloudFlare.
  3. 3
    Aquí debes agregar el Token personalizado que creaste en CloudFlare en el paso anterior. ¿Te acuerdas?
  4. 4
    Ahora selecciona tu dominio actual tusitio.com 
  5. 5
    Una vez rellenado todo debes hacer clic en ACTUALIZAR AJUSTES
acelerar wordpress
acelerar wordpress

Ahora toca el turno de hacer clic en el botón ACTIVAR AHORA LA CACHÉ DE PÁGINA y con esto la caché completa de CloudFlare estará funcionando al máximo rendimiento y no habría que tocar el resto de configuraciones, excepto para excluir ciertas páginas de tu web que no quieras que se almacenen en la caché de CF.

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.

acelerar wordpress

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.

acelerar wordpress

Para activar el modo WorKers tienes tienes que entrar en la pestaña Caché y desplazarte hacia la sección Workers y hacer clic en el botón activado eso es todo.

acelerar wordpress

En la imagen superior puedes ver como el plugin WP Cloudflare Super Page agregó el código Workers dentro de la plataforma CloudFlare. Este código lo desarrollaron sus creadores y funciona muy bien evitando que a los usuarios conectados se les sirva contenidos cacheados y con las URLs limpias. ¡Increíble!


Aquí solo tienes que hacer clic en editar para cambiar una opción como se ve en la imagen siguiente.

acelerar wordpress

Aquí debes seleccionar la última opción y guardar esto es para cuando se te acabe las 100.000 solicitudes diarias gratuitas tu sitio siga sirviendo contenido, pero esta vez del servidor de origen (tu hosting) así siempre tu web estará online. 

acelerar wordpress

Opcionalmente si vas a utilizar el modo Workers deberías poner la regla Cache Everything en modo apagado dentro del la plataforma de CloudFlare ya que el código de WorKers se encarga de todo y no utiliza las reglas de página.

WP Cloudflare Super Page Cache el plugin gratuito que hará volar a la máxima velocidad a tu WordPress. Entra y te cuento más...

Tweetealo a tus amigos

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. 

acelerar wordpress

En la pestaña Caché del plugin encontrarás esta sección muy útil donde podrás excluir las páginas que consideres que no deberían por ningún motivo entrar en la caché de CloudFlare.

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.

IMPORTANTE: Asegurate de borrar toda la caché y las cookies del navegador antes de hacer las pruebas de funcionamiento de la caché de CF. También puedes hacer las pruebas con el modo de incógnito del navegador.

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.

  1. 1
    cache-control s-maxage=31536000, max-age=60
  2. 2
    cf-cache-status HIT
  3. 3
    server cloudflare
  4. 4
    x-wp-cf-super-cache-active 1
  5. 5
    x-wp-cf-super-cache-cache-control s-maxage=31536000, max-age=60
  6. 6
    x-wp-cf-super-cache-worker-status hit

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.

  1. 1
    Primero debes hacer clic en la nube.
  2. 2
    Luego clic en Vaciar la caché solo para esta página y esperar 30 segundos para ver los cambios.

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.  

acelerar wordpress

¿Te ha sido útil este artículo? Te espero en los comentarios...

¿Te gustaría ayudar a otras personas? Entonces lo tienes fácil, compártelo en las redes sociales.

También puedes echar un vistazo a los testimonios más inspiradores...

¿Necesitas más ayuda? Visita el foro donde hay una comunidad siempre lista para ayudar.

Suite Thrive

¿Quieres llegar muy alto? ¡Descarga gratis ahora mismo el curso de Thrive Architect! Y empieza a crear como los profesionales.

prosperar arquitecto
¿Quieres sentir la satisfacción de crear tu mism @ la web de tus sueños?
Consulta los
Estas son mis
+ tutoriales en la
Matricúlate en los 
Un todo en uno
Más ayuda ...

Esto también te puede interesar...