Cloudflare Cache Everything mejora el TTFB de WordPress en un 90 %

Publicado: 2022-12-03

Cloudflare cache everything fast site load

Sabes que la velocidad del sitio es un factor crucial para tu blog. El caché de Cloudflare todo realmente puede ayudarlo a acelerar las cosas.

Sus visitantes no esperarán más de un par de segundos para que sus páginas web se carguen antes de irse. Google deja en claro que el tiempo de respuesta es un factor importante en el ranking de búsqueda. Entonces sí, la velocidad importa hoy para su sitio.

Es relativamente fácil obtener velocidades de carga de página razonables para escritorio con WordPress. Pero la velocidad móvil no es tan fácil.

Sin embargo, hay una manera de mejorar drásticamente la velocidad de su sitio con las reglas de página de Cloudflare.

En este artículo Ocultar
¿Estás usando Cloudflare?
Reducción de TTFB
Cómo aplicar el caché de Cloudflare todo
Compruebe el cargador de cohetes
Un inconveniente y la solución.
Actualización: una solución nueva y mucho mejor
Resumen

¿Estás usando Cloudflare?

El primer paso para mejorar los tiempos de respuesta del lado del servidor es hacer que su sitio se ejecute en una CDN (red de entrega de contenido).

El servicio más popular es Cloudflare para la mayoría de los bloggers porque es altamente efectivo, confiable y gratuito.

Si necesita agregar su sitio a Cloudflare, este tutorial de WP Beginner es un excelente lugar para comenzar.

Pero si ya lo está utilizando, puede mejorar drásticamente el rendimiento de su tiempo hasta el primer byte (TTFB).

Es uno de los factores más críticos para la velocidad de carga del sitio.

En un artículo anterior, escribí sobre cómo mejorar la velocidad de las páginas de administración de WordPress con reglas de tres páginas.

Pero para esta solución, debe usar la regla de todo en caché de Cloudflare.

Si está utilizando una cuenta gratuita de Cloudflare, solo obtiene reglas de tres páginas.

Por lo tanto, requerirá cambios en las reglas de su página existente.

Pero vale la pena el esfuerzo.

Reducción de TTFB

Aquí hay algunos ejemplos de cuánta diferencia pueden hacer estos cambios en su velocidad TTFB.

Las dos imágenes a continuación que usan Chrome Deleveopers Tools le muestran la diferencia que puede hacer en la velocidad de su dispositivo móvil.

El primero no está optimizado y tiene un TTFB de 1,55 segundos.

TTFB mobile

Puede ver la mejora aquí después de agregar la nueva regla de Cloudflare. TTFB ahora es solo 33.25 milisegundos.

Cloudflare Cache Everything TTFB mobile

Desde mi cuenta de Freshping, puede ver los tiempos de respuesta generales de los tres sitios que optimicé.

Son un 90 % más rápidos que los cuatro sitios que aún no están totalmente almacenados en caché.

Cloudflare cache everything response times

Cómo aplicar el caché de Cloudflare todo

Antes de lanzarse a hacer estos cambios, una palabra de advertencia.

Este método solo es adecuado para un sitio razonablemente estático que no cambia muy a menudo.

No es una buena idea si tiene contenido dinámico, como widgets cambiantes, feeds de Twitter, controles deslizantes o actualizaciones periódicas de información.

Cuando agrega todo en caché a Cloudflare, hace lo que dice.

Así es como puede agregar esta mejora de la velocidad del sitio desde su panel de control de Cloudflare.

Para comenzar, deberá agregar su nueva regla. Haga clic en el botón de la aplicación de reglas de página en el menú superior.

Si ya tiene tres reglas, deberá eliminar una. En mi caso, eliminé la regla *preview=true*.

new page rule

Ahora agregue su nueva regla de página para la URL de su sitio web con una estrella comodín en cada extremo.

A continuación, agregue esta configuración de reglas.

Caché del navegador TTL: 1 hora
Nivel de caché: almacenar todo en caché
Edge Cache TTL: 7 días

Haga clic en Guardar y ahora todo está configurado para sus encabezados de control de caché.

Una nota importante es verificar y asegurarse de ordenar sus reglas como en la imagen de arriba.

La regla de caché de su sitio debe venir después de sus reglas de wp-login y wp-admin para proteger el control de caché de origen de sus páginas de administración.

También debe verificar la configuración de caché del navegador de Cloudflare para asegurarse de haber seleccionado Respetar los encabezados existentes.

