Usar Webflow con Cloudflare para almacenar en caché y acelerar tu proyecto Webflow

Actualización, octubre de 2026: las cosas han cambiado desde que escribí esto. El enfoque más reciente está en Optimización gratis de imágenes en Webflow con Cloudflare (2026): nuestro Worker O2O open source. El resto de esta publicación sigue en pie como registro de cómo lo hacíamos en su momento.

Publicación original

Hay algunos problemas con Cloudflare y empezaremos enumerándolos aquí, para luego ver cómo solucionarlos y qué otras opciones avanzadas conviene activar. Pero antes, vamos a repasar unas cuantas razones por las que nos encanta Cloudflare.

• Opciones de seguridad muy mejoradas.
• CNAME Flattening, lo que significa que tu proyecto de Webflow puede ser milkmoonstudio.com y no www.milkmoonstudio.com
• Un caché excelente en los centros de datos y la red perimetral de Cloudflare. No exageramos, tienen una red enorme. El 80 % de los sitios con proxy usan Cloudflare, es decir, el 20 % de los sitios web de internet.
• Ajustes avanzados de caché del navegador.
• Always Online, que guarda versiones de tu sitio en la Wayback Machine de The Internet Archive.
• Argo Smart Routing, que detecta los nodos de red que podrían estar caídos y optimiza el enrutamiento del tráfico, con lo que gana más velocidad.
• Una gran optimización de la velocidad mediante minificación, compresión, optimización de imágenes, etcétera.
• Protección contra bots.
• La CDN de Cloudflare con 310 ciudades en más de 120 países, incluida China. Lo repetimos porque merece la pena.
• Zaraz como alternativa a Google Tag Manager. Lo hemos probado y, aunque no es tan fácil de usar si estás acostumbrado a los activadores avanzados de Tag Manager, puede hacer prácticamente todo lo que necesites y, en nuestras pruebas, notamos una mejora clara de velocidad. Piensa en Tag Manager del lado del servidor, pero sin el servidor ni el coste. Hemos añadido una breve publicación sobre cómo usar Zaraz con Google Analytics 4 en Webflow aquí.
• Page Rules.

Podríamos seguir y seguir, hay tantas funciones que no las vamos a enumerar todas (hemos añadido una breve lista de ajustes recomendados de Cloudflare al final de la publicación). 

Entonces, si esto es tan bueno, ¿por qué tan pocos usuarios de Webflow usan Cloudflare? Pues aquí es donde aparecen los problemas. Si miras las instrucciones de configuración DNS de Cloudflare en Webflow, notarás algo desde el primer momento: te piden que desactives el proxy de Cloudflare (la nube naranja). 

Esto significa que Cloudflare solo gestionará tu DNS, igual que GoDaddy o cualquier otro proveedor. No es lo ideal. Cloudflare tiene el DNS más rápido que existe, pero eso es todo: no podrás aprovechar ninguna de las mejoras de rendimiento. 

Por lo que sabemos, el problema de desactivar el proxy tiene que ver con la renovación del certificado SSL de Webflow. Si Cloudflare hace de proxy del contenido, el usuario no se conecta al sitio de origen en Webflow y el mecanismo de renovación de SSL de Webflow deja de funcionar. Así que todo puede ir bien durante un mes y, de repente, todo el mundo empieza a recibir errores de SSL. Para esto tenemos una solución rápida y sencilla, a la que llegaremos enseguida. En cualquier caso, con nuestra solución alternativa llevamos años sin ningún problema.

Segundo problema: la CDN de Webflow. Webflow usa AWS para alojar su contenido, pero como te puedes imaginar, no van a aprovisionar una CDN para cada proyecto creado en Webflow. Por eso, todo el mundo comparte un bucket. Si inspeccionas tu sitio, verás que todo lo importante, desde el CSS hasta las imágenes y los vídeos, está en website-files.com o assets.website-files.com (hay unos cuantos dominios que van rotando) y no en tu dominio; es decir, nuestros recursos no están en milkmoonstudio.com. En el uso diario no es realmente un problema, pero cuando usas Cloudflare, el contenido que Cloudflare debe optimizar tiene que estar en tu dominio. Si tenemos una cuenta de Cloudflare para milkmoonstudio.com, pero cada imagen y cada archivo CSS está en una carpeta de website-files.com, Cloudflare solo puede aplicar optimizaciones y caché a tus archivos HTML y a nada más. Es decir, otra vez, sin optimización.

