Configurar Cloudflare para rendimiento: caché, CDN y optimización (II)

Con tu dominio ya configurado en Cloudflare (si vienes del Post I, ya tienes la base), es momento de aprovechar las funciones de rendimiento que convierten a Cloudflare en mucho más que un gestor de DNS. En esta segunda entrega vamos a recorrer cada configuración relevante del panel, explicándote qué hace, cuándo activarla y cuándo tener cuidado.

Cómo funciona la caché de Cloudflare

Cloudflare actúa como un proxy inverso: se sitúa entre el visitante y tu servidor. Cuando alguien accede a tu web, la petición llega primero a uno de los más de 300 centros de datos de Cloudflare repartidos por el mundo. Si el recurso solicitado (imagen, CSS, JS, fuente) está en la caché de ese nodo, se sirve directamente sin tocar tu servidor; si no lo está, que es lo normal la primera vez que se configura, Cloudflare lo solicita a tu servidor y lo almacena en sus nodos para futuras peticiones.

Esto tiene dos efectos inmediatos: el visitante recibe el contenido más rápido (desde un nodo cercano) y tu servidor recibe menos carga (muchas peticiones nunca llegan a él). Si quieres profundizar en cómo funciona un CDN por dentro, en nuestra guía de optimización web lo explicamos en detalle.

Configurar las opciones de la caché

Por defecto, y sin realizar ninguna configuración, Cloudflare cachea el contenido de la web de forma dinámica, ajustándose a los valores que proporciona el servidor de origen, pero al hacer una configuración más personalizada, podemos lograr mejores resultados y evitar posibles problemas.

Nivel de caché (Caching Level)

En "Almacenamiento en caché -> Configuración" encontrarás la opción de Nivel de almacenamiento en caché, con tres opciones:

• Sin cadena de consulta: cachea la URL sin parámetros. Si tiene algún parámetro (p. ej.: ?color=dark) no se cacheará.
• Ignorar cadena de consulta (Activa sólo si sabes lo que estás haciendo, puede ser peligroso): cachea sin tener en cuenta los parámetros. Útil si la web no cambia por los parámetros que recibe. 
• Standard (recomendado): cachea cada combinación de URL y parámetro como un recurso diferente. 

TTL de caché del navegador

El TTL de caché del navegador define cuánto tiempo el navegador del visitante mantiene los recursos en su caché local. Mientras el recurso esté en la caché local del navegador, no se hará ninguna petición ni a Cloudflare, ni a tu servidor.

El valor que se configure dependerá del tipo de web que tengas, si es una web dinámica que cambia con mucha frecuencia (blog, tienda), el valor por defecto (4 horas) es un buen equilibrio. Si, por otro lado, es una web estática, que rara vez cambia, podrías subirlo a un mes, siendo conservadores. La opción "Respetar los encabezados existentes" permite que tu servidor decida, la cual es ideal si las cabeceras de caché ya están bien configuradas.

Cache Rules

Las Cache Rules permiten controlar qué se cachea y qué no de forma selectiva. Como ejemplo, de entre las muchas cosas que puedes hacer con Cache Rules, puedes:

