Features;
- Caching of all webpages
- Caching of most image assets
- Significant performance improvements
- Significant traffic reduction to the Webflow origin server
Requirements;
- Cloudflare - Free plan
- Cassette app - Free plan
Video walkthrough;
It's important to read through the documentation as well to ensure you understand the process correctly. Also, we'll update the text much more frequently than the video, so it's your most reliable source of info.
Basic Webflow Caching Strategy
When you consider your caching strategy, you want to think of your site as a well-defined set of content which has well-defined characteristics to identify them, and clear expectations around how often they'll change.
Understanding these things is essential to a good caching strategy.
I encourage you to devise your own strategy, but there are a few conveniences here since Webflow has a specific approach to its hosting design;
- The sitemap is always at /sitemap.xml
- RSS feeds are always named rss.xml
- Images are stored on a separate server(s), and can never be edited. If you change an image, Webflow uploads the new file and creates a new URL
- CMS data is always under a predictable path, like /blog/*
Outside of this, you want to think about your site's unique content as well;
- How often does the homepage change?
- What about other static page like About and Contact?
- Do you have "directory" pages like /blog?
- How often do you edit content in your CMS collections? Note this is not the same as adding content. If you add a new blog article, it will be uncached and seen immediately. If you edit a blog article, it will likely be cached and your changes will only be seen once the cache expires.
Config
Apps
Install "Cassette", looks like an old cassette tape
- Preview on Site
- ? Select FREE, or $8/mo if you want to cover all asset sources
- Assets subdomain - assets.DOMAIN ( e.g. assets.sygnal.com )
- Object storage host - https://assets-global.website-files.com
- > Commonly, but best to check your source HTML to verify where Webflow is serving from
- Object storage pathname - leave blank
- Install on all pages
Speed > Optimization > Content Optimization
- Cloudflare Fonts - ON
Caching > Configuration
- Caching level - Ignore query string
- Browser cache TTL - ( leave default )
- Crawler hints - ( optional, untested )
- Always online - ON
Cloudflare Page Rules
Your caching plan will be established in two ways-
- Through Cloudflare's page rules
- Through the default Cache and Speed settings you enable
When Cloudflare serves a URL from your site, it looks at the page rules in the order you've defined them, and it will use the first one that matches, ignoring the others.
For the purposes of caching, if no rules match, or if the matching rule does not specify a certain cache setting, then the default settings you've established under Cache and Speed will be used instead.
In the FREE plan, you're limited to 3 page rules, so we usually implement them as follows;
In the URLs where DOMAIN is indicated, use your own custom base domain without the www.
RULE 1: Ignore dynamic feeds ( /sitemap.xml & RSS )
URL - *DOMAIN/*.xml ( e.g. *sygnal.com/*.xml )
- Cache Level - Bypass
RULE 2: Cache assets ( Images )
URL - *assets.DOMAIN/* ( e.g. *assets.sygnal.com/* )
- Auto Minify - HTML, CSS
- > Do not enable auto minify for JS
- Browser Cache TTL: 8 days
- Cache Level - Cache Everything
- Edge Cache TTL - a month
- Automatic HTTPS Rewrites - ON
- Opportunistic Encryption - ON
RULE 3: Cache everything else
URL - *DOMAIN/* ( e.g. *sygnal.com/* )
- Auto Minify - HTML, CSS
- > Do not enable auto minify for JS
- Browser Cache TTL: a day
- Cache Level - Cache Everything
- Edge Cache TTL - a day
- Automatic HTTPS Rewrites - ON
- Opportunistic Encryption - ON
The finished configuration will be ordered like this;
Notes
IMPORTANT: Never use Cloudflare's auto-minify JS with Webflow's JS, in certain configuration it can break Webflow.js.
Understanding Edge Cache TTLs
Edge Cache TTL indicates how long an item can exist in Cloudflare's cache.
- A higher TTL means better site performance, since the cache is utilized more.
- A lower TTL means that changes to your content are seen more quickly.
- Because this is in Cloudflare's cache, you can clear it if you ever had to.
To set this value, your thinking should be...
"after I make a change, how long am I ok waiting before that's visible?"
Ideally you want that number to be as high as reasonably possible ( this improves your cache utilization ), but not so high as to cause issues for you or your users.
Understanding Browser Cache TTL
Browser Cache TTL is an additional level of caching on the user's browser. It tells the browser "you can cache this for X long."
Notes;
- It's up to the browser how long it actually caches
- You cannot clear the browser's cache remotely, so do not set this too high
- The primary purpose here is performance. For sites with extremely heavy traffic that are using advanced, paid caching plans, it can also reduce costs
Where are Webflow assets stored?
Well, it depends.
- https://global-uploads.webflow.com
- https://assets.website-files.com
- https://website-files.com
- https://uploads-ssl.webflow.com