Veamos cómo resolver estos problemas desde la perspectiva de un diseñador de Webflow y no de un desarrollador full-stack.

Actualización importante

Antes de lanzarte con lo que sigue, este método usa una app de Cloudflare para almacenar en caché todos tus recursos en Cloudflare. La versión actual de Cloudflare Apps se está retirando. Cloudflare ha dicho que una nueva experiencia de apps la sustituirá. Mientras tanto, puedes usar un Cloudflare Worker para conseguir los mismos resultados, y ya tenemos una publicación que detalla ese proceso aquí. Ten en cuenta que es algo más técnico que simplemente añadir una app.  Creamos un Cloudflare Worker para optimizar tus imágenes con Cloudflare Image Resizer. Algunos dirían que es más sencillo y, aunque sigue siendo avanzado, puedes encontrar esa publicación completa aquí. Eso sí, probablemente tengas menos problemas si Rocket Loader te está desordenando el orden de carga de los scripts, por ejemplo. En cualquier caso, sigue esta guía hasta el paso de configuración de la app y después pasa a la publicación del Worker de optimización de imágenes para el resto. Actualizaremos esta publicación cuando la nueva experiencia de Cloudflare Apps esté lista, para que puedas optar por la vía de la app si lo prefieres.

Ajustes DNS de Cloudflare para Webflow

(Un aviso de 2026: Webflow ha trasladado desde entonces su alojamiento a Cloudflare y ahora admite oficialmente la nube naranja mediante Orange-to-Orange, u O2O, con registros CNAME con proxy que apuntan a cdn.webflow.com. Así que hoy, en un sitio, sáltate estos pasos de DNS y sigue en su lugar nuestra guía de Cloudflare de 2026.)

Te van a decir que sigas dos series de instrucciones: los 2 registros A y el registro CNAME que Webflow te da cuando has activado SSL en la pestaña Hosting de los ajustes de tu proyecto (las cosas han cambiado un poco desde que lo escribimos, así que ahora también hay un registro TXT, que puedes usar tal cual en Cloudflare), y la indicación de desactivar el proxy en Cloudflare (apagando el icono de la nube naranja) según las instrucciones de Webflow. Te vamos a pedir que ignores ambas.

Cuando activas SSL, recibes unas instrucciones que se parecen a esto:

Ajustes DNS de Webflow

¡Ignóralas! 

Paso 1: en lugar de usar las instrucciones de SSL, desactiva SSL al final de la pestaña Hosting. Pulsa Save.

Desactivar SSL

• Copia las nuevas direcciones de los registros A y los ajustes del CNAME:

Guarda los ajustes DNS de Webflow sin SSL

Guarda los ajustes sin SSL, luego vuelve a marcar la casilla de SSL y guarda. Verás que los ajustes vuelven a los ajustes iniciales de SSL. No te preocupes, simplemente ignóralos. 

(Podrías dejar los ajustes sin SSL. Cloudflare se encargará del certificado SSL y redirigirá todo correctamente, pero algo se romperá: tu archivo sitemap.xml usará http en lugar de https, lo que Cloudflare seguirá redirigiendo bien, pero Google Search Console se quejará.) 

Así que vuelve a activar SSL para que el sitemap funcione y no tendrás ningún problema.

• Ve a Cloudflare y añade los ajustes DNS sin SSL. Debería verse más o menos así:

Añade los ajustes DNS de Webflow a Cloudflare

• Asegúrate de que las entradas tengan Proxied activado, al contrario de lo que dicen las instrucciones de Webflow para Cloudflare.
• Ve a la pestaña de ajustes SSL/TLS en Cloudflare y activa Full:

Configura SSL en Full en Cloudflare

