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

We’ve recently started using Cloudflare with a lot of our projects to speed up the sites, especially ones with heavy image content. Webflow can be a bit of a bugger when it comes to Cloudflare so we’ve create a post on how to get Cloudflare to proxy all your content, including the Webflow files such as images that don’t ‘sit’ on your domain but rather on the Webflow website-files.com CDN so that Cloudflare can optimise those as well and not just you HTML. You can find it here.

We’ve seen some great improvements to many projects, especially ones where clients don’t continue to optimise images after we hand over the site, not to mention the great page rules and cache control settings you get with Cloudflare.

For those struggling with this we’ve also created a Cloudflare Worker Script that only focuses on optimising images using Cloudflare’s Image Resizer. You can find that post here.

3 Likes

@flashsites Nice, never knew this existed, which is great as you can still utilise the CMS while also using Github and whomever you want after that. Most project we like to handover and forget if they don’t need ongoing work, so might be a hassle as a lot of our clients like to just use the Editor for changes and then hit publish and forget. So think this solution might have more for them to handle than they’d like. With Cloudflare we just create their page rules and they can manage Webflow.

1 Like

Update

I’ve added some content to the post to ensure that Cloudflare never misses anything and all assets are cached on Cloudflare. Hope this helps anyone that didn’t get the full benefit or had some images that we’re being optimised.

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

FYI, the post now also has a how-to video if you get stuck at any point and can’t follow my ramblings. Here’s a direct link to the video on YouTube.

Also an updated how-to video, the other one dealt with an issue that sometimes occurs, this one’s probably best.

The problem with this approach is one of security. The user’s browser connection to Cloudflare is secure (protected by SSL), but Cloudflare’s connection to the Webflow-hosted project is not. The lack of end-to-end encryption potentially opens up a man-in-the-middle attack vector and snooping that may be unacceptable to many companies. Private and personally identifiable information can now pass the wire in clear text between Cloudflare’s infrastructure and everything between that and Webflow servers. The lack of end-to-end security could also introduce a severe issue for GDPR compliance.

Webflow should support using DNS Validation for the Let’s Encrypt certificate issuance process so that certificates can be issued automatically for proxied sites. As of now, they don’t, which is why you are advocating disabling SSL on Webflow since the inability of Webflow to renew the SSL certificate would break the hosting setup with Cloudflare.

Don’t use this method unless you and your team know the risk and potential liability. You most certainly would need to divulge this in a privacy policy. I would advise against it as I fall on the side of privacy first.

2 Likes

Cloudflare has the option to encrypt traffic end-to-end, and I’ve been able to set this up successfully with Webflow.

We simply need to change the SSL settings to “Full (Strict)” in Cloudflare, and then can enable the proxy in a few minutes once those changes propagate. No changes required in Webflow, and everything works perfectly.

1 Like

@marsnebulasoup - When the Webflow certificate expires and can’t be renewed you will need to resort to a manual intervention for your broken site.

Or you just quickly put SSL off in cloudflare, on in webflow, and undo.

5mins of work a month for a much better functioning site with CDN and lightning speed.

Simplest is to probably use full strict in Cloudflare, but also have a single page somewhere that has page rule that has SSL in Cloudflare turned off for that specific page that gets some hits and have that as the page that renews you Webflow certificate if you want full (strict) enabled all the time. Just you know, make sure SSL is always on in Webflow.

1 Like

Hi Jakes,
Thank you for the very detailed tutorial. It seems Cloudflare is sunsetting “Apps” and therefore it is now impossible to use Cassette or any other apps. At least for now.

Cassette already has limitations that make it imperfect for performance optimization on mobile devices ( it misses media srcset images ).

Either way it’s not too difficult to custom build a solution that does not require Cassette.

Hey @Matthieub I’ve done a post here on using a Cloudflare worker to catch the srcset urls and optimise them, so you can just follow the old post up to the Cassette setup step and then switch to using a Worker to do the heavy lifting on the image bit, and yeah, like @memetican said, Cassette wasn’t great at the srcset bit, so this should catch it all.

@J8kes, I’d love to know how Webflow determines when to renew a certificate, or how it establishes a validation chain seeing it’s not the DNS provider. Your note here seems like it’s just based on a user accessing a page that’s not HTTPS.

My roundabout question is to see if setting up a Cloudflare health check that fetches directly from Webflow would be sufficient in making sure Webflow renews the certificate. I also realize it’s probably using a .well-known path to establish trust, so the site would either not be able to force redirection to HTTPS or specifically exclude those requests from that setting.