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

Important Update

The old approached below has been deprecated. The proxy, cache and optimise your images and other resources like your css and js please head directly to this post: Optimize Webflow with Cloudflare: Images, Assets & Caching in 2026.

Original Post

There are a few issues with Cloudflare and we'll start by listing them here, and then get into how to fix them and some more advanced options you should probably enable. But first, let's kick things off by listing a number of reasons we love Cloudflare.

• Greatly enhanced security options.
• CNAME Flattening, meaning your Webflow project can be milkmoonstudio.com and not www.milkmoonstudio.com
• Great caching on Cloudflare's data centres and edge network, we’re not kidding, they have a huge network. 80% of proxied sites use Cloudflare, that’s 20% of websites on the internet.
• Advanced Browser Caching settings.
• Always online and it saves versions of your site to The Internet Archive's Wayback Machine.
• Argo Smart Routing, which looks for networks nodes that might be down and optimises network traffic routing adding more speed.
• Great speed optimisation through minification, compression, image optimisation etc etc.
• Bot protection.
• The Cloudflare CDN with 310 cities in more than 120 countries including China. Just reiterating this one.
• Zaraz as an alternative to Google Tag Manager, we've tried it and while it's not as easy to use when you're used to Tag Manager for advanced triggers, it can pretty much do whatever you need, and yeah, in our tests there was a definite speed boost. Think Tag Manager Server-Side without needing the server or the cost. We've added a short post on how to use Zaraz here.
• Page Rules.

We could go on and on, there are just so many features that we're not going to list them all (we've added a brief list of recommended Cloudflare settings at the very end of the post). 

So, if this is so great, why do so few Webflow users use Cloudflare, well this is where the issues come in. If you look at the DNS setup instructions for Cloudflare on Webflow, you'll notice one thing right off the bat, they want you to disable the Cloudflare Proxy (orange cloud). 

This means that Cloudflare will just manage your DNS, just like Godaddy or whomever. Not great, Cloudflare has the fastest DNS out there, but that's it, you won't be able to take advantage of any of the performance enhancements. 

As far as we can tell the 'disable the proxy issue' has to do with Webflow's SSL certificate renewal. If Cloudflare is proxying the content the user isn't connecting to your origin site on Webflow and Webflow's SSL renewal mechanism stops working. So things might be fine for a month and then everyone and their mother will start getting SSL errors. For this we have a quick and easy fix which we'll get to. Anyhow, with our workaround we've had zero issues for years now.

Issue two, the Webflow CDN. Webflow uses AWS to host their content, but as you can imagine, they're not going to provision a CDN for each project created on Webflow. So, everyone shares a bucket. If you inspect your site, you'll notice that everything that matters, from your CSS to your images and videos sits on website-files.com, or assets.wesite-files.com (there are a few domains that float around) and not your domain, i.e. our assets don't sit on milkmoonstudio.com. Not really a problem for everyday use, but when you're using Cloudflare the content that Cloudflare needs to optimise needs to sit on your domain. If we have a Cloudflare account for milkmoonstudio.com, but every image and CSS file sits in a folder on website-files.com Cloudflare can only apply optimisations and caching to your HTML files and nothing else. So, again no optimisation.

Let's talk about how to solve these issues from the perspective of a Webflow designer and not a full-stack developer.

Important Update

Before you jump into the below, this method will use a Cloudflare App to cache all your assets on Cloudflare. The current version of Cloudflare apps is currently being deprecated. Cloudflare has said that a new App Experience will replace it. In the meantime you can use a Cloudflare Worker to achieve the same results and we already have a post detailing that process here. Please take note that’s it’s a bit more technical than just adding an app.  We created a Cloudflare Worker to optimise your images using the Cloudflare Image Resizer. Some might say that’s simpler, and while still advanced you can find that full post here. We will say you might have less issues if you’re struggling with Rocket Loader messing with the order scripts are loaded etc. Anyhow, follow this guide to the App Setup step for now, and then switch to the Image Optimisation Worker post for the rest. We’ll update this post once the new Cloudflare Apps experience is ready so you can go the app route if you want.