• Ahora queremos purgar los ajustes DNS para que tu configuración de Webflow se propague de inmediato. Empieza yendo a https://1.1.1.1/purge-cache/, y después, por si acaso, a https://cachecheck.opendns.com/ y https://developers.google.com/speed/public-dns/cache (tenemos una publicación entera sobre cómo vaciar tu caché DNS para Webflow, así que échale un vistazo si esto es nuevo para ti).
• En cada uno de estos sitios, introduce tu dominio sin subdominio, purga el registro A y luego el registro CNAME. Si usas un subdominio www como nosotros, usa también el dominio completo (es decir, www.milkmoonstudio.com) y purga también sus registros. Por último, purga el registro TXT.
• Después de la gran purga, vuelve a la pestaña Hosting de Webflow.

Ignora los errores de DNS de Webflow

¡Ay, NO! Cuántos problemas. A quién le importa, ignóralos y publica el sitio.

• Ve a tu sitio en vivo y comprueba los ajustes de SSL haciendo clic en el candado:

Comprueba el certificado SSL

Listo, todo bien.

Así que ya tenemos Webflow funcionando a través de Cloudflare, con proxy, pero, ay, nos olvidamos de que el contenido tiene que estar en tu dominio para que Cloudflare aplique las mejoras de rendimiento. Ahora mismo todo llega desde website-files.com.

Si quieres más ayuda para configurar mejoras de rendimiento, page rules, etcétera, mira el vídeo tutorial que está al principio de esta publicación para ver en detalle lo que puedes aplicar, o ve directamente a YouTube.

Segundo problema: haz que los recursos de la CDN de Webflow (imágenes, etc.) pasen por tu nombre de dominio en Cloudflare para poder usar todas las mejoras de rendimiento de Cloudflare

Hay dos formas de abordarlo. Si sabes lo que haces, puedes escribir un Cloudflare Worker que vigile la CDN de Webflow, tome el contenido, lo almacene en Cloudflare y luego lo pula y lo optimice. Milk Moon Studio es un pequeño estudio de Webflow y, como muchos en la comunidad de Webflow, nos gusta centrarnos en el diseño y elegimos Webflow por su naturaleza sin código, o al menos con poco código. Así que iremos por la opción dos: que lo haga otra persona. Por suerte, alguien lo ha hecho y además creó una app de Cloudflare que puedes instalar en Cloudflare y usar gratis. Se llama Cassette, de Network Chimp. Ten en cuenta que la experiencia actual de apps se está retirando y será sustituida por una nueva experiencia de apps. Mientras tanto, también puedes usar nuestro script de Cloudflare Worker para conseguir resultados similares.

• Ve a la pestaña Apps de Cloudflare y busca Cassette. Es gratis mientras uses un solo bucket, que es lo que haremos, así que no hay problema. Es esta:

Añade la app Cassette

• Aplica los siguientes ajustes en la app:

Configura Cassette en Cloudflare

1. Crea un subdominio en tu dominio donde Cassette deba poner los archivos de Website-Files.com (o de lo que Webflow esté usando para tus archivos; simplemente inspecciona la página o abre una imagen en una pestaña nueva para comprobar la URL). Escríbelo aquí y Cassette te pedirá permiso para crearlo cuando apliques los ajustes. Asegúrate de que el subdominio no exista ya. Cassette necesita gestionar esta parte.
2. Dile a Cassette dónde almacena Webflow los archivos.

Eso es todo. Cada vez que se carga una página de tu sitio, Cassette revisará website-files.com y, si encuentra archivos nuevos, los guardará en el subdominio. La pega es que puede tardar un poco, pero como ahora los archivos que se cargan en el navegador están en tu dominio, puedes aplicar a esos archivos cualquier ajuste y regla de Cloudflare que crees. (Volviendo a la pega del tiempo: si pasado un día más o menos ves que Cassette no está almacenando en caché ni optimizando algunos archivos, lo cual puedes comprobar con el plugin de Chrome Dr.Flare , normalmente se debe a que Webflow publica un conjunto src de imágenes con tamaños optimizados para distintos anchos de pantalla. A veces Cassette se pierde una o dos imágenes del conjunto src. Puedes desactivarlo en Webflow o usar algo como los embeds de Cloudflare Image Resizing para evitarlo. Más sobre eso más abajo. Como alternativa, el método del script de Worker lo resuelve, ya que el Worker que creamos busca tanto imágenes sueltas como conjuntos src de imágenes.)

