Webflow uses AWS and while it's adequate, we've found that with large projects, especially ones that are image heavy, Cloudflare has provided us with significant speed boosts, better uptime, and a host of optimisation options. But unlike some other platforms it's not as easy as simply switching your DNS to Cloudflare. Webflow and Cloudflare don't gel well when it comes to proxying your site and optimising it through Cloudflare. In this post we'll talk about the limitation and show you how to overcome them quickly and easily.
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.
- Caching on the CloudFlare edge.
- Advanced Browser Caching settings.
- Always online and saving 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 285 cities in more than 100 countries.
- 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, it can pretty much do whatever you need, and yeah, in our tests there was a definite speed boost. 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. 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. your assets don't in our case 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.
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:

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

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

Save the non-SSL Settings- 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).
- Head to Cloudflare and add the non-SSL DNS settings. It should look something like this:

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

- Now, we want to purge the DNS settings so your Webflow settings propagate immediately. Start by going to , then and just in case:
https://cachecheck.opendns.com/
- 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.
- After the great purge, head to Webflow's hosting Tab again.

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:

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. We don't know how to do that, and it's a lot of work. 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.
LATEST UPDATE - We've just completed a Cloudflare setup, and all issues have been resolved, we'll leave solution below in case something similar pops up.
OLD UPDATE - We've had a comment on the post that Cassette gives as error where it can't create a CNAME record. We just recorded the How-To video for this post and ran into this error. The issue appears to have been resolved, but there is aa easy workaround that you can follow in the old video or just check out the end of this section on the post.
- 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:

- Apply the following settings in the app:

