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