No vamos a entrar en todas las mejoras de rendimiento y page rules que puedes crear en Cloudflare. Desmelénate. Lo que sí diremos es que, si decides crear reglas que almacenen tu sitio en caché de forma intensiva, crees una page rule para tu archivo sitemap.xml que se salte la caché por completo. Así, si por ejemplo creas una nueva entrada de blog, la última versión del sitemap siempre estará disponible para Google y no un archivo de sitemap desactualizado de hace 3 semanas si tienes ajustes de caché muy agresivos. Querrás la page rule del sitemap por encima de las demás page rules con caché intensiva, ya que las reglas se aplican en cascada hacia abajo. Lo mismo vale si has activado un feed RSS: sáltate la caché en la URL del feed. El caché completo solo se producirá cuando configures Page Rules en Cloudflare, apliques las optimizaciones en las reglas y selecciones Cache Everything. (Cloudflare ha retirado desde entonces las Page Rules en favor de las Cache Rules, así que hoy las crearías como Cache Rules. Ojo: una Cache Rule configurada como Eligible for cache activa Cache Everything por defecto.)

Como dijimos, la app Cassette tardará un tiempo en almacenar todo en caché en tu nuevo subdominio y puede que se le escape algún archivo. Supongamos que podrías acelerar las cosas y recargar todas las páginas unas cuantas veces si quieres (hemos actualizado esta publicación al final de la página para ayudarte a asegurarte de que esas imágenes que se han escapado queden en caché en Cloudflare). Nosotros simplemente vamos a esperar unos días y ejecutar una prueba de Lighthouse para ver la velocidad del sitio.

Vale, 2 segundos después... hemos construido una máquina del tiempo, hemos esperado 3 días, hemos ejecutado una prueba de Lighthouse, hemos vuelto al pasado y hemos subido los resultados de la prueba:

Puntuaciones de Google PageSpeed tras configurar Cassette

Tiene muy buena pinta. ¿Por qué 98 por ciento? Pues nos parece bastante bueno, pero es que vimos que Lighthouse marca un error de imagen con tamaño incorrecto que somos demasiado vagos para arreglar solo por presumir de resultados. Google Search Console te va a adorar.

Si tienes alguna pregunta, déjala en los comentarios. Para más tutoriales, echa un vistazo a estas publicaciones, y si usas Tag Manager y quieres intentar acelerar un poco más las cosas, puedes ver nuestra publicación sobre los activadores retrasados de Tag Manager. Y si necesitas convencer a un cliente (o a tu jefe) de que todo esto merece el esfuerzo, hemos escrito sobre cómo la velocidad de página impulsa el éxito de un negocio.

Actualización: cómo solucionar que Cassette no pueda crear el subdominio necesario

Si te encuentras con el error mencionado antes, en el que Cassette dice que no puede crear el subdominio que indicaste en Cassette, sigue estos pasos o mira el vídeo tutorial.

Este problema ya no aparece, así que solo lo dejamos aquí como referencia.

1. Cuando aparezca el error, ignóralo y crea el subdominio manualmente.
2. Cassette sigue añadiendo el worker. No verás el worker y puede que ni siquiera veas la app Cassette instalada.
3. Ve a DNS y añade el CNAME del subdominio que tenías en los ajustes de Cassette.
4. En nuestro caso el CNAME es assets.
5. El valor del CNAME es el nombre de dominio de la CDN de Webflow de más arriba, donde Webflow aloja tu contenido.
6. En nuestro caso el valor es assets-global.website-files.com
7. Asegúrate de usar solo el nombre de dominio sin subdominio.
8. El problema de Cassette debería estar resuelto, aunque no puedas ver la app. Mira el vídeo para tener una guía visual.

Actualización: cómo forzar a Cloudflare a almacenar en caché las imágenes que se hayan escapado