Webflow Cloudflare DNS Settings

You're going to be told to follow two sets of instructions here, the 2 A records and the CNAME record Webflow gives you when you've enabled SSL in your Webflow Hosting Tab in your project settings (things have changed a bit since we wrote this, so now there's a TXT record as well, which you can use as is in Cloudflare), and the instruction to switch of proxying on Cloudflare (disabling the orange cloud icon) as per Webflow's instructions. We're going to ask you to ignore both of those.

When you turn on SSL you'll get instructions that look something like this:

Webflow DNS settings

Ignore these! 

Step 1, instead of using the SSL instructions, switch off SSL at the bottom of the hosting tab. Hit Save.

Disable SSL

• Copy the new A record addresses and the CNAME Settings:

Save the non-ssl Webflow DNS settings

Save the non-SSL Settings, then turn on the SSL tick box again and save, you'll see the settings revert to the initial SSL settings again, don't worry, just ignore those. 

(You could leave on the non-SSL settings, Cloudflare will handle the SSL certificate and redirect everything properly, but one thing will break, your sitemap.xml file will use http instead of https, which Cloudflare will still redirect correctly, but Google Search Console will complain). 

So, turn on SSL again so the sitemap works, you won’t run into any issues.

• Head to Cloudflare and add the non-SSL DNS settings. It should look something like this:

Add Webflow DNS settings to Cloudflare

• Make sure the entries have Proxied turned on, contrary to the Webflow Cloudflare Instructions.
• Head to the SSL/TLS settings tab in Cloudflare, turn on Full:

Set SSL to Full in Cloudflare

• Now, we want to purge the DNS settings so your Webflow settings propagate immediately. Start by going to https://1.1.1.1/purge-cache/, then and just in case:https://cachecheck.opendns.com/ & https://developers.google.com/speed/public-dns/cache
• On each one for these sites, enter your naked domain, purge the A record, and then the CNAME record. If you're using a www sub-domain like use, use the full domain as well, so www.milkmoonstudio.com and purge the records for that as well. Finally, purge the TXT record.
• After the great purge, head to Webflow's hosting Tab again.

Ignore the Webflow DNS erros

Oh NO!- So many issues, who cares, ignore and publish the site.

• Head to your live site and check out the SSL settings by clicking the padlock:

Check the SSL certificate

Boom, all good.

So, we've got Webflow running through Cloudflare, proxied, but oh no, we forgot about the fact that content needs to sit on your domain for Cloudflare to apply performance enhancements. At the moment everything is coming through website-files.com

If you'd like more help setting up performance enhancements, page rules etc. Please watch the How-To Video at the top of this post for a detailed look at what you can apply, or head straight to YouTube.

Issue two, get the Webflow CDN assets (images etc) to run through your domain name in Cloudflare so you can use all the nifty Cloudflare Performance Enhancements

So, two ways to approach this, if you know what you're doing you can write a Cloudflare Worker that watches Webflow's CDN, grabs the content, stores it on Cloudflare and then polishes it and whatnot. Milk Moon Studio is a small Webflow Studio and like many in the Webflow community we like to focus on design and picked Webflow because of its no-code, or at least low-code nature, so we'll go with option two, get someone to do that for you. Luckily for us someone has, and then they built a Cloudflare app, that you can just install on Cloudflare, and use for free. It's called Cassette by Network Chimp. Please note that the current app experience is in the process of being deprecated and will be replaced with a new app experience. In the meantime you can also use our Cloudflare Worker Script to achieve similar results.‍

• Head to the Apps Tab in Cloudflare and search for Cassette, this is a free one, as long as you're using one bucket, which is what we'll be doing so it's just fine. It's this guy:

Add the Cassette App

• Apply the following settings in the app:

Set Up Cassette in Cloudflare

1. Create a sub-domain on your domain where Cassette should put the files from Website-Files.com (or whatever Webflow is using for your files, just inspect the page or open an image in a new tab to check the URL), just type it in here, Cassette will ask for permission to create this when you apply the settings. Make sure the sub-domain does not already exist, Cassette needs to manage this bit.
2. Tell Cassette where Webflow Stores the files.

That's it, every time a page on your site is loaded Cassette will check website-files.com and keep those files, if it finds new ones on the subdomain. The caveat here is that it can take a little time, but now that the files it loads in the browser are on your domain you can apply any Cloudflare settings and rules you create to the files. (Getting back the time caveat, if after a day or so you see Cassette is not caching and optimising some files which you can check using the Dr.Flare Chrome plugin, it's usually because Webflow publishes a src image set with optimised images sizes for different viewport widths. Sometimes Cassette misses an image or two in the src set, you can turn this off in Webflow, or use something like Cloudflare Image Resizing embeds to get around this. More on that down below, alternatively the Worker script method solves this as the worker we created looks for single images and src image sets).

