El sistema de caché completa de CloudFlare, también conocido como APO, es una funcionalidad de pago de esta CDN con la que servir todos los recursos de tu web desde la caché de CloudFlare, tanto los recursos propios como de terceros.
Normalmente, en la versión gratuita de CloudFlare solo puedes servir cacheados los recursos propios, pero activando el servicio APO de pago puedes además servir en caché recursos de terceros, acelerando aún más la carga de tus páginas.
Pues bien, como ya expliqué qué era eso de APO de CloudFlare y cómo activarlo para WordPress, por el módico precio de 5$ al mes, hoy vamos a ver un modo alternativo de conseguir lo mismo, pero totalmente gratis.
Índice de contenidos
Activa tu sitio en CloudFlare
El primer paso es dar de alta tu sitio en CloudFlare, algo más sencillo de lo que puedas imaginar, que conlleva solo estos pasos:
- Darte de alta en CloudFlare.com
- Añadir tu dominio al plan gratuito
- Cambiar las DNS para usar las de CloudFlare
El proceso, en detalle y con capturas, lo tienes en esta guía…
Acelera WordPress sirviendo tu contenido desde CloudFlare CDN
Crea un token personalizado de la API de CloudFlare
Ve a la página de tokens de la API de CloudFlare, en este enlace, y crea un nuevo token. Vas a ver muchas capturas de pantalla pero en realidad es muy sencillo y no se tarda casi nada en hacerlo.
A continuación se mostrará una lista de tokens disponibles, elige crear un token personalizado.
En la siguiente pantalla tienes que rellenar algunos campos y añadir las reglas del token. Hazlo como en la siguiente captura:
Lo resumo aquí:
- Nombre del token: Ponle un nombre que lo distinga del resto y describa su función.
- Permisos:
- Cuenta -> Configuración de la cuenta -> Leer
- Cuenta -> Scripts de Workers -> Editar
- Zona -> Purga de caché -> Purgar
- Zona -> Reglas de página -> Editar
- Zona -> Configuración de zona -> Editar
- Zona -> Zona -> Editar
- Zona -> Rutas de Workers -> Editar
- Recursos de cuenta:
- Incluir -> Elige en el desplegable la cuenta que quieres cachear totalmente.
- Recursos de zona:
- Incluir -> Zona específica -> Elige en el desplegable el dominio de la cuenta que qu ieres cachear totalmente.
El resto de ajustes de la parte inferior no hace falta poner nada, así que pulsa el botón de «Ir al resumen».
En la siguiente pantalla revisa la configuración y, si todo está correcto, pulsa en el botón de «Crear token».
Ya hemos terminado, ahora tendrás una pantalla con el token de la API para copiarlo y usarlo más adelante.
Instala el plugin de super caché de CloudFlare
Ahora vamos al paso fundamental, y es instalar un plugin que consiga la caché completa de CloudFlare sin tener que pagar por ella.
Se llama WP CloudFlare Super Page Cache, es gratuito y se instala como cualquier otro plugin WordPress.
Una vez activo creará un nuevo menú de ajustes en Ajustes > WP Cloud Super Page Cache.
Añade tu token personalizado a los ajustes del plugin
En la página de ajustes vamos a configurar la conexión de nuestro sitio WordPress con la API de CloudFlare mediante nuestro recién creado token.
Como ves en la captura anterior, hay 3 datos fundamentales que debes configurar:
- Authentication mode: API Token
- Cloudflare e-mail: El correo con el que accedes a esta cuenta de CloudFlare.
- CloudFlare API Token: Pega aquí el token que creamos en el primer paso
El nombre de dominio lo completa el plugin automáticamente.
Si te fijas en la parte superior del plugin, se muestran los pasos para crear el token de la API que vimos antes, que ya hemos realizado llegados a este punto ¿verdad?
Bueno, guarda los ajustes pulsando en el botón de «Update Settings», que no se te olvide.
Activa la caché de página
Nada más guardar los cambios el plugin te mostrará el siguiente paso: activar la caché de página total de CloudFlare.
Ya estás tardando en pulsar el botón, no tiene pérdida, es grande, de color verde chillón y se llama «ENABLE PAGE CACHING NOW».
El resultado, tras unos brevísimos segundos, es el esperado: caché de página activa.
Revisa los ajustes del plugin
Nunca está de más comprobar que la caché está funcionando, y para eso encontrarás un botón para probarla.
A partir de aquí es importante que revises los muchos ajustes del plugin porque tiene configuraciones específicas de vaciado de caché, por ejemplo, que son muy importantes para tiendas online o sitios de membresía.
También encontrarás ajustes de compatibilidad con los principales plugins de caché, AMP y más. Conviene revisar en detalle los ajustes y hacer pruebas, como con cualquier plugin, de que todo funciona correctamente.
La caché completa de página puede ser muy agresiva, en el sentido de que tus visitantes no vean los nuevos comentarios, valoraciones, cambios de inventario o precios en productos, etc, así que es importante revisar bien los ajustes.
Por otra parte, la caché de página completa de CloudFlare es fantástica, mejora mucho los tiempos de carga de WordPress.
¿Funciona?
Pues sí, de hecho es el mejor modo de aprovechar CloudFlare, usar la caché de página completa, ya sea de pago con APO o gratis con los pasos que hemos visto en esta guía.
De hecho, gracias a las muchas configuraciones posibles que ofrece el plugin, los resultados de este método gratuito pueden ser mucho mejores que con
Los resultados de mejora de rendimiento son inmediatos…
Además es importante remarcar que el rendimiento de la caché completa de página de CloudFlare es muy consistente, ofreciendo muy buenos resultados en casi cualquier parte cubierta por los servidores de la CDN.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Hola, me ha parecido muy interesante el post, tendria dos preguntas. Por un lado manejo dos webs, ambas en siteground, en una de ellas uso el plugin de cache Swift perfomance (no se si lo conoce) pero si lo conoce valdria con configurar el token api en la opcion que tiene dicho plugin para evitar el instalar el plugin wp cloudflare…? Funcionaria igualmente o abria que instalar tambien el wp cloudflare?
En la otra tengo el plugin de sg optimizer del mismo siteground. Hace unos meses agregaron para activar una cache mejorada o nose ahora mismo como la nombra. Con esa opción seria igual que todo lo anterior o no tiene nada que ver, y aun con esa opcion es recomendable activar y personalizar todo. Gracias
Hola Ángel,
No tiene nada que ver, ni el Swift Performance ni la caché de SiteGround, esto añade unas reglas específicas a la caché de CloudFlare
Entonces es compatible con el plugin de SG, entiendo? Gracias Fer.
Claro, del todo, incluso tiene un ajuste de integración
Hola Fernando, primero agradecerte por todo el conocimiento entregado, por otro lado contarte hoy que ando revisando esta configuracion, desde mi SG Optimizer veo un tab llamado Cloudflare «Full page Caching», la pregunta es, hace lo mismo que hacerlo con el plugin de Cloudflare ?
Saludos.
No, ese complemento de SG Optimizer es una especie de conexión con tu cuenta de CloudFlare pero lo que hace este plugin es mucho más completo, y compatible con lo otro
Funciona de maravilla. Ahora mi web carga un poco más rápido y además no tiene casi variaciones en los testeos de velocidad. Gracias!
Hola:
¡Muchas gracias por compartir la información!
Consulta: ¿Cuál es la ventaja de usar el plugin y al API Token que mencionas en comparación de crear una «Page Rule» en Cloudflare con «Cache Everything».
Saludos,
Alvin
Pues que el plugin añade reglas a Apache y Nginx si es necesario, interactúa con otros plugins de caché, de optimización, aporta muchas ventajas
Que tal si uso Wp Rocket recomiendas alguna modificación?
El mismo plugin tiene una sección de preguntas y respuestas con recomendaciones exclusivas para cada plugin. Lo he traducido casi al completo, luego lo termino
Hola, Fernando
Gracias por el artículo.
Acabo de instalar el caché completo de cloudFlare en mi blog apismielera.com. Debería eliminar el plugin que tengo instalado Litespeed?
Un saludo.
No, son complementarios, lee la sección de FAQ del plugin 😉
Hola Fernando,
pues me quitas de encima tener que tomar la decisión de tener que eliminar Litespeed, recomendado po wp y de muy buen funcionamiento o el caché de CloudFlare.
CloudFlare lo instalé el día 1 de este mes y me sorprendió ver el montón de visitas que tengo por el mundo, casi 6000 al día.
A todo esto, estoy buscando el modo de monetizar el blog, hecho por mi y mis experiencias de apicultor.
¿Algún consejo?
A todo esto te comento que yo soy de Bilbao de nacimiento aunque ahora vivo en Polientes, Cantabria.
Estudié en el Instituto Central de Bilbao, Miguel de Unamuno hasta los 18 años. Luego la vida me llevó por otros derroteros y después de vivir en Brasil 10 años, dónde me casé, en 2016 regresé a Polientes.
Bueno, que no te quiero aburrir con mis batallitas.
Venga, pues un gusto leerte y saber de ti.
Un abrazo
Lo de monetizar el blog, mientras no tengas mucho tráfico o autoridad no te merece la pena ni intentarlo, es mucho esfuerzo para nada, decepcionante.
Promociónate primero con tutos en vídeo, conferencias, en medios tradicionales, lo que sea, luego monetiza.
Saludos de otro bilbaíno de nacimiento 😉
Gracias… Al leer que de esta forma Clouflare sirve una versión html completa del sitio, he eliminado la versión html creada mediante el pluging WP2Static… pero el tiempo de carga ha aumentado en 4 o 5 segundos… Probablemente se me escapa algo, pero no parece que Cloudflare este sirviendo una versión html completa…
Gracias de nuevo…
Tanto WP2Static como la caché completa de CF hacen lo mismo, crear un HTML que sirven, pero CF necesita que haya visitas para generar los HTML, salvo que uses el precargador de este plugin, que simula visitas para generar el HTML
Gracias… No me había llegado la notificación de la respuesta… Independientemente de lo que dices, parece que el plugin no funciona en mis sitios, pues al «probar caché» me dice:
«La caché de página parece que no está funcionando ni en páginas dinámicas ni estáticas.
Error on dynamic page (https://www.viaje-iniciatico.com): Estado de la caché: DYNAMIC – El recurso no se cacheó por defecto y tu configuración actual de caché de CloudFlare no indica a CloudFlare que cachee el recurso. En su lugar, el recurso se solicitó desde el servidor web de origen.
Error on static resource (https://www.viaje-iniciatico.com/wp-content/plugins/wp-cloudflare-page-cache/assets/testcache.html): Estado de la caché: DYNAMIC – El recurso no se cacheó por defecto y tu configuración actual de caché de CloudFlare no indica a CloudFlare que cachee el recurso. En su lugar, el recurso se solicitó desde el servidor web de origen.
Por favor, comprueba tú mismo si la caché de página está funcionando navegando por la web en modo incógnito, porque a veces CloudFlare se salta la caché de las solicitudes cURL. Recarga una página dos o tres veces. Si ves la cabecera de respuesta cf-cache-status: HIT es que la caché de página está funcionando bien.»
He comprobado y cf-cache-status: DYNAMIC
¿A alguien más le ha sucedido en alguna instalación?
Gracias
Si comprobando el código fuente no te sale que está cacheado entonces no te funciona, lo del error pasa a veces pero luego sí cachea.
Yo probaría a cacharrear con los ajustes, lo he instalado en montones de sitios y en todos me funciona.
Gracias… ¿Podría ser debido a alguna configuración del servidor o código del .htaccess?
Voy a reportar la incidencia en la página del plugin, a ver si logro algo…
Gracias de nuevo…
En la página del plugin me han indicado que en Cloudflare añada una regla de página para cachear todo: https://wordpress.org/support/topic/cf-cache-status-dynamic-4/#post-14080270 Esa regla ya estaba, pero la url no tenía «https://www.» Lo he añadido, y el plugin funciona correctamente…
El tiempo ha bajado en varios segundos… Da placer ver todos los indicadores en verde, y un tiempo de carga de 0,5 segundos…
Profundamente agradecido… Abrazo…
Genial, gracias por compartirlo 😉
Hola Fernando, muy interesante el post y los consejos que ofreces.
Tengo el site alojado en SiteGround active CloudFlare desde su web o sea no desde SG ya que me obliga a utilizar WWW cosa que no requiero, mi pregunta este plugin de CF no interfiere con el Optimizer de SG?
Nada,sin problema, yo lo tengo igual
Gracias por tu respuesta Fernando;
Te comento con el SG Optimizer no tengo problemas pero cuando intento activar la caché completa a través del Plugin «WP Cloudflare Super Page Cache», siguiendo las pautas que das y hago la prueba de caché me arroja este error:
CITO:
Error on dynamic page (https://xxxxxxx.com): Parece que tu web no está en CloudFlare. Si has activado recientemente la caché o si es tu primera prueba, espera unos 30 segundos e inténtalo de nuevo, porque los cambios tardan unos pocos segundos en que CloudFlare los propague en la web. Si persiste el error solicita soporte para conseguir una prueba detallada.
(si esta en CloudFlare).
Error on static resource (https://tecnoprogramas.com/ifomodak/wp-cloudflare-page-cache/assets/testcache.html): Parece que tu web no está en CloudFlare. Si has activado recientemente la caché o si es tu primera prueba, espera unos 30 segundos e inténtalo de nuevo, porque los cambios tardan unos pocos segundos en que CloudFlare los propague en la web. Si persiste el error solicita soporte para conseguir una prueba detallada.
FIN DE CITA
Alguna idea sobre que puede estar pasando?
Gracias
Hola, Fernando. Feliz Año. Muchísimas gracias por la labor de este blog y de este artículo. He configurado e instalado todo en mi sitio web leganex.es y me surge una pregunta: ¿recomiendas activar la caché de página de reserva y añadir reglas de caché del navegador? Me pide tener el archivo wp-config en modo escritura y me da un poco de miedo, ya que DINAHOSTING lo mantiene en solo lectura. ¡Mil gracias!
Si no tienes aplicadas reglas de rewrite por otro plugin sí es recomendable la caché de reserva, totalmente, que añade una serie de reglas a .htaccess
Perdona por la ignorancia pero si activas la caché de cloidfare no necesitas servir una caché a través de WP rocket, por ejemplo?
Son totalmente compatibles, atienden distintas peticiones 🙂
Hola Fernando,
Excelente blog, felicidades.
Funciona para subdominios?
Gracias
Hola Fernando. Gracias por todo el contenido que compartes.
El caso es que he seguido tus consejos y he activado Cloudfare y también la cache completa, pero recibo el siguiente mensaje de error:
Page caching is working for static page but seems not working for dynamic pages.
Error on dynamic page (https://lasagabaster.com): Cabecera de respuesta cache-control no válida. Si estás usando un servidor LiteSpeed, por favor, desactiva la opción Omite la cabecera cache-control para páginas de WordPress que usen las reglas del servidor web, vacía la caché e inténtalo de nuevo.
Sinceramente, no tengo ni idea de qué significa ni cómo evitarlo, y tampoco he recibido ayuda de mi hosting.
¿Deshago los pasos y quito la completa?
¿O tiene arreglo?
Gracias y un saludo,
Pues simplemente haz lo que indica de desactivar esa casilla, está en la pestaña «Caché» de los ajustes del plugin. Esa opción solo es necesaria si activas los workers de CloudFlare
Gracias por responder Fernando, pero no sé exactamente a que casilla te refieres.
En no cachear contenido dinámico están activas las opciones recomendadas.
¿Te refieres a ésto o alguna otra?
Hay una opción en la pestaña Cache del plugin llamada «Omitir la cabecera de cache-control en las páginas de WordPress que usen reglas del servidor web». Debes desactivarla
Hola Fernando, te cuento que lo he activado como indicas luego de mi pregunta sobre la compatibilidad de SG Optimizer Full Caching Page y ahora veo que el cf-cache-status: HIT lo que me comprueba que se están sirviendo correctamente, sin embargo te tenia una pregunta, tengo instalado wp-stateless y sirvo mis imágenes directamente desde gcp en un buket que cree lo que me ayuda a optimizar espacio en mi servicio de hosting, sin embargo veo que los recursos estáticos como las imágenes no se sirven desde Cloudflare o por lo menos es lo que alcanzo a ver desde el webtools de chrome, alguna idea o forma de comprobarlo ?
Nuevamente gracias por todo tu conocimiento y apoyo.
Saludos.