Una última actualización. Mientras usábamos Dr.Flare y revisábamos algunos sitios en detalle, notamos que a veces las imágenes no se almacenan en caché en Cloudflare y siguen yendo a la CDN externa de Webflow. Tras inspeccionar el código, nos dimos cuenta de que se debe a que Webflow genera imágenes responsivas para su conjunto src. En ese caso, las imágenes de algunos puntos de ruptura quedaban en caché y otras iban a la CDN de Webflow. Si ves que ocurre esto y quieres evitarlo, puedes desactivar la generación de imágenes responsivas en la imagen culpable.

Solo tienes que:

1. Seleccionar la imagen en el lienzo de Webflow
2. Pulsar Command + Shift + O (en Mac) o Control + Shift + O (en Windows)
3. Abrir Settings panel > Image settings
4. Desmarcar la casilla Responsive image (Webflow lo ha cambiado desde entonces: ahora marcas la casilla Disable responsiveness en Image settings)

Desactiva las imágenes responsivas en Webflow

La pega es que Webflow ya no genera imágenes responsivas, así que podrías usar Cloudflare Image Resizing para hacerlo al vuelo, o crear una versión de escritorio y otra móvil de los recursos de una página si Cloudflare y Cassette no están almacenando las imágenes en caché y quieres una imagen realmente pequeña en móvil y opinas que la versión no responsiva es demasiado grande o puntúa mal en Google PageSpeed. No te preocupes por Cloudflare Image Resizing si estás contento con lo que te ofrecen Cassette, las Page Rules y optimizaciones como Polish.

Cómo usar Cloudflare Image Resizing

Para que esto funcione tienes que activar Image Resizing en la pestaña Speed de Cloudflare (Cloudflare lo ha renombrado desde entonces como Image Transformations, y ahora está en Images en el panel). Ten en cuenta que podrían aplicarse costes adicionales. Según lo que hagas, puedes activar o desactivar el redimensionamiento desde el origen (Resize from Origin). Si está activado, podrás redimensionar las imágenes y aplicar cosas como la conversión a WebP y AVIF directamente desde la URL de subidas de la CDN de Webflow, sin tener que pasarlas antes por Cloudflare mediante Cassette.

Para el redimensionamiento de imágenes puedes escribir un Worker (más difícil) o simplemente usar una imagen incrustada en Webflow con el elemento HTML Embed. Seguirás viendo las imágenes en el Designer dentro del elemento incrustado, y permite un montón de opciones de formato y optimización en cada imagen. La estructura de URL que tienes que usar es algo así:

<!-- fs-richtext-ignore -->https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

Más información sobre esto y las opciones en la documentación del formato de URL de Cloudflare y en su guía de imágenes responsivas para el formato de imágenes responsivas.

Un embed de imagen responsiva muy básico para nuestra imagen principal podría verse más o menos así, si tenemos activado el redimensionamiento desde el origen y usamos nuestra URL de subida de Webflow desde el Asset Manager:

<iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizing Example - Webflow Asset Manager URL" src="https://codepen.io/milkmoonstudio/embed/XWBopPm?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/XWBopPm">
Cloudflare Image Resizing Example - Webflow Asset Manager URL</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

O así, si uso nuestra URL de la CDN de Webflow:

<iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizing Example - Webflow CDN " src="https://codepen.io/milkmoonstudio/embed/OJwrpMd?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/OJwrpMd">
Cloudflare Image Resizing Example - Webflow CDN </a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

O así, si usamos la CDN a través del subdominio que creó Cassette:

<iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizing Example - Cassette CDN on Assets" src="https://codepen.io/milkmoonstudio/embed/eYjbvvB?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/eYjbvvB">
Cloudflare Image Resizing Example - Cassette CDN on Assets</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Lo eficaz que sea el último para crear archivos AVIF dependerá de tus page rules, de tus ajustes de caché y del orden de las reglas. Así que, si tienes Cache Everything y Polish activados para ese subdominio, puede que ya se haya creado una imagen WebP y probablemente no use AVIF, pero puedes experimentar.

Perdona por el formato tan malo de lo anterior y por simplificar tanto las cosas. Lo más importante para el redimensionamiento es que la estructura de la URL en el embed empiece por el dominio que tienes en Cloudflare, seguido de /cdn-cgi/image/, luego tus opciones de formato y optimización, después una /, y luego la URL de la imagen. Simplemente juega con ello y recuerda que no hace falta si estás contento con lo que hacen Cassette y la opción Polish, etcétera.

