← Diario de Construcción

Edge Cache: Transformando un WP dinámico en algo tan rápido como estático

Aprende a configurar el Edge Cache en Cloudflare para portales WordPress y garantiza tiempos de carga instantáneos sin sacrificar tu panel de administración.

La migración de un sitio WordPress a una arquitectura Headless moderna utilizando Astro es el escenario ideal para lograr la máxima velocidad y seguridad. Sin embargo, sabemos que no siempre hay tiempo o presupuesto disponibles para reescribir por completo un portal complejo que ya está en funcionamiento.

En estos casos, la mejor alternativa no es llenar el panel de WordPress con plugins de caché pesados e inestables. En su lugar, podemos mover la caché por completo fuera del servidor de origen utilizando el Edge Cache (Caché de Borde) de Cloudflare.

La pesadilla del TTFB en el WordPress tradicional

Cuando un visitante accede a un sitio WordPress común, el servidor de alojamiento debe:

  1. Recibir la solicitud HTTP.
  2. Inicializar el núcleo de PHP y cargar docenas de plugins.
  3. Realizar consultas a la base de datos MySQL para armar la cabecera, el contenido del post, los widgets y el pie de página.
  4. Procesar el HTML resultante y, finalmente, devolverlo al navegador del usuario.

Este proceso genera un Time to First Byte (TTFB) alto, que a menudo supera los 1 o 2 segundos en alojamientos compartidos. El TTFB es el tiempo que el navegador espera solo para comenzar a recibir los primeros bytes de respuesta de la página. Si el TTFB es lento, todo el proceso de carga del sitio se ve afectado, impactando la puntuación en Google Core Web Vitals.

Qué es el Edge Cache y cómo funciona

Cloudflare cuenta con cientos de datacenters distribuidos globalmente (los llamados servidores de borde o Edge). Por defecto, Cloudflare solo almacena en caché archivos estáticos como imágenes, hojas de estilo CSS y JavaScript. El HTML de la página pasa directamente a tu servidor WordPress.

El Edge Cache (o Cache Everything) cambia esta regla. Fuerza a Cloudflare a guardar una copia estática de todo el código HTML generado por las páginas de tu blog.

De esta forma, cuando un segundo visitante intente acceder a la misma publicación, Cloudflare entregará el HTML estático directamente desde el datacenter más cercano a él (a menudo en menos de 50ms), sin que la solicitud tenga siquiera que tocar tu servidor de alojamiento.

Configuración práctica en Cloudflare

Para implementar la caché de páginas HTML completas de forma segura sin romper el panel de WordPress, sigue estos pasos en el panel de Cloudflare:

  1. Accede a tu dominio y ve a Caching > Cache Rules.
  2. Haz clic en Create Rule.
  3. Define los criterios de coincidencia para que la caché se active en la mayoría de los accesos, pero ignore el panel de administración. Por ejemplo:
    • Si la ruta del URI no contiene /wp-admin/
    • Y la ruta del URI no contiene /wp-login.php
    • Y la cabecera Cookie no coincide con .*wordpress_logged_in_.*
  4. En la acción de la regla, en Cache eligibility, selecciona Cache everything.
  5. Configura el Edge TTL para definir cuánto tiempo permanecerá guardada la copia del HTML en los servidores de Cloudflare antes de verificar nuevas actualizaciones en el servidor de origen (ej. de 2 a 4 horas para blogs comunes).

Evitar problemas con áreas dinámicas y el panel administrador

El mayor peligro de almacenar en caché el HTML completo es exponer páginas privadas de administración o mostrar contenido personalizado (como carritos de compra en WooCommerce) a los visitantes equivocados.

Para evitar esto:

  • Bypass de Cookies: El paso 3 de la regla es crucial. El WordPress genera la cookie wordpress_logged_in_ cada vez que un usuario se autentica. Al indicar a Cloudflare que haga bypass (no aplique) la caché cuando esta cookie esté presente, garantizamos que los usuarios conectados sigan viendo la versión dinámica en tiempo real del sitio.
  • Integración con Plugins de Limpieza: Utiliza plugins de caché ligeros en WordPress (como WP Super Cache o LiteSpeed Cache) configurados para activar una limpieza automática de la caché de Cloudflare a través de la API cada vez que actualices o publiques un post. Esto asegura que el borde se actualice instantáneamente sin esperar a que expire el Edge TTL.

Al trasladar el pesado trabajo de renderizado a la red global de Cloudflare, tu WordPress comenzará a cargarse en milisegundos con una carga de servidor prácticamente nula.

Fuentes consultadas