We're not going to go into all the performance enhancements and page rules you can create in Cloudflare, go wild. One thing we will say is that if you decide to create rules that cache your site heavily, create a page rule for your sitemap.xml file that bypasses the cache entirely so that if you for example create a new blog post the latest version of the sitemap will always be there for Google and not some outdated sitemap file from 3 weeks ago if you have some heavy caching settings. You'll want the sitemap page rule above the other page rules with heavy caching as the rules cascade down. Same thing applies if you've enabled an RSS feed, bypass the cache on the feed url. Full caching will only happen when you set up Page Rules in Cloudflare, apply the optimisations in the rules and select Cache Everything.

As we said, the Cassette App will take a while to cache everything on your new sub-domain and might miss a file here and there, we guess you could speed things up and reload all pages a bunch of times if you want (We've updated this post at the bottom of the page to help you ensure those missed images are cached on Cloudflare. We're just gonna wait a few days and run a Lighthouse test to check out the site speed.

Okay, 2 seconds later... we've built a time-machine and waited 3 days and we've run a Lighthouse test, and come back in time, and then uploaded the test results:

Google Pagespeed Scores after Cassette setup

Looking real good, why 98 precent, well we think it's pretty good, but yeah, we looked and there's an improperly sized image error in Lighthouse which we're to lazy to fix just to show off the results. Google Search Console is gonna love you.

If you have any question, please pop them in the comments. For more how-to's, check out these posts, and if you're using Tag Manager and wanna try and speed up things a bit more you could have a look at this post.

Update - Fixing Cassette not being able to create the required sub-domain

If you run into the above-mentioned error where Cassette says it can't create the sub-domain, you set in Cassette just follow these steps or watch the how-to video.

‍This issue is no longer appearing though so we're only leaving it here for reference purposes.

1. When you get the error, jut ignore it and create the sub-domain manually.
2. Cassette is still adding the worker. You won't see the worker and you might not even see the Cassette app installed.
3. Head to DNS, add the CNAME for the sub-domain you had in the Cassette settings.
4. In our case the CNAME is assets.
5. The value for the CNAME is the Webflow CDN domain name from above where Webflow is hosting your content.
6. In our case the value is assets-global.website-files.com
7. Make sure you just use the naked domain name.
8. The Cassette issue should now be resolved even though you can't see the app. Please check out the video for a visual guide.

Update - Forcing Cloudflare to cache any missed images

One final update. While using Dr.Flare and going through some of the sites in detail we have noticed that sometimes images are not cached on Cloudflare and still go to the external Webflow CDN. After inspecting the code, we realised this is due to Webflow generating responsive images for their src set. In this case, images for some breakpoints were cached on some went to the Webflow CDN. If you see this happening and want to bypass it, you can just disable responsive image generation on the culprit.

All you need to do is:

1. Select the image on the Webflow canvas
2. Type Command + Shift + O (on Mac) or Control + Shift + O (on Windows)
3. Open Settings panel > Image settings
4. Uncheck the Responsive image checkbox

Turn off responsive images in Webflow

The caveat here is that Webflow is no longer generation responsive images, so you could use Cloudflare’s Image Resizing to do that on the fly, or create a Desktop and Mobile version of the assets on a page if Cloudflare and Cassette aren’t caching the images and you want a really small one on mobile and feel the non-responsive version is too big or tests poorly on Google PageSpeed. Don't worry about Cloudflare Image Resizing if you're happy with what Cassette, Page Rules and optimisations like Polish offers you.

Using Cloudflare Image Resizing

For this to work you have to enable Image Resizing under the speed tab in Cloudflare, please note additional costs could apply. Depending on what you're doing you can turn image resizing from Origin on or off. If it's on you'll be able to resize the images and apply things like WebP and Avif conversion directly from the Webflow CDN, uploads url without having to run it through Cloudflare first by using Cassette.

For image resizing you can write a worker (harder) or just use an embedded image in Webflow with the HTML Embed Element. You'll still see the images in the designer in the embedded element and it allows for a bunch of formatting and optimisation options on each image. The URL structure you have to use looks something like this

‍

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

More on that and the options here and here for responsive image formatting.

A very rough responsive image embed for our hero image might look something like this if we have resize from Origin on and use our Webflow Upload URL from the 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>

Or like this if I use our Webflow CDN url:

<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>

Or like this if we use the CDN via the sub domain Cassette created:

‍<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>

How effective the last one will be at creating Avif files will depend on your page rules as caching settings and your rule order. So, if you have cached everything and polish on that subdomain a WebP image might have already have been created and this it probably won't use Avif, but you can experiment.

Sorry about the terrible formatting above and simplifying things a lot. The most important part for the resize is that the URL structure in the embed starts with the domain you have in Cloudflare, followed by /cdn-cgi/image/ your formatting and optimisation options / and then the url of the image. Just play around and remember that this is not needed if you're happy with what Cassette and the Polish option etc. does for you.

We've added some recommended Cloudflare settings and rules below. Please take into account this very much depends on your site and should be tested.

For more post on Cloudflare check out:

• Supercharge Your Webflow Project with Cloudflare: A Deep Dive into Our Image Optimization Script
• Boost Your Website's Performance with Cloudflare's Zaraz Tag Manager: A Step-by-Step Guide to Implementing Zaraz and Adding Google Analytics 4 on Webflow

Cloudflare Recommendations

Speed > Optimisation

Polish: On

Improve image load time by optimising images hosted on the domain and having WebP checked can convert image formats like PNG and JPG to WebP if there is a saving in terms of image size and Cloudflare detects support for WebP on the client browser.

Recommended setting: Lossy with WebP checked unless there is a drop in quality in which case it should be Lossless with WebP checked. Always tick on WebP and if on higher plans with AVIF that can be applied for greater savings.

Auto Minify: On

Reduce the file size of source code on your website.

Recommended setting: Always JavaScript, CSS and HTML ticked on.

Brotli: En

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

Configuración recomendada: Siempre encendida.

Primeros consejos: Activado

El edge de Cloudflare almacenará en caché y enviará 103 respuestas a las primeras sugerencias con encabezados de enlace desde tus páginas HTML. Los Early Hints permiten a los navegadores precargar los recursos enlazados antes de recibir una respuesta final de 200 «OK» u otra respuesta final del origen.

Configuración recomendada: Siempre encendida.

Priorización mejorada de HTTP/2: activada

Optimiza el orden de entrega de los recursos. Con HTTP/2, de forma predeterminada, Cloudflare seguirá el orden solicitado por el navegador. Este orden varía de un navegador a otro, lo que provoca una diferencia significativa en el rendimiento. Con la priorización mejorada de HTTP/2 habilitada, los recursos se entregarán en el orden óptimo para que la experiencia sea más rápida en todos los navegadores.

Configuración recomendada: Siempre encendida.

TCP Turbo: Activado

Reduzca la latencia y aumente el rendimiento con optimizaciones de TCP personalizadas.

Configuración recomendada: Debe estar activado de forma predeterminada, puede estar desactivado en cuentas antiguas.

Mirage: Activado

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 imágenes de marcador de posición de baja resolución que tienen las mismas dimensiones que las originales (incluidas las imágenes de terceros). Una vez que la página se ha renderizado por completo, las imágenes de resolución completa se cargan de forma diferida (dando prioridad a las imágenes en la ventana gráfica del navegador). Este proceso permite que las páginas se rendericen rápidamente y minimiza el flujo del navegador. Combina varias solicitudes de imágenes de red individuales en una sola solicitud. Es necesario que las imágenes admitan la carga progresiva, pero esta configuración es ideal en mercados con dispositivos de gama baja y velocidades de conexión móvil lentas.

Configuración recomendada: Siempre encendida.

Rocket Loader: Activado

Además de la optimización de imágenes, Rocket puede proporcionar las mayores ganancias de velocidad, pero el sitio debe probarse con Rocket Loader activado. Rocket Loader mejora los tiempos de pintura de las páginas que incluyen Javascript. Los visitantes tendrán una mejor experiencia al ver que el contenido se 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 pintura al cargar asincrónicamente tus Javascripts, incluidos los de terceros, para que no bloqueen la representación del contenido de tus páginas. Pueden surgir problemas si se requieren scripts antes, por lo que es necesario probar el sitio. Si hay problemas con Rocket Loader, se pueden usar reglas de página o agregar data-cfasync="falso» a un script para excluir el script de Rocket Loader: <!-- fs-richtext-ignore --><guion data-cfasync="falso» src=» /javascript.js «></script>

Configuración recomendada: Siempre activo, a menos que cause problemas en el sitio. Intenta excluir los scripts problemáticos con: data-cfasync="falso» o reglas de página.

Intercambios firmados automáticos (SXG): activados

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

Configuración recomendada: Siempre encendida.

URL de captura previa: Activada

Activado si tienes una empresa.

Almacenamiento en caché > Configuración

Nivel de almacenamiento en caché: ignorar la cadena de consulta

Determina la cantidad de contenido estático de tu sitio web que deseas que Cloudflare almacene en caché. Ignorar la cadena de consulta ofrece los mismos recursos independientemente de la cadena de consulta. La mejor opción para evitar que el sitio cree diferentes recursos de caché para todas las cadenas de consulta que se puedan agregar.‍

Configuración recomendada: Ignore la cadena de consulta.

Es importante tener en cuenta que Cloudflare no almacena automáticamente en caché el contenido HTML. Solo se puede hacer creando reglas de página. Las reglas de página ofrecen una capacidad de personalización y opciones increíbles, pero podemos hacer recomendaciones al respecto, ya que los administradores del sitio deberían determinar el TTL de la caché del navegador y el TTL de la caché de borde. Por ejemplo, una página acerca de una página estática puede tener tiempos de caché muy largos tanto en el navegador como en Edge, pero un feed de blog sería más corto, según la frecuencia con la que se publiquen nuevas entradas, y tendrá que superar otras reglas comodín a medida que el conjunto de reglas vaya cayendo en cascada.

TTL de caché del navegador: no más de un día.

Determina el tiempo durante el que Cloudflare indica al navegador de un visitante que almacene en caché los archivos. Los periodos cortos, como un día, están bien de forma predeterminada, con reglas de almacenamiento en caché más estrictas establecidas en Page Rules que anularán esta opción. Las reglas de la página deben establecerse según la frecuencia de actualización, tal como se mencionó anteriormente, y agruparse en conjuntos, ya que los caracteres comodín facilitan esta tarea. Cuidado con el TTL del navegador, el TTL de la caché perimetral se puede borrar purgando la caché en Cloudflare, pero el TTL de la caché del navegador significa que el contenido de la página permanecerá en el navegador del usuario durante ese período y no se podrá borrar una vez guardado en caché.

Configuración recomendada: Un día para estar seguro y luego personalizarlo en Page Rules.

Crawler Hints: Activado

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

Siempre en línea: Activado

Si Origin Serves deja de funcionar, Cloudflare mantendrá el sitio activo con copias de la Wayback Machine. Cloudflare determina la frecuencia de actualización en la Wayback Machine.

Almacenamiento en caché > Caché por niveles

Argo: Activado

Argo es un servicio que utiliza rutas optimizadas en toda la red de Cloudflare para ofrecer respuestas a los usuarios de forma más rápida, fiable y segura. Se aplican costos de uso.

Configuración recomendada: Encendido.

Almacenamiento en caché > Caché por niveles

Caché por niveles: complicada

Aumenta la vida útil de la caché almacenando automáticamente todos los archivos que se pueden almacenar en caché en los depósitos de almacenamiento de objetos persistentes de Cloudflare.

Cuando se produce un error en la memoria caché, Cloudflare comprobará primero estos depósitos de almacenamiento antes de ir a tu lugar de origen. Los costos de uso también se aplican en este caso y funciona en conjunto con Argo, por lo que solo debería activarse si Argo está activado.

Configuración recomendada: Activado si está en Enterprise, puede ser difícil de eliminar por completo en los planes inferiores. Enterprise puede borrar la caché por completo.

Red

HTTP/2: Activado

Acelera tu sitio web con HTTP/2

Configuración recomendada: Encendido.

HTTP/3 (con QUIC): activado

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

Configuración recomendada: Encendido.

Reanudación de la conexión 0-RTT: activada

Mejora el rendimiento para los clientes que se han conectado previamente a su sitio web. La reanudación de la conexión 0-RTT permite enviar la primera solicitud del cliente antes de que la conexión TLS o QUIC esté completamente establecida.

Configuración recomendada: Encendido.

gRPC: Activado

Permita las conexiones de gRPC a su servidor de origen.

Configuración recomendada: Encendido. Si no es necesario, no afectará a nada de ninguna manera.

WebSockets: Activado

Permita las conexiones de WebSockets a su servidor de origen. Los WebSockets son conexiones abiertas que se mantienen entre el cliente y el servidor de origen. Dentro de una conexión WebSockets, el cliente y el origen pueden pasar datos de un lado a otro sin tener que restablecer las sesiones

Configuración recomendada: Encendido.

Enrutamiento de cebolla

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

Configuración recomendada: Sí, mejora la velocidad de los usuarios de Tor.

Ejemplo de orden de reglas de página

Las reglas de página deben tener lo siguiente: el TTL de Edge Cache y el TTL de la caché del navegador determinan durante cuánto tiempo se almacena el contenido en Cloudflare Edge y en el navegador del usuario. Estas dos deben determinarse en función de la frecuencia con la que se actualiza el contenido de una página. Digamos que la mayor parte del sitio nunca cambia realmente, pero el blog se actualiza con frecuencia. La página del feed del blog debería entonces tener un TTL de Edge y de navegador más corto y el resto puede tener una regla comodín general con cachés de TTL de Edge y de navegador más largas. Las reglas de página se mueven en cascada. Por lo tanto, si la regla genérica del sitio en el que el contenido no cambia suele tener un comodín como este www.milkmoonstudio.com/, y una vida útil de caché prolongada, debería cumplir con las reglas con una vida útil de caché más corta, 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 porque hay otra regla que afecta a las páginas del blog y se encuentra por encima de www.milkmoonstudio.com/ regla de página, la anula.

Ejemplo de regla de página

• polaco: Lossy
• Minificación automática: HTML, CSS y JS
• Rocket Loader: Activado
• Mirage: Activado
• Nivel de caché: almacena todo en caché (también para almacenar en caché el contenido HTML).
• Reescrituras automáticas de HTTPS: activadas
• Cifrado oportunista: activado
• TTL de la caché del navegador: 1 día (digamos que es para un feed de blog en el que a menudo hay contenido nuevo, sería más largo para las páginas estáticas)
• Edge Cache TTL: 1 día (digamos que es para un feed de blog en el que a menudo hay contenido nuevo, sería más largo para las páginas estáticas)

‍