Hemos añadido a continuación algunos ajustes y reglas recomendados de Cloudflare. Ten en cuenta que esto depende mucho de tu sitio y que debe probarse.

Para más publicaciones sobre Cloudflare, echa un vistazo a:

• Optimización gratis de imágenes en Webflow con Cloudflare (2026): nuestro Worker O2O open source (la forma actual de hacer todo esto)
• Potencia tu proyecto de Webflow con Cloudflare: nuestro script de Worker para optimizar imágenes
• Mejora el rendimiento de tu sitio web con Zaraz Tag Manager de Cloudflare: guía paso a paso para implementar Zaraz y añadir Google Analytics 4 en Webflow

Recomendaciones de Cloudflare

(Una nota de 2026: Cloudflare ha retirado algunos de estos ajustes desde que escribimos esta lista. Auto Minify se retiró en agosto de 2024, Mirage en septiembre de 2025, y las Page Rules se han retirado en favor de las Cache Rules. El resto está tal como lo escribimos.)

Speed > Optimisation

Polish: On

Mejora el tiempo de carga de las imágenes al optimizar las imágenes alojadas en el dominio, y con WebP marcado puede convertir formatos de imagen como PNG y JPG a WebP si con ello se reduce el tamaño de la imagen y Cloudflare detecta que el navegador del cliente admite WebP.

Ajuste recomendado: Lossy con WebP marcado, salvo que baje la calidad, en cuyo caso debe ser Lossless con WebP marcado. Marca siempre WebP y, si tienes planes superiores con AVIF, puede aplicarse para conseguir un mayor ahorro.

Auto Minify: On

Reduce el tamaño de archivo del código fuente de tu sitio web.

Ajuste recomendado: Siempre con JavaScript, CSS y HTML marcados.

Brotli: On

Cloudflare aplica la compresión Brotli para acelerar los tiempos de carga de página de tus visitantes. Cloudflare seleccionará Brotli como método de codificación de contenido preferido si el cliente admite varios métodos de compresión. Si el cliente no indica que admite la compresión Brotli, se aplicará la compresión gzip.

Ajuste recomendado: Siempre activado.

(Una nota de 2026: ya no existe un interruptor para activar o desactivar Brotli. Cloudflare elige ahora la compresión según el plan, con Zstandard en Free, Brotli en Pro y Business y Gzip en Enterprise, y se cambia con Compression Rules.)

Early Hints: On

El borde de Cloudflare almacenará en caché y enviará respuestas 103 Early Hints con encabezados Link de tus páginas HTML. Early Hints permite a los navegadores precargar los recursos enlazados antes de ver una respuesta 200 OK u otra respuesta final del origen.

Ajuste recomendado: Siempre activado.

Enhanced HTTP/2 Prioritization: On

Optimiza el orden de entrega de los recursos. Con HTTP/2, por defecto, Cloudflare seguirá el orden solicitado por el navegador. Ese orden varía de un navegador a otro, lo que provoca una diferencia significativa de rendimiento. Con Enhanced HTTP/2 Prioritization activado, los recursos se entregarán en el orden óptimo para conseguir la experiencia más rápida en todos los navegadores.

Ajuste recomendado: Siempre activado.

TCP Turbo: On

Reduce la latencia y aumenta el rendimiento con optimizaciones de TCP ajustadas a medida.

Ajuste recomendado: Debería estar activado por defecto, aunque puede estar desactivado en cuentas antiguas.

Mirage: On

Mirage adapta la carga de imágenes según la conexión de red y el tipo de dispositivo. Los dispositivos con pantallas pequeñas reciben imágenes más pequeñas y las conexiones más lentas reciben imágenes de menor resolución. Sustituye las imágenes por marcadores de posición de baja resolución con las mismas dimensiones que el original (incluidas las imágenes de terceros). Una vez que la página se ha renderizado por completo, las imágenes en resolución completa se cargan de forma diferida (priorizando las imágenes dentro del área visible del navegador). Este proceso permite que las páginas se rendericen rápido y minimiza el reflujo del navegador. Combina varias solicitudes de red individuales de imágenes en una sola. Las imágenes deben admitir la carga progresiva, pero este ajuste es ideal en mercados con dispositivos de gama baja y conexiones móviles lentas.

