How to use Webflow with Cloudflare - New How-To Video Available in the comments

[@newperspectivesmotivational]

Nice guide! I have a question. A client of mine has a long of heavy images on their landing page and a pretty big audience. I’m concerned that the bandwidth restrictions Webflow has will be reached really fast. Can I have Cloudflare CDN to host the static images on the landing page to reduce the Webflow bandwidth usage? Sorry I’m new to hosting. I really appreciate any feedback!

[@j8kes]

Depending on the cache rules you set under page rules, the user will hit the Cloudflare cache for the cache lifetime of the image. It's also depends on whether the image has been cached on the nearest edge cache location, but overall bandwidth can be reduced drastically depending on your rules and settings. Taking it a bit further, adding Argo and Cache Reserve will also extend cache lifetimes even more and help it use tiered cache and better routing.

[@newperspectivesmotivational]

Thank you very much for your answer. I noticed that Cloudflare apps has been deprecated. Is the only way to do this using Cloudflare Workers now? @@j8kes

[@ob894]

This is super helpful thank you! I'm having some issues with my drop-down menus after transferring everything hosted on Webflow over to my assets subdomain using cassette - any idea what could be causing that? The issue is they no longer work! i cant click them to show the content. infact alot of my javascript isnt working anymore (i.e. smooth scroll)

[@milkmoonstudio]

Hi, I'd suggest disabling Rocket Loader in Page Rules and speed settings, purging the cache on Cloudflare and the browser. Rocket Loader is usually the problem with this kind of thing. It chooses how to load your scripts and changing the order and delaying them can have that effect. Once you identify what it is, you can create a page rule where it Rocket Loader is turned off for the culprit and drop that right at the top of your rule list. It's also possible to exclude other scripts by adding data-cfasync="false" to a script to exclude the script for Rocket Loader:

[@efficientapp]

This is super interesting, what a creative workaround! Genuinely baffled why Webflow fights against Cloudflare in a sense? Is this for competitive reasons? Like does Webflow eventually want to offer some of this stuff in the future at a higher cost? I think Webflow is partnered with Fastly, right? It just seems so silly that they don't make this easier natively. Would be curious to hear your thoughts on why this might be the case. Appreciate your help in this video!

[@milkmoonstudio]

I'd say it's mostly due to cost, cheaper and easier for them to keep everyone's files in their own CDN (website-files.com or whatever) than having it on your own domain, and then probably to some extent also their relationship with Amazon.

[@ironfurniture]

Great! Thank you very much!

[@milkmoonstudio]

Glad it helped!

[@we-r.studio]

Thanks for the tutorial, very useful! I'm looking to use Cloudflare mainly to improve my website's performance on mobile. I see you don't have a great score on mobile either with Lighthouse, but you haven't shown how to solve the problem. Can we optimize mobile performance with Cloudflare? Thank you!

[@milkmoonstudio]

Hi, and yes you can depending on the issue, so things like Mirage and having Cloudflare images resizer optimising for mobile sizes help a lot. My major issue is DOM size and I've just been to lazy to sort that out in the Webflow project itself. With our site it's mostly the Load More on projects that's inflating the DOM, so I either have to split it into more page, or rework the structure to bring down the amount of nested elements to bring it below the DOM limit. It really depends what you're being flagged for on the pagespeed results.

[@we-r.studio]

@@milkmoonstudio Hello, Thank you for your answer, I understand better. The main remarks for my website on Page Speed Insights are : "Eliminate Render-blocking resources" (CSS file of the site, already compressed). "Serve static assets with an efficient cache policy" "Avoid enormous network payloads" I don't know if CloudFlare could help me with this? I can't find any documentation about Webflow and Cloudflare except your video. Thanks

[@MegalodonEG]

Does this works with Webflow Membership (Login/members pages ..etc)? Thank you

[@milkmoonstudio]

It does, but you don't want it to. You're going to want a create a rule that applies all the optimisation but no caching for gated content as the cache is public and you obviously don't want that. So Polish, Mirage etc Yes, Caching No and then just create a wildcard rule that would block all the content in your user folders or whatever you're using for gated content.

[@MegalodonEG]

@@milkmoonstudio Thank you for the fast reply, will try it!

[@milkmoonstudio]

Latest updates to this video can be found here: kzbin.info/www/bejne/rne7cqeeopKLZtU