Using Webflow with Cloudflare to cache and speed up your Webflow Project

Using Webflow with Cloudflare to cache and speed up your Webflow Project
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 quickly and easily overcome them.

For a step-by-step guide and more info on optimisations and page rules etc. please check out the video.

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.
  • Argo, 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.
  • Zaraz as an alternative to Google Tag Manager, we've tried it and while it's not as robust as Tag Manager you can manage if you don't need a very complicated setup, and yeah, in our tests there was a definite speed boost. We'll make sure our next post is about Zaraz so stayed tuned.
  • Page Rules.

We could go on and on, there are just so many features that we're not going to list them all. 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 essentially 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 the 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 months.

Issue 2, 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 and not your domain. 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. So 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.

Webflow Cloudflare DNS Settings

You're going to be inclined 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, 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 SSL Instructions
Ignore these!
  • Set 1, instead of using the SSL instructions, switch off SSL at the bottom of the hosting tab. Hit Save.
Turn off Webflow SSL
  • Copy the new A record addresses and the CNAME Settings:
Non-SSL Webflow Hosting 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:
Webflow DNS Settings in 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:
Webflow SSL settings in Cloudflare
Certificate settings
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:
Cetificate settings

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 what the How-To Video for a detailed look at what you can apply.

Issue 2, get the Webflow CDN to run through your domain 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. Option 2, 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.

**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 also ran into this error. We've contact Cloudflare Support and the Cassette Devs and will post once it's been fixed, but there is a easy workaround that you can follow in the 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:
Cassette Cloudflare app
  • Apply the following settings in the app:
Cassette Settings
  1. Create a sub-domain on your domain where Cassette should put the files from Website-Files.com, 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.

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.

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:

Cloudflare Lighthouse Speedtest

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.

  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 DrFlare 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. 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, 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
Disable Webflow responsive images.

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

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:

<img
width="100%"
srcset="
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=320/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg   320w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-downn,width=640/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg   640w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=960/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg   960w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=1280/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg 1280w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=2560/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg 2560w
"
src="https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=960/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg"
alt="Milk Moon Studio Hero Image"
/>

Or like this if I use our Webflow CDN url:

<img
width="100%"
srcset="
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=320/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg   320w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-downn,width=640/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg   640w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=960/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg   960w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=1280/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg 1280w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=2560/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg 2560w
"
src="https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=960/https://assets-global.website-files.com/random_webflow_folder/hero_image.jpg"
alt="Milk Moon Studio Hero Image"
/>

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


<img
width="100%"
srcset="
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=320/https://assets.milkmoonstudio.com/random_webflow_folder/hero_image.jpg   320w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-downn,width=640/https://assets.milkmoonstudio.com/random_webflow_folder/hero_image.jpg   640w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=960/https://assets.milkmoonstudio.com/random_webflow_folder/hero_image.jpg   960w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=1280/https://assets.milkmoonstudio.com/random_webflow_folder/hero_image.jpg 1280w,
https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=2560/https://assets.milkmoonstudio.com/random_webflow_folder/hero_image.jpg 2560w
"
src="https://milkmoonstudio.com/cdn-cgi/image/format=auto,quality=90,fit=scale-down,width=960/https://assets.milkmoonstudio.com/random_webflow_folder/hero_image.jpg"
alt="Milk Moon Studio Hero Image"
/>

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 cache 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 Cloudfale, 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.

Video Transript

Accordion Arrow

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.

recent projects