Ajuste recomendado: Siempre activado.

Rocket Loader: On

Aparte de la optimización de imágenes, Rocket Loader puede ofrecer las mayores mejoras de velocidad, pero hay que probar el sitio con Rocket Loader activado. Rocket Loader mejora los tiempos de pintado de las páginas que incluyen JavaScript. Los visitantes tendrán una mejor experiencia al ver que el contenido carga más rápido, y la velocidad también es un factor en algunos rankings de búsqueda. Rocket Loader mejora los tiempos de pintado cargando tu JavaScript de forma asíncrona, incluidos los scripts de terceros, para que no bloqueen el renderizado del contenido de tus páginas. Pueden surgir problemas si algunos scripts se necesitan antes, por lo que hay que probar el sitio. Si hay problemas con Rocket Loader, se pueden usar page rules o añadir data-cfasync="false" a un script para excluirlo de Rocket Loader: <!-- fs-richtext-ignore --><script data-cfasync="false" src="/javascript.js"></script>

Ajuste recomendado: Siempre activado, a menos que cause problemas en el sitio. Intenta excluir los scripts problemáticos con: data-cfasync="false" o con Page Rules.

Automatic Signed Exchanges (SXGs): On

Mejora el rendimiento de tu sitio web haciendo que los recursos almacenables en caché estén disponibles en los Signed Exchanges de Google.

Ajuste recomendado: Siempre activado.

Prefetch URLs: On

Activado si tienes Enterprise.

Caching > Configuration

Caching Level: Ignore Query String

Determina qué parte del contenido estático de tu sitio web quieres que Cloudflare almacene en caché. Ignore query string entrega los mismos recursos independientemente de la cadena de consulta. Es la mejor opción para evitar que el sitio cree recursos en caché distintos para todas las cadenas de consulta que pudieran añadirse.

Ajuste recomendado: Ignore Query String.

Es importante señalar que Cloudflare no almacena en caché el contenido HTML automáticamente. Solo se puede hacer creando Page Rules (hoy, Cache Rules). Las Page Rules ofrecen una personalización y unas opciones increíbles, pero no podemos hacer una recomendación aquí, ya que Browser Cache TTL y Edge Cache TTL tendrían que ser determinados por quienes gestionan el sitio. Una página estática como «Quiénes somos» puede, por ejemplo, tener tiempos de caché muy largos tanto en el navegador como en el borde, pero un feed de blog sería más corto, según la frecuencia de las nuevas publicaciones, y tendría que estar por encima de otras reglas comodín, ya que el conjunto de reglas se aplica en cascada hacia abajo.

Browser Cache TTL: No más de un día.

Determina el tiempo durante el cual Cloudflare indica al navegador de un visitante que almacene archivos en caché. Tiempos cortos como un día están bien por defecto, con reglas de caché más estrictas definidas en Page Rules que lo anularán. Las Page Rules deberían definirse según la frecuencia de actualización, como se mencionó antes, y agruparse en conjuntos; los comodines lo hacen fácil. Ojo con el Browser TTL. Edge Cache TTL se puede vaciar purgando la caché en Cloudflare, pero Browser Cache TTL significa que el contenido de la página permanecerá en el navegador del usuario durante ese periodo y no se puede vaciar una vez almacenado en caché.

Ajuste recomendado: Un día, para estar seguros, y luego personalizarlo en Page Rules.

Crawler Hints: On

Cloudflare avisará a los motores de búsqueda cuando haya cambios en el sitio.

Always Online: On

Si el servidor de origen se cae, Cloudflare mantendrá el sitio activo con copias de la Wayback Machine. Cloudflare determina la frecuencia de actualización en la Wayback Machine.

Caching > Tiered Cache

Argo: On

Argo es un servicio que usa rutas optimizadas a través de la red de Cloudflare para entregar las respuestas a tus usuarios de forma más rápida, fiable y segura. Se aplican costes de uso.

