Back to top button

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.

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

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.

  • 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'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.

recent projects