¿Qué puedes hacer para mejorar la velocidad y rendimiento de WordPress si lo tienes conectado con Cloudflare? Activar la caché de todo tu blog con unas cuantas reglas de caché (Cache Rules). Te cuento cómo se hacía antes y cómo lo puedes implementar actualmente.
Recuerda: necesitas tener un blog con WordPress conectado al DNS de Cloudflare para poder hacer todo esto. Además, en tu hosting tienes que tener el servidor Apache instalado para poder seguir el tutorial.
Cómo se hacía con las antiguas Page Rules de Cloudflare
Una de las cosas más interesantes que hacíamos con las antiguas Page Rules de Cloudflare para mejorar la velocidad de un blog creado con WordPress, es que podíamos activar Cache Everything para que Cloudflare guardara en Cache todo el blog (HTML, imágenes, etc.) Yo lo tenía activado en esta página con una regla como la que puedes ver en la siguiente imagen:
Ok. Pues ya no se hace así. Ahora nos tenemos que buscar la vida en la interfaz de Cloudflare y crear una nueva regla de caché para poder hacer lo mismo.
- Te puede interesar: Cómo desactivar las opciones de rendimiento de Cloudflare en wp-admin (WordPress)
Cache Everything en las nuevas Cache Rules de Cloudflare para tu WordPress
- Vamos a generar tres reglas en Cache Rules.
Primera regla: Cache Everything (colocada en segunda posición)
Lo primero que tenemos que hacer es ir a Caching > Cache Rules > Create Rule:
Yo ya tengo generada la nueva regla. En tu caso, la debes generar desde el principio. Lo primero que hay que hacer es ponerle nombre a la regla y luego vamos a Edit Expression y ponemos algo similar a esto (cambia tu_pagina_web.com por tu URL):
(http.host contains "tudominio.com" and not starts_with(http.request.uri.path, "/wp-admin") and http.request.uri.path ne "/wp-login.php" and http.request.uri.path ne "/xmlrpc.php" and not http.cookie contains "wordpress_logged_in" and not http.cookie contains "wordpress_sec")Con esto vamos a conseguir hacer caché de todo el dominio, excepto de algunas partes que excluimos de WordPress. Si tienes otro CMS, la regla será diferente. En mi caso hay que dejar fuera las cookies, wp-login y wp-admin. Si te das cuenta, ya no se ponen símbolos como * como se hacía antes en las Page Rules. Ahora todo funciona de manera más visual, indicando operadores.
Cuando tienes la regla escrita, es muy importante elegir Cache eligibility y poner Eligible for cache. Después tenemos que configurar un poco las cosas. Te lo cuento después de esta imagen.
Edge TTL
El parámetro más importante de la regla por una sencilla razón. Es donde le indicamos a Cloudflare cuánto tiempo tiene que cachear nuestros recursos. En mi caso, he puesto Use cache-control header if present, use default Cloudflare caching behavior if not… ¿Perdón? Sí, porque esto lo tengo optimizado en mi servidor Apache con la siguiente regla:
¡Ojo! Anteriormente, tenía implementadas también las reglas con mod_expires, pero ahora mismo solo son necesarias para navegadores antiguos… y no merece la pena. Todo esto funciona con Apache.
#############################################
# DETECCIÓN DE CONTENIDO PRIVADO
#############################################
<IfModule mod_setenvif.c>
#############################################
# Admin y login - todas las instalaciones
#############################################
# Raíz
SetEnvIf Request_URI "^/wp-admin/" PRIVATE_PAGE
SetEnvIf Request_URI "^/wp-admin$" PRIVATE_PAGE
SetEnvIf Request_URI "^/wp-login\.php$" PRIVATE_PAGE
SetEnvIf Request_URI "^/xmlrpc\.php$" PRIVATE_PAGE
#############################################
# Cookies de sesión WordPress
#############################################
SetEnvIf Cookie "wordpress_logged_in" PRIVATE_PAGE
SetEnvIf Cookie "wp-postpass" PRIVATE_PAGE
</IfModule>
#############################################
# HEADERS
#############################################
<IfModule mod_headers.c>
# Limpiar posibles headers conflictivos
Header always unset Cache-Control
#########################################
# 1. RECURSOS ESTÁTICOS
#########################################
<FilesMatch "\.(ico|jpe?g|png|gif|svg|eot|ttf|otf|woff2?|webp|avif|css|js)$">
Header always set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>
#########################################
# 2. HTML / PHP (WordPress)
#########################################
<FilesMatch "\.(x?html?|php)$">
# PRIVADO: admin, login, usuarios logueados → Actualización inmediata
Header always set Cache-Control "private, no-store, no-cache, must-revalidate, max-age=0" env=PRIVATE_PAGE
# PÚBLICO: Cloudflare cachea 24h, navegador 60 min
Header always set Cache-Control "public, s-maxage=86400, max-age=3600, stale-while-revalidate=14400, stale-if-error=3600" env=!PRIVATE_PAGE
</FilesMatch>
</IfModule>Donde básicamente le estoy informando a Cloudflare lo siguiente:
- Detectamos contenido privado para que no se produzca la caché del mismo con mod_setenvif (panel de administración, login y xmlrpc de WordPress). También detecta usuarios logueados o contenidos protegidos con contraseña.
- Con mod_headers hacemos que los contenidos estáticos (imágenes, fuentes, CSS, JS) sean cacheados 1 año (max-age=31536000). Mientras que immutable indica que el archivo nunca cambia, así que el navegador no tiene que comprobarlo en cada carga.
- Luego le decimos cómo funciona la cache para HTML y PHP:
- Contenido privado (admin, login, usuarios logueados): Nunca se cachea ni en navegador ni en proxies (Cloudflare, CDN).
- Contenido público (resto del sitio): Cloudflare lo guarda durante 24 h y el navegador lo guarda 1 hora. stale-while-revalidate y stale-if-error permiten servir contenido “viejo” mientras se actualiza, o si hay error.
Vale, tú no quieres o no puedes activar este tipo de configuración en el archivo conf de Apache o en .htaccess. Puedes hacerlo directamente en Cloudflare. Activas Ignore cache-control header and use this TTL y pones el tiempo que tú quieras. No hace falta poner nada en status code TTL. Al final le das a Deploy.
Browser TTL
En este caso es la orden que le das al navegador de tu visitante para que mantenga cosas en Cache. Yo lo tengo puesto para que la configuración del servidor sea la que manda. Tú puedes cambiarlo a Override origin and use this TTL y poner el tiempo que quieras. ¿Valor recomendado? Pues depende de cuánto quieras que tus recursos estén en su navegador. Los valores por defecto en Cloudflare son (buen punto de origen para empezar a tunear):
- ¡Ojo! La purga de la caché de Cloudflare no afecta a lo que está almacenado en el navegador de un visitante.
| Tipo de plan en Cloudflare: | Free | Pro | Business | Enterprise |
|---|---|---|---|---|
| Por defecto Browser Cache TTL | 4 horas | 4 horas | 4 horas | 4 horas |
| Mínima Browser Cache TTL (Cache Rules) | 2 horas | 1 hora | 1 segundo | 1 segundo |
| Mínima Browser Cache TTL (Page Rules) | 2 minutos | 2 minutos | 2 minutos | 30 segundos |
Reglas dos y tres en Cloudflare para tu WordPress
El orden de estas tres reglas importa. Primero, Cache wp-content y wp-includes, luego Cache Everything y finalmente Sin cache en admin y cookies.
Regla sin cache en admin y cookies (tercera posición)
Con todo lo anterior, le estamos diciendo a Cloudflare que haga caché de unas partes y de otras no, pero también deberíamos añadir otras dos reglas en cache rules para asegurarnos de que Cloudflare no haga caché de zonas privadas. Por eso ves que como tercera regla he puesto Sin cache en admin y cookies con este contenido (he puesto subcarpeta donde está el blog instalado… tú lo puedes tener en el directorio raíz de tu dominio):
(starts_with(http.request.uri.path, "/wp-admin")) or (http.request.uri.path eq "/wp-login.php") or (http.request.uri.path eq "/xmlrpc.php") or (http.cookie contains "no_cache") or (http.cookie contains "wordpress_logged_in") or (http.cookie contains "wordpress_sec") or (http.cookie contains "wp-postpass") or (http.cookie contains "PHPSESSID") or (http.cookie contains "comment_")Y le digo que bypass cache.
Regla Cache wp-content y wp-includes (primera posición)
Y para acelerar las cosas con los contenidos estáticos, le tenemos que dar otra regla, Cache wp-content y wp-includes:
(starts_with(http.request.uri.path, "/wp-content/")) or (starts_with(http.request.uri.path, "/wp-includes/css")) or (starts_with(http.request.uri.path, "/wp-includes/js")) or (starts_with(http.request.uri.path, "/wp-includes/images")) or (starts_with(http.request.uri.path, "/wp-includes/fonts")) or (starts_with(http.request.uri.path, "/wp-includes/blocks"))Y seleccionamos Eligible for cache y Use cache-control header if present, cache request with Cloudflare’s default TTL for the response status if not.
Conclusión
Y con todo esto, ya tendrías el equivalente a Cache Everything de las antiguas Page Rules, por lo menos en el apartado de caché. Luego tienes que configurar cosas en Configuration Rules y en las reglas del WAF.
Resumiiendo como queda tu cache:
| Configuración | Valor recomendado | Notas |
|---|---|---|
| Edge Cache TTL | 24 horas | Para contenido público |
| Browser Cache TTL | 1 hora | Balance entre frescura y rendimiento |
Es importante que instales el plugin de Cloudflare para WordPress para que refresque la caché de tus entradas cuando cambies algo en ellas, y para actualizar la página principal del blog. También deberías instalar un plugin de caché en WordPress como WP Super Cache para servir contenido estático. Y activar cosas como Memcached/Redis y Opcache en tu VPS.
Te he contado más cosas en: Cómo bloquear Bots Maliciosos utilizando User Agents y Cloudflare y en Cómo configurar las Cache Rules de Cloudflare para WordPress.
Referencias:
- https://developers.cloudflare.com/cache/concepts/cache-control/
- https://simonhearne.com/2022/caching-header-best-practices/
- https://accreditly.io/articles/the-practical-guide-to-http-caching-headers-cache-control-etag-and-304s
- https://developers.cloudflare.com/cache/how-to/cache-rules/order/
- https://medium.com/userbird/how-to-cache-everything-on-cloudflares-cdn-making-your-website-lightning-fast-117edc4f898d
- https://floatui.com/blog/stale-if-error-stale-while-revalidate-http-caching