Ajuste recomendado: Activado.

Caching > Tiered Cache

Cache Reserve: es complicado

Aumenta la duración de la caché almacenando automáticamente todos los archivos almacenables en caché en los buckets de almacenamiento de objetos persistente de Cloudflare.

Cuando hay un fallo de caché, Cloudflare revisará primero estos buckets de almacenamiento antes de ir a tu origen. Aquí también se aplican costes de uso, y funciona junto con Argo, por lo que solo debería activarse si Argo está habilitado.

(Una nota de 2026: la documentación de Cloudflare dice ahora que Cache Reserve está diseñado para usarse con Tiered Cache, no con Argo, así que ignora lo de Argo de arriba. Además, hoy tiene su propia página en Caching.)

Ajuste recomendado: activado si tienes Enterprise, puede ser difícil de vaciar por completo en planes inferiores. Enterprise puede vaciar la caché por completo.

Network

HTTP/2: On

Acelera tu sitio web con HTTP/2.

Ajuste recomendado: Activado.

HTTP/3 (with QUIC): On

Acelera las solicitudes HTTP usando QUIC, que ofrece cifrado y mejoras de rendimiento en comparación con TCP y TLS.

Ajuste recomendado: Activado.

0-RTT Connection Resumption: On

Mejora el rendimiento para los clientes que ya se han conectado antes a tu sitio web. 0-RTT Connection Resumption permite que la primera solicitud del cliente se envíe antes de que la conexión TLS o QUIC se haya establecido por completo.

Ajuste recomendado: Activado.

gRPC: On

Permite conexiones gRPC a tu servidor de origen.

Ajuste recomendado: Activado. Si no lo necesitas, tampoco afectará a nada.

WebSockets: On

Permite conexiones WebSockets a tu servidor de origen. Los WebSockets son conexiones abiertas y sostenidas entre el cliente y el servidor de origen. Dentro de una conexión WebSockets, el cliente y el origen pueden intercambiar datos sin tener que restablecer sesiones.

Ajuste recomendado: Activado.

Onion Routing

Onion Routing permite enrutar el tráfico de usuarios legítimos de la red Tor a través de los servicios onion de Cloudflare en lugar de los nodos de salida.

Ajuste recomendado: Activado, mejora la velocidad para los usuarios de Tor.

Ejemplo de orden de Page Rules

Las page rules deberían incluir lo siguiente: Edge Cache TTL y Browser Cache TTL determinan cuánto tiempo se almacena el contenido en el borde de Cloudflare y en el navegador del usuario. Esos dos deberían determinarse según la frecuencia con la que se actualiza el contenido de una página. Supongamos que la mayor parte del sitio nunca cambia, pero el blog se actualiza a menudo. Entonces, la página del feed del blog debería tener un Edge y Browser TTL más cortos y el resto puede tener una regla comodín general con cachés de Edge y Browser TTL más largos. Las page rules se aplican en cascada hacia abajo. Así que, si la regla genérica para el sitio, donde el contenido no cambia a menudo, tiene un comodín como www.milkmoonstudio.com/, y tiempos de caché largos, debería estar por debajo de las reglas con tiempos de caché más cortos, en mi caso www.milkmoonstudio.com/blog/. El blog es entonces la primera regla y el resto del sitio la siguiente regla del conjunto. El comodín de la segunda regla también almacena en caché el blog, pero como hay otra regla que afecta a las páginas del blog y está por encima de la page rule de www.milkmoonstudio.com/ , la anula.

Ejemplo de Page Rule

• Polish: Lossy
• Auto Minify: HTML, CSS y JS
• Rocket Loader: On
• Mirage: On
• Cache Level: Cache Everything (para almacenar también el contenido HTML en caché).
• Automatic HTTPS Rewrites: On
• Opportunistic Encryption: On
• Browser Cache TTL: 1 día (supongamos que es para un feed de blog donde a menudo hay contenido nuevo; sería más largo para páginas estáticas)
• Edge Cache TTL: 1 día (supongamos que es para un feed de blog donde a menudo hay contenido nuevo; sería más largo para páginas estáticas)