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:
- Set 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:
- 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 https://126.96.36.199/purge-cache/, then https://developers.google.com/speed/public-dns/cache 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.
- 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 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:
- Apply the following settings in the app:
- 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.
- 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:
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.
- 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 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:
- 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 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
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:
alt="Milk Moon Studio Hero Image"
Or like this if I use our Webflow CDN url:
alt="Milk Moon Studio Hero Image"
Or like this if we use the CDN via the sub domain Cassette created:
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.