1. Create a sub-domain on your domain where Cassette should put the files from Website-Files.com (or whatever Webflow I 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).
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:

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.
- When you get the error, jut ignore it and create the sub-domain manually.
- Cassette is still adding the worker. You won't see the worker and you might not even see the Cassette app installed.
- Head to DNS, add the CNAME for the sub-domain you had in the Cassette settings.
- In our case the CNAME is assets.
- The value for the CNAME is the Webflow CDN domain name from above where Webflow is hosting your content.
- In our case the value is assets-global.website-files.com
- Make sure you just use the naked domain name.
- 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:
- Select the image on the Webflow canvas
- Type Command + Shift + O (on Mac) or Control + Shift + O (on Windows)
- Open Settings panel > Image settings
- Uncheck the Responsive image checkbox

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.
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: On
Cloudflare applies Brotli compression to help speed up page load times for your visitors. Cloudflare will select Brotli compression as the preferred content encoding method if multiple compression methods are supported by the client. If the client does not indicate that Brotli compression is supported, then gzip compression will be applied.
Recommended setting: Always on.
Early Hints: On
Cloudflare's edge will cache and send 103 Early Hints responses with Link headers from your HTML pages. Early Hints allows browsers to preload linked assets before they see a 200 OK or other final response from the origin.
Recommended setting: Always on.
Enhanced HTTP/2 Prioritization: On
Optimizes the order of resource delivery. With HTTP/2, by default, Cloudflare will follow the order requested by the browser. This ordering varies from browser to browser, causing a significant difference in performance. With Enhanced HTTP/2 Prioritization enabled, resources will be delivered in the optimal order for the fastest experience across all browsers.
Recommended setting: Always on.
TCP Turbo: On
Reduce latency and increase throughput with custom-tuned TCP optimizations.
Recommended setting: Should be on by default, might be off on older accounts.
Mirage: On
Mirage tailors image loading based on network connection and device type. Devices with small screens receive smaller images, and slower connections receive lower resolution images. Replaces images with low resolution placeholder images that have the same dimensions as the original (including third party images). Once the page renders completely, full resolution images are then lazy-loaded (prioritizing images in the browser viewport). This process allows pages to render quickly and minimizes browser reflow. Combines multiple individual network requests for images into a single request. Images do need to support progressive loading, but this setting is ideal in markets with lower end devices and slow mobile connection speeds.
Recommended setting: Always on.
Rocket Loader: On
Aside from image optimisation Rocket can provide the biggest speed gains, but they site needs to be tested with Rocket Loader on. Rocket Loader improves paint times for pages that include Javascript. Visitors will have a better experience by seeing content load faster and speed is also a factor in some search rankings. Rocket Loader improves paint times by asynchronously loading your Javascripts, including third party scripts, so that they do not block rendering the content of your pages. Issues can arise if scripts are required earlier, so the site needs to be tested. If there are issues with Rocket loader one can use page rules or adding data-cfasync="false" to a script to exclude the script for Rocket Loader: <!-- fs-richtext-ignore --><script data-cfasync="false" src="/javascript.js"></script>
Recommended setting: Always on unless it's causing issues on the site. Try to exclude problem scripts with: data-cfasync="false" or Page Rules.
Automatic Signed Exchanges (SXGs): On
Improve your website's performance by making cacheable resources available on Google’s Signed Exchanges.
Recommended setting: Always on.
Prefetch URLs: On
On if you have enterprise.
Caching > Configuration
Caching Level: Ignore Query String
Determines how much of your website’s static content you want Cloudflare to cache. Ignore query string delivers the same resources independent of query string. Best option to stop the site from creating different cache resources for all query strings that could be added.
Recommended setting: Ignore Query String.
Important to note that Cloudflare does not automatically cache HTML content. Can only be done by creating Page Rules. Page Rules offer amazing customizability and options but we can make recommendation there as Browser Cache TTL and Edge Cache TTL would need to be determined by the site's managers. A static about page can for example have very long cache times in both the Browser and on the Edge, but a blog feed would be shorter, depending on the frequency of new posts, and would have to sit above other wildcard rules as the ruleset cascades down.
Browser Cache TTL: No longer than a day.
Determines the length of time Cloudflare instructs a visitor’s browser to cache files. Short times like a day are fine as a default with more strict caching rules set in Page Rules that will override this. The Page Rules should be set by update frequency as mentioned above and grouped in sets, wildcards make this easy. Watch the Browser TTL, Edge Cache TTL can be cleared by purging the cache in Cloudflare, but Browser Cache TTL means that the page content will stay in the user's browser for that period and cannot be cleared once cached.
Recommended setting: A day, to be safe and then customised in Page Rules.
Crawler Hints: On
Cloudflare will notify search engines when there are changes on the site.
Always Online: On
If the Origin Serves goes down Cloudflare will keep the site alive with copies from the Wayback Machine. Cloudflare determines update frequency on the Wayback Machine.
Caching > Tiered Cache
Argo: On
Argo is a service that uses optimized routes across the Cloudflare network to deliver responses to your users more quickly, reliably, and securely. Usage costs apply.
Recommended setting: On.
Caching > Tiered Cache
Tiered Cache: Complicated
Increase cache lifetimes by automatically storing all cacheable files into Cloudflare's persistent object storage buckets.
When there's a cache miss Cloudflare will first check these storage buckets before going to your origin. Usage costs also apply here and works in conjunction with Argo so it should only be turned on if Argo is enabled.
Recommended setting: On if on Enterprise, can be hard to clear completely on lower plans. Enterprise can clear cache completely.
Network
HTTP/2: On
Accelerates your website with HTTP/2
Recommended setting: On.
HTTP/3 (with QUIC): On
Accelerates HTTP requests by using QUIC, which provides encryption and performance improvements compared to TCP and TLS.
Recommended setting: On.
0-RTT Connection Resumption: On
Improves performance for clients who have previously connected to your website. 0-RTT Connection Resumption allows the client’s first request to be sent before the TLS or QUIC connection is fully established.
Recommended setting: On.
gRPC: On
Allow gRPC connections to your origin server.
Recommended setting: On. If not needed it won't affect anything either way.
WebSockets: On
Allow WebSockets connections to your origin server. WebSockets are open connections sustained between the client and the origin server. Inside a WebSockets connection, the client and the origin can pass data back and forth without having to re-establish sessions
Recommended setting: On.
Onion Routing
Onion Routing allows routing traffic from legitimate users on the Tor network through Cloudflare’s onion services rather than exit nodes.
Recommended setting: On, improves speed for users on Tor.
Page Rule Order Example
Page rules should have the following, the Edge Cache TTL and Browser Cache TTL determine how long content is stored on the Cloudflare Edge and in the User's Browser. Those two should be determined by how often content on a page updates. Let's say most of the site never really changes. but the blog is updated often. The blog feed page should then have a shorter Edge and Browser TTL and the rest can have a catchall wildcard rule with longer Edge and Browser TTL caches. Page rules cascade down. So, if the generic rule for the site where the content doesn't change often has a wildcard like this www.milkmoonstudio.com/, and long cache lifetimes, it should sit below rules with shorter cache lifetimes, in my case www.milkmoonstudio.com/blog/. The blog is then the first rule and the rest of the site the next rule in the set. The second rule's wildcard also caches the blog, but because there is another rule affecting the blog pages, and it sits above the www.milkmoonstudio.com/ page rule, it overrides it.
Page Rule Example
- Polish: Lossy
- Auto Minify: HTML, CSS and JS
- Rocket Loader: On
- Mirage: On
- Cache Level: Cache Everything (to cache HTML content as well).
- Automatic HTTPS Rewrites: On
- Opportunistic Encryption: On
- Browser Cache TTL: 1 Day (Let's say this is for a blog feed where there's often new content, would be longer for static pages)
- Edge Cache TTL: 1 Day (Let's say this is for a blog feed where there's often new content, would be longer for static pages)
Video Transcript
Gonna be setting up website in cloudflare and we're going to be cashing everything and using all cloudflare's great optimizations. We're going to kick things off with our analytics test that we've been using in all of our other tutorials and we're gonna start off by setting it up as webflow wants you to do it. So with all the Cloud Player optimizations and everything disabled then we're gonna switch over run everything through cloudflare. Then we're going to cash it. We're going to install cassette to get all your assets on there and we're gonna sort out any issues and finally we're going to show you all the neat settings. We didn't talk about in the actual blog post. So how to set up rules default optimizations Etc. Okay, I'm gonna kick it off here by adding our domain. So let's head over cloudflare. And we've got a domain that we're registered milkmoon Studio test.com. So let's say over here. We want to custom domain. milk, Moon Studio test.com Add a domain. We're not going to be doing domain flattening or anything just the normal stuff. so www.studio Okay, so let's stick in all of these settings. So we want to grab the a records there. Gonna go over to DNS. Add a record a at. and this guy save and we're gonna grab this one. add a at again IP and head over to the next so this is going to be your C name. ad record where the ah, so sorry. for www .save Oh, actually that's an ad. Doesn't matter. We'll just add the next one. Yeah, sorry we want to do we want to do www, we are correct. And then we want to add a text record with an app for the same thing. That's just for let's encrypt. Okay, add a record I'm gonna do text. at stick that value in. save Here, let's see if we missed anything. So we've got a records. We're not doing option two. That's if we're going to do CNN flattening. We're going to make this guy the default. check status and check status Oh and I think's happened yet. Oh two other things webflow doesn't want this on so no caching right when we're doing the normal webflow set up in here. so my proxies edit approxy and then what we want to do is to get these pushed propagated everywhere. I'm going to cloudflare Purge yes, I can't remember the URL. There we go. and it's milk, Moon Studio Test.com I want to purge the a record. on Purge C name we want to purge the text. And then same for www, we want to start off with the naked one first. So again, put a or C name and Purge text trick or and then Let's just do Google and case Purge. Google DNS Here we go flash Google's flush. and it's milk, Moon Studio Oh yes.com and you'll see Flash the sub domains after we do this. So we're gonna flash that Google text a bit longer. It's really flashing now. Cool that's been flashed see name Flash. Just text so long. It's right. Well, that one's flashing. If okay cool. We're good there. Oh, sorry. It's still that txt. and Flash and I do www when this is finishing. So flashing all of these just makes it Go and call the records on cloudflare and propagate them to. And all of the servers really quickly so we don't have to wait for anything. I record again. Flash that's it over here in the meantime check status. check status ignore that publish I know what's wrong. I spelled it and correctly. oops a custom domain milk Moon Studio test .com Sorry y'all at least we don't need to enter it. All again. Everything's same. It's already picked up the changes. That's the default. And here we go publish. So now oh, I didn't publish that. so now we should be live. in this up Maybe not. reload SSL protocol error I was just a refresh, okay. We're all sorted sides live. Now if we check in here. encryption check the certificate. There we go. So that'll be our certificate from cloudflare and everything in our little test site is working. Okay, so you're going to want this plugin? Called Dr. Flair. It's cloudflare's plugin if you go to Dave tools. You will see if we switch to Dr. Flair. Nothing's happening. We're going to refresh this connection so that Dr. Flair does run and you'll see we're on cloudflare but it's it's not doing anything, right? The little orange clouds are off, so it's not caching anything. So how do we get it working through cloudflare so that our certificate doesn't break if we turn on these guys. it's gonna work for the amount of time that this certificate Who? at the certificate is Live at the moment. So it'll work till the 3rd of December then let's encrypt. Or whoever cloudflare is using at the moment of asked is going to try and create a new one and because it's not getting hits for your cloudflare because everything's proxied. That's just gonna break. And you're going to have your site down. So what we're going to do is a neat little hack here. We're gonna go ahead. And we're going to disable SSL so it's a changes. We're going to get the settings for SSL disabled. Right? So we're going to take this proxy address. It in here. Swap this is L1 out. save Oh and we're gonna turn on the cloud now. So next. this guy get back in here. Edit him. Turn on proxy save. And then we're going to grab. this guy we're gonna leave the text record because that plays no role in this at the moment. I think so, we're just gonna swap that out. Turn on that save. Now we're going to have a problem. Let's just flash. cloudflare up, right? So the next step in this process is enabling all of this again. And it's gonna say issue detected. None of the stuff is there don't worry. It doesn't matter just publish. Okay. So ignore the errors it back over here. Let's Purge the sky. We're going to put him. and see name. And we're going to do the same for www. airicordfirst and see and everything should break now, right? That's it refresh. Actually around break certificate still fine. What we're going to do now to keep everything nice and secure in here. First off we're gonna head to SSL. And we're going to switch this to full. Get it to click. We can turn this on it'll give you updates and what's happening over there? None of these guys actually matter. But we're going to use. Always use https. We don't want to entertain more strict Transport Security. Now you can do that. But if you look over here. You'll see that if you've got things cached. In the user's browser and you make changes and it gets bypassed. It's going to fail you can leave all of these guys on we can turn on certificate transparency. You'll get updates when the things change and then you can double check that. It's working when you're certificate on webflow gets renewed. Um, we don't need origin pools on. I think we're all set over here. Um, yeah. so let's just close this guy. We're going to go into incognito mode to make sure everything. Is working properly. Oh Open studio Okay, calm. copy copy that for future reference and now you'll see everything is working fine. They're just fine. We're going to clean out browsing data. And we're just going to run a test. with devtools open and Dr. Flair on so that you can see it's our starting to run. through cloudflare So some traffic is being proxied, but not much right because the only thing it can get hold of at the moment. I can see them. It's already going through the cloudflare data center in Cape Town, which is my closest data center about 200 kilometers away But it's caching very little because our assets. If we look at these are sitting in website files, so you'll see assets dot website files.com. It might be different for you. You're just going to use whatever you have. So every time you open up one of these guys, you'll see. Assets the website files.com cloudflare can only Click Cash. What's it's under your domain. This is not your domain. Therefore. It can't do anything to it Contra and optimizations or anything. But let's forget about that for a second. Okay, first we're going to go to network. Let's turn on everything useful here. Do resumption. Guys have been here before you can read what all of these are right under help. We don't need any of that. Okay, we're all set here. Traffic is just Argo. You might want to enable this it will cost you a few extra dollars. I mean a lot of sites won't even get to this level, but it's like five bucks a month extra and it Roots it through the cloudflare backbone of a node goes down somewhere all that kind of great stuff. So totally worth getting this turned on. Next we're going to head to speed. Here you can run a test and it'll tell you how much faster it is with cloudflare. It's still measuring at the moment. Oh we need to upgrade to Pro. We forgot about this so we can turn on all the neat little enhancements. I'm just gonna go purchase. And now I have that image resizing not important at the moment. If you look at our blog posts the very large but last but in the blog post about imagery sizing this is where it becomes important and you also pay sort of usage wise we're going to set it to lossy. I mean, it's very hard to detect these changes if you have imagery resizing on and you're using the embed codes that we have in the post you can use things like Aviv, which is the latest in image compression and I mean even surpasses with key by so much. We want to order Minify on. These optimizations were applying now are sort of the default right? It'll apply to everything that we don't apply to page rules. So we're going to set up rules in just a bit. And if anything is missed by a rule, it will apply these settings the rules override this early hints useful. Allows it to preload Assets in the background. This is not WordPress. We don't need that. We're going to enable prioritization. We're going to enable Mirage Mirage is especially useful on slower connections on mobile. It does that little thing where you'll see the jpeg image loads sort of slowly and pixelated, but at least loads the whole page and then the images and it all do that automatically based on the network speed rocket loader. As great helps for paint times with your JavaScript. I've never had any issues, but I have had issues once with a site we didn't build and someone had very strange JavaScript in the head and we had to disable rocket loader. So if you get any like interactions and stuff not working turn off rocket loader clear the cache in cloudflare. It's under caching. And then you can do that automatic sound exchanges. This is specific to Google and chromium based browsers and I'll give you a nice little speed bump there. Amp with a dozen support amp so we don't have to worry about that. I think we have everything on in there. You can get your browser inside of stuff. That's just the usual sort of analytics. I'll show you what to turn that on a bit later. Okay. So now let us head back over here. So we've got A bunch of things turned on this is where we sat before 1.3 megabytes total. 14.6 kilobytes proxied we're going to go ahead. And clear the cache again up close the window. I'm just gonna go back and forth a lot with this so I can show you guys what's happening. Okay, we're clearing the cache. I'm just doing that so that I can open. The devtool stock of flare window before it doesn't do it on the settings window. Okay. pop this in and now we'll see if we go through this page. A little bit more has been proxied but not much. I mean it's it's not really doing. anything so Why do we do now? How do we get all of these great out images and on being proxyed? sorted we go and add an app called cassette because it's going to go and look at your CDN on AWS grab the content and root it through. Cloudflare so that you can optimize. my cash and you can use the free version you can use the paid for version if you want to do more than one sit. of object storage hosts. So let's say you've got JavaScript coming in from somewhere else. You've got analytics or anything that you also want to cash and optimize then you can add more than one. So we're going to call ours sits. Say start milk moons Studio. Test.com this is where we want to keep it and where we getting it from. Where did we say? We were in website files. Let's get a URL here. We just want to grab this. Whoa, sorry. an image open in new tab Okay, so our assets are being stored here. So we want to Cache everything that's coming from there. That's it back over here. Okay, and now it should create a subdomain for us. Oh, actually I forgot about that trailing slash. Let's get rid of that. Okay. So what's it doing? It's going to install a worker. You'll never see that. And it's going to create the cname record where it'll cash our content. And we've got an error. So it looks like a set is throwing a bit of an error doesn't seem to be able to create the cname record for some reason but it is adding the worker. So for this workaround, you're gonna go to the DNS settings. Just create a c name record for the subdomain. You were going to create in cassette. So in our case it was assets. And then the target you want to stick in there. The value is the domain name of your webflow CDN URL. You'll see I make error here. You want to just stick in the domain not? https in the beginning and once you've added that and it's proxied cassette seems to work just fine. The worker gets added. You never get to see the worker with our cassid added properly or not, but you'll see if you go to apps now sit is not there, but everything else seems to still be working correctly. Thrown an error. I don't know if it would have installed because it very weird Okay, we're gonna March 4th and ignore this. Let's close this. and we'll open our page again. Seems to be loading. Yeah, it's working. Either way. I think we'll contact support and find out what's going on. But the images are being cached. And it's obviously running through the worker. So let's run that work around through you one more time. You're going to do exactly what you did here. You're going to stick in your subdomain. You're going to go to cloudflare. Sorry. I'm going to cloudflare. Gotta go to local Studio test. and then once that thing fails trying to install the worker you're just going to put in. the your Elf minus HTTP is that webflow is using and it seems to be proxying correctly. So let's go and do developer tools. Bit of a hack now. Sorry guys. but Do this. We'll see a lot more is getting proxied by now. And we'll see. that some of our content is coming through. assets.mokum studio now and not cloudflare anymore. So it's basically redirecting it. You can see the red. There's been proxied. This guy still external. Sometimes it takes a while. so let's kick things off. We want to create some page rules. We're going to do two set rules. You can do as many as you want up to 20 on the pro account. First off we're going to start with assets. Oh Come Wild Card everything in there What am I doing? Come wild card. And we're going to go in here. and just star on that so everything and assets we want to apply. automatify on our JavaScript stored in there all our CSS all our HTML. We want to apply. Automatic rewrites just in case. We want to apply browser cache. How long will it stay in the user's browser? On this side. It's not very important. Let's say a year We don't have any blog content. That's constantly changing Etc. You could create a rule for your blog. And you just move it above this rule. So it applies top down first rule second rule third rule. So you exclude some things in your other rules Edge cache. How long does it stay on the cloudflare edge? So in my case? That I'm connected to right now. Let's Cape Town data center. How long will it stay on there? Let's say a month in this case because it's all pretty static. We don't even have CMS on this side. cash level it won't cash HTML files, which we really do want to do because it's standard. Oh actually We left our step. We'll get to that. So we want to Cache everything. I'll give you a reminder. bypass bypasses the cache No queries string. Caches without the query string ignore query string. So let's say you've got like Google cross domain tracking or anything like that or it's as question mark something something. It'll cash the content as if the query string was not included. Standard or include the query string. So every time there's a query string. It'll cache different copy of it cache everything will just cash everything. Then we want Mirage enabled. for mobile image To load faster we want polish enabled. Does a nice little lossy? Thing we talked about earlier. We want opportunistic encryption enabled. So anything that finds that it can encrypt that isn't it will encrypt. We want rocket loader enabled JavaScript. we want Anything else on here? Now actually we're done. Okay. We're Gonna Save and deploy this page roll up. This one's empty. Let's move. Oh, I just delete one. I think it was a rocket loader. Yeah. Want that enabled? save and deploy Okay, great. Now we're going to create another page rule. and this one is just star dot look studio.com slash so everything we must in that first one. We're going to do oh we do not want this. We're going to do now. So that was just cashing. and optimizing our assets folder Now we're doing. The same over here. For everything else that's not in that. cash level We want everything this is where it's gonna grab our HTML pages and things. and Edge cash I'm just going to set it for a long time because as I said, very static page. What have we missed? Mirage on let's to polish lossy add rocket loader on opportunistic encryption on ad that's yeah, that's it. Turn on things like origin cash control and mess around with that if you want, but just go and read everything first. Okay, so our second rules and plays. rotation error What did I do wrong? whoops Test. Yeah, I'm bad today. Okay. We want this guy's second. this guy first think that's it up correctly. So it'll grab everything and assets apply this rule everything on multiple and apply this rule. So what I usually do is I have the assets and stuff cached quite heavily. Then I'll have a Blog second because that content changes. So maybe sitting the blog page just one day in the user's browser. And then the page and if there are specific pages that for example has the latest blog content in a collection list on it. You'll want to add a rule also above your heavily cash rules where that guy's Also may be set to changing at least once a day the user's browser and maybe on the edge cache as well. Ah, yes, the other thing we forgot to talk about cash configuration. So we're going to switch this to ignore query string. How long do we want the browser to Cache? Want it one day when anything is missed up there. We want crawler hints on. This will tell search engines and content has changed. We want always online on so copy goes to the internet archive as well in case your site and the whole Cloud fin Network goes down. And that should be that so what we're going to do now. As perch the cash. We're going to purge everything. You can purchase specific page. We're just going to purge everything. And we're going to hit over here close that guy. Oh. We're gonna clear browsing data. And we're just going to do a quick incognito on movement Studio. test See that everything is working correctly. Yeah, I think we're good. Good. gallery another quick refresh should be cashed. Okay, let's just double check that. Clear that. And we're gonna go to movement Studio. Again, just stick the test URL in there. Let's turn on devtools. At Dr. Flair and we'll refresh this page. Okay. See the green. Get rid of this. It's being proxied it got a hit and it was polished. This guy's still being missed for some reason. You'll see it's going over there. Let's do this but inspect. Okay, so you'll see. Based on the break points. It hasn't caught. The assets domain I think on everything in there. This is where the hack at the bottom of the blog post comes from. to grab these guys You might want to try that out. Just go read that. and now Yeah, we're doing pretty good here. Let's go to speed. We'll run another test over here and while we're busy with that. We may as well go in here. Close the sky up. incognito window of Studio test and it's run a lighthouse score on this side. Okay. So when you run your speed tests remember to run it more than once it's gonna hit the closest data center to wherever Google or anyone is running the test from And it's gonna cache it there on that data center. So after like the second or third test the content should be cached and you'll get a much better test result performance 99. Look at that. Also nice. Just got some random errors here, but nothing performance wise that really need to worry about. Let's see what it does on mobile. We haven't actually cached it yet on mobile. So it might be slow. I'd have to run this more than once on mobile. That's good. I ate. Well analyze it again real quick. Hoping that Jesus is the same server. And maybe we see an increase. In speed there for mobile 82 it's going down. Why is it going down largest contentful paint? Yeah, I don't have any settings on these. I just drag these images in here. So it's that same issue of the subdomain again And probably either set explicit within height on these guys or alternatively just to the hack. So if you go to the Post on more Mysterio's blog. You're gonna for the hack. Do an embed of the image? It's right at the bottom here. Do an embed of the image? And then you're gonna want to do the image resizing and you can set it up by your breakpoints. and just read this whole section and it should sort you out really well. To get all of those images caching on every device anywhere all the time. Go check back in cloudflare over here. And cloudflare says 16% faster. Okay. This is not a very heavy site. I mean, it's a little One we've been using for these tutorials, but hey 16% already good. So I hope you enjoyed it. Drop me a question. If you have any sorry about the sack, I'm gonna contact support and I'll post an update on why the app is not. Working properly at the moment, but you saw just act as if you're installing it. So that it adds the worker. It seems to be adding the worker even though nothing's happening. Then once you've done that just go and manually add. this but where I had assets Just manually add the webflow domain there that it's using. And then it seems to be working just fine. It's just not showing that installed. I'll try and find a solution to that and post it on the blog. Okay. Cool guys, thanks for watching again, subscribe. If you want to stay up to date with the latest posts, I'll let you know what's wrong with the system at the moment. but the actual works Cool, cheers and have a great day.