How to use Webflow with Cloudflare to cache and speed up your Webflow Project - Webflow Tutorial

[@efficientapp]

Hugely appreciate you recording this video! I got the first layer enabled and am leveraging Zaraz and it seems to be helping (even just the baseline Cloudflare HTML caching). While it needs more for sure, I'm mainly concerned about the SSL certificate expiring, as I had that happen a couple years back. I have User Accounts enabled though so I couldn't disable SSL as the guide showed to enter in that IP address (well in my case proxy(at) so I can use non-www). There's just a layer of sanity-checking as if I try going through to enable everything else and I just get his with an expired SSL it'll be a complete mess. I'm not totally understanding how you and people in the comments are mentioning that SSL renewal should in some way be handled?

[@j8kes]

Cloudflare should handle the certificate between the user and Cloudflare and they shouldn't see any issues. I've not tested the implementation with Webflow user accounts, so can't confirm what happens there. You can turn off Cloudflare, check when Webflow's certificate is expiring, turn Cloudflare on and then check on expiration day whether you have green lock, but yeah, you'll have to test it.

[@timgoegebeur7616]

Thanks for the video. Will there be an updated video since Cloudflare has taken down its App Store?

[@milkmoonstudio]

Hi, yup, we'll be making a new video as soon as we have time, in the meantime you can use our image optimisation script that uses a Cloudflare worker instead of the Cassette App: www.milkmoonstudio.com/post/supercharge-your-webflow-project-with-cloudflare-a-deep-dive-into-our-image-optimization-script

[@syedmavaidabbas2999]

Hi Thank you for this solution. You are awesome. I have a problem. I have 2 subdomains connected to Weglot for translations. So, when I follow your steps to connect with Cloudflare. The normal domain works well but subdomains aren't working. Do you have a solution?

[@liriansu]

Thanks for your great work!

[@yannyimo]

Great Video, thanks for this content ! For the "Object Storage Host" and "Assets Subdomain", you put different adresses in the video and in the blog post, which one is correct finally ?

[@milkmoonstudio]

Subdomain is whatever you want. The url Webflow uses depends on your project, you'll have to inspect to see where your content is hosted on your live site. Could be: assets.website-files.com or website-files.com or uploads-ssl.webflow.com. You'll have to check, those are the three I've seen the most.

[@yannyimo]

@@milkmoonstudio ah make sense. Thank you for the patience and the fast answer !

[@newperspectivesmotivational]

If I use the method to cache content on Cloudflare, do I save on the Webflow bandwidth usage? My client has massive images that he refuses to reduce in size and I’m concerned that the Webflow limited bandwidth will be eaten in no time. I really appreciate any answer to this or info. Thanks!🙏

[@j8kes]

Hi, yes, if the cache rules are set up correctly, you'll hit the cache on Cloudflare for the lifetime of the image.

[@Maxpl01t]

Hey mate, great video, just one questions, I cannot disable SSL o Webflow it says "SSL for Ecommerce website are always enabled" how can I change this?. I mean, the CNAME and A records are the same for non SSL but, will it work if I unpublished my site and manually add the DNS records and then publish the site again?

[@milkmoonstudio]

Try the CNAME in Cloudflare with: proxy.webflow.com

[@melbournefunctionalmedicine]

Great video! Thank you kindly 🙂 We'd been using an s3 Cloudfront setup, but this is a way more elegant solution. Am I correct in understanding that when I use the Webflow file, in your case: assets.website-files..., the SEO juice flows to the Webflow bucket? Assuming that is true, how does using cassette impact on that? Will the image url ultimately (like when someone opens up image in new tab) be assets.website-files, or the cassette created subdomain? Ultimately I want to retain any link equity for assets and images I have made, and not just pass that on to Webflow.

[@melbournefunctionalmedicine]

So I just went ahead and did it all, and it looks like the image ultimately uses the new cassette subdomain. Do you know if cassette is publishing a sitemap for the subdomain? If not, any ideas on how to do it in this context? Does this also mean we need to create a new GSC property because we now have a new subdomain? If I am thinking about this right from an SEO perspective -highly likely I am not- this means a bunch of link juice is being built up for images belonging to the cassette subdomain. How can we move that link juice along to the parent domain? Sorry for bombarding you, I am just super excited to have found this, as it could solve problems we've spent hundreds of hours working around!

[@milkmoonstudio]

Hi, and yes, Cassette's Cloudflare worker will find the website-files urls and replace them with the subdomain urls that Cassette creates. So all images will be on your domain. It does sometimes miss them in the src set, so lets say there are 4 breakpoint image sizes that Webflow generates, it might miss one in the middle. You can either use an image embed with the Cloudflare image resizer, just live with a missed image here and there that still goes to website-files, or switch off the src set generation in Webflow. Use DrFlare in Chrome to see what's being missed: chrome.google.com/webstore/detail/drflare/pibckhncbjabhlomohgcdedacopeooml?hl=en Check out the blog post for more detail on all that: short.milkmoonstudio.com/Muo

[@milkmoonstudio]

@@melbournefunctionalmedicine It does not create a sitemap, essentially you can access anything in Website-Files through the Cassette sub-domain, it's just proxying all website-files content. You could find my site files through your sub-domain. I did at one stage get bored, and used a php crawler on a testing server to create a sitemap of all content my Cassette generated sub-domain, and then I used the Quick App in Cloudflare (also by the guys who built Cassette), to route the sitemap.xml file to my milkmoonstudio.com domain and a secondary content sitemap, but I don't think there's really any benefit in doing that. I was just playing around to see if I can generate a sitemap and move that from the dev environment to my domain by routing it with Quick.

[@AjayChandru-f3d]

What is your mobile site speed ?

[@milkmoonstudio]

To be honest, it depends, Cloudflare's cache isn't primed, meaning if you run a test from a location that hasn't been visited by a users in the edge cache lifetimes you set, the cached data is moved to that nearest cache location when the test is run. Sooo, you'll get a better result if you run 2 for example, at least isn theory. So here you can see one from this morning, incidentally the first one, which means the edge had a copy as it seems pretty good to me: share.milkmoonstudio.com/Mn1bd7tW here you can see the tracked history, consistently above 80%, but yeah, it varies: share.milkmoonstudio.com/R0w7xVMD

[@milkmoonstudio]

As an aside, to check your setup and see what's being missed by Cassette or Cloudlfare etc, use the DrFlare Chrome extension: short.milkmoonstudio.com/qm4

[@theobanner]

Hi there, I am having real trouble at this step: 1. Create a sub-domain on your domain where Cassette should put the files from Website-Files.com (or whatever Webflow I using for your files, just inspect the page or open an image in a new tab to check the URL), 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. what is website-files.com? its not a valid website apparently

[@milkmoonstudio]

Website-files is one of Webflow's CDN domains. They don't spin up a new AWS CDN for each project in Webflow, so all content for everyone sits of a few rather random ones. Our current CDN is assets-global.website-files.com. So our Webflow hosted images, CSS, Javascipt etc sits somewhere on assets-global.website-files.com, like our favicon here: assets-global.website-files.com/63565c108c96756a59b92502/63590045b3c62b40a4d15712_Favicon.png You need to cache that somehow, so Cassette stores in on a subdomain on Cloudflare and rewrites all the URLs to the ones cached on your subdomain.