• Forzar caché agresiva en rutas con contenido estático: "/wp-content/*, "/assets/*", "/static/*", "/img/p/*".
• Excluir rutas dinámicas o sensibles: "/wp-admin/*", "/carrito", "/account".
• Establecer TTLs diferentes por tipo de recurso.

Ejemplo práctico

Veámoslo en un ejemplo práctico para Wordpress, con una regla que almacene en caché todo el contenido multimedia y otra que excluya el panel de administración de WordPress:

• La primera regla, cachea todo el contenido multimedia sin controlar la ruta en la que está. Esta regla podría ser útil en un sitio web que no almacena todos los ficheros estáticos en la misma ruta.

• La segunda regla omite la caché cuando la ruta empieza con "/wp-admin" o "/wp-login", evitando poder encontrarse con inconsistencias entre la caché y lo que realmente hay en el servidor.

Purgar caché: cuándo y cómo

Después de actualizar el diseño de tu web, cambiar imágenes o actualizar CSS/JS, los visitantes pueden ver la versión antigua si Cloudflare sigue sirviendo la caché anterior. Para forzar la actualización:

• Purgar todo: borra toda la caché. Es útil cuando se han hecho cambios grandes. Las primeras visitas tras esta purga serán más lentas hasta que se reconstruya la caché.
• Purga personalizada: borra la caché en las URLs que indiques (admite carácter comodín). Recomendado para cambios puntuales.

Adicionalmente, Cloudflare tiene un Modo Desarrollo que omite toda la caché de su sistema para que puedas ver todos los cambios que realizas en vivo. Tiene una duración limitada de tres horas y requiere purgar la caché manualmente si se han hecho cambios.

Optimizaciones de velocidad en el panel Speed

Early Hints

Early Hints es una funcionalidad que aprovecha el código de respuesta HTTP 103 para enviar hints (pistas) al navegador antes de que el servidor haya terminado de generar la respuesta. Estos hints le dicen al navegador: "mientras esperas, ve precargando este CSS y este JS".

El resultado es que el navegador empieza a descargar recursos críticos antes de recibir el HTML, lo que puede reducir el LCP significativamente. Activa Early Hints siempre: no tiene riesgo y el beneficio es medible.

Cloudflare Fonts

Si tu web carga fuentes externas, Cloudflare puede servirlas desde su propia red en lugar de hacer que el navegador conecte con los servidores externos. Esto elimina una conexión adicional, mejora la privacidad y reduce la latencia. Actívalo en Speed > Optimización de contenido.

Polish (optimización de imágenes, planes Pro+)

Polish es una funcionalidad de los planes de pago (Pro y superiores) que optimiza automáticamente las imágenes que pasan por Cloudflare. Ofrece dos modos:

• Sin pérdida: compresión sin pérdida de calidad. Reduce peso moderadamente.

• Con pérdida (recomendado): compresión con pérdida imperceptible. Reduce peso significativamente (hasta un 50% en fotografías).

Además, al activar la opción WebP, Cloudflare convertirá automáticamente las imágenes a formato WebP cuando el navegador lo soporte, ahorrando entre un 25–34% de peso adicional.

Si tu plan es el gratuito, esta funcionalidad no está disponible, pero puedes optimizar las imágenes antes de subirlas (como explicamos en nuestra guía de optimización de WordPress).

HTTP/3

HTTP/3 es la última versión del protocolo HTTP, basado en QUIC (UDP en lugar de TCP). Es significativamente más rápido en conexiones móviles y en redes con pérdida de paquetes. Activa HTTP/3 en Network. Todos los navegadores modernos lo soportan y es altamente recomendable.

Verificar el impacto: antes y después

Antes de activar estas optimizaciones, lanza un test en PageSpeed Insights y GTmetrix. Anota las métricas: TTFB, LCP, CLS, peso total de la página y número de peticiones. Después de configurar todo, espera 24 horas (para que la caché se caliente) y lanza los mismos tests.

Lo habitual es ver una mejora de 10–30 puntos en PageSpeed móvil solo con estas configuraciones, sin haber tocado el código de la web. Si quieres ir más allá, en nuestra serie sobre optimización web cubrimos Full Page Cache con LiteSpeed, optimización de base de datos y arquitecturas de alto rendimiento.

Siguiente paso: configurar la seguridad

Ya has configurado Cloudflare para que tu web cargue rápido. Ahora toca asegurarla. En la tercera y última entrega de esta serie, abordaremos la configuración de seguridad: SSL/TLS, protección DDoS, firewall, bot management y las reglas que protegen tu web sin que tú tengas que intervenir.

Este artículo forma parte de un bloque de tres guías sobre configuración avanzada. Puedes completar la serie aquí:

Cómo gestionar tu dominio en CloudFlare (I)

Configurar la seguridad en CloudFlare: SSL, Firewall, Protección DDoS (III)