caché del navegador ttl

Compruebe el cargador de cohetes

También es posible que desee verificar si está utilizando Rocket Loader de Cloudflare.

Cuando funciona, funciona extremadamente bien, pero también puede romper su sitio. Lo tengo funcionando en dos sitios, y está bien.

Pero en otro sitio causa problemas, así que lo apagué.

Una vez que verifique que todas las configuraciones son correctas, vaya a su sitio para ver si todo funciona como se esperaba. Debería cargarse casi instantáneamente ahora.

Luego verifique la velocidad de su sitio con Google Page Speed ​​Insights, GTMetrix o Pingdom para ver la mejora.

Su objetivo debe ser inferior a 200 ms para TTFB y menos de 2 segundos para carga completa.

Aquí hay una captura de pantalla del tiempo de carga de uno de mis sitios en GTMetrix. Puede ver que se carga completamente en solo 0,6 segundos.

page load time

Un inconveniente y la solución.

Debido a que ahora todo en su sitio está almacenado en caché, los cambios que realice no tendrán efecto hasta que se borre el ciclo de caché.

Esto puede tardar mucho tiempo en suceder.

Por lo tanto, cuando agrega una nueva publicación o edita una publicación existente, no verá los cambios. También se aplica a los nuevos comentarios en su sitio.

La única forma de evitar esto es instalar el complemento Cloudflare.

No me gusta agregar más complementos, pero este es esencial para esta corrección de velocidad.

Una vez que lo agregue, active la Gestión automática de caché.

Ahora purgará los archivos individuales que cree o edite y luego almacenará en caché los nuevos archivos de su servidor web de origen.

Desde el complemento, también puede purgar todo su sitio. Pero esta acción aumentará su tiempo de carga.

Es mejor pausar su sitio web en Cloudflare si desea evitar los problemas de caché para investigar cualquier problema.

El botón en el que realmente no debe hacer clic es Optimizar Cloudflare para WordPress.

Si lo hace, cambiará muchas configuraciones que pueden no ser deseables para usted. Estos incluyen minimizar HTML, javascript y CSS y también cambiar la configuración de los encabezados existentes.

Actualización: una solución nueva y mucho mejor

Desde que escribí este artículo, ahora hay disponible un nuevo complemento gratuito de WordPress que resuelve casi todos los problemas con Cloudflare Cache Everything.

Super Page Cache for Cloudflare

Super Page Cache para Cloudflare es fácil de instalar y le brinda mucho control.

El complemento lo ayuda a almacenar en caché no solo los archivos estáticos (p. ej., CSS, JS, imágenes, etc.) sino también las páginas web HTML generadas por WordPress, tanto a nivel de disco del servidor como en la CDN global de Cloudflare.

Lo instalé en uno de mis sitios y funcionó perfectamente. El TTFB cayó de casi un segundo a menos de 0,2 segundos.

speed results

Es comparable a Cloudflare APO, que no es un servicio gratuito.

Pero si usa una cuenta gratuita de Cloudflare, este complemento gratuito hará casi todo lo que puede hacer APO.

Utilizo este complemento de almacenamiento en caché en Just Publishing Advice y facilita obtener un gran resultado de Core Web Vitals.

Google Page experience mobile

Puede consultar cualquier página de este sitio con PageSpeed ​​Insights o GTMetrix para ver qué tan bien funciona todo en caché.

Me sorprendería si no obtuvieras un resultado totalmente verde.

GTmetrix JPA site perfomance

Si desea mejorar su velocidad de carga y Core Web Vitals, realmente vale la pena echarle un vistazo.

Resumen

Cloudflare Cache Everything funciona muy bien y acelerará enormemente tu sitio. Es especialmente efectivo para mejorar la velocidad del sitio móvil.

Pero no es para todos los sitios, y puede haber inconvenientes según el tema, la funcionalidad y el diseño del sitio.

Este método de almacenamiento en caché es muy agresivo, así que verifique todo dos veces.

Idealmente, debe probarlo en un sitio de prueba o sandbox para asegurarse de que su sitio funcione sin problemas.

Si lo implementa en su sitio en vivo y tiene problemas, siempre puede eliminar la regla de la página. Luego, purgue completamente su sitio en Cloudflare.

Luego volverás a donde empezaste.

Si necesita ayuda, hay muchas entradas en el Soporte de Cloudflare con respecto al contenido estático del caché y todo en caché.