I set up a Cloudflare reverse proxy to get access to Cloudflare caching features and cutdown on my bandwidth usage.
The problem I’m running into is that I’m using Finsweet’s CMS Load as a “load more” button on my most popular pages, but Cloudflare seems to struggle to cache the paginated pages CMS Load creates.
When I adjust my Cloudflare caching rules to “ignore query string” I can get 90%+ caching almost immediately, but it breaks CMS Load; Cloudflare caches whatever CMS items initially loaded on the page, and then keeps serving up those items over and over when you hit the load more button.
The ideal set up would be Cloudflare caching a snapshot of all ~200+ CMS items and serving those items in the same order when you hit the load more button.
Any ideas on how to effectively cache paginated content with Cloudflare?
When you ignore the querystring in CF caching, it’s returning page 1 no matter which page is requested. That will break Webflow pagination, which is querystring-based. That in turn breaks FS Load.
You need to include the querystring in your cache key.
You likely won’t get any bandwidth saving here. Webflow doesn’t care about visitor count or HTML page bandwidth- which is all you can reasonably cache at the reverse proxy level.
WF only cares about asset downloads such as images, videos, Rive’s, custom fonts. But to cache these, you’d need a second worker just for assets ( which has problems, because WF is already caching these on CF ). And you’d need to modify every HTML page, CSS file, etc extensively to use your proxied asset URLs.
Overall it’s not practical. I’ve built a very extensive solution for this but it’s offline since WF’s migration to CF caching disrupted it.
Looks like Cloudflare is caching almost all images, but it’s not caching HTML. I think the problem is Cloudflare not caching all the unique query strings created with pagination, and/or the way Webflow has to load a new page with pagination.
Could a solution be to turn off pagination to cut down on Webflow bandwidth? It’s not good for page speed, but in theory that’s not a problem once Cloudflare caches the page.
I’m just cautioning you here because I don’t think you have the right info. Webflow hosted sites store all images under a different Webflow-owned domain, which you cannot reverse proxy. You’d need some fairly special engineering to accommodate that setup and Webflow’s changes July 2024 make it even more difficult.
Make sure you’re checking your WF bandwidth reports, but if you have found a solution that works, I’m keen to know the details.
If you did have it working, you would not be having any bandwidth issues at all, and you’d see about 99.5% coverage on caching.
Again, HTML isn’t counted in WF bandwidth metrics.
The point of pagination is that it reduces page sizes and bandwidth as well. Say you have 1k items, but only 20 per page, each with an image. If you’re familiar with Zipfs law [ statistics ], it also applies to web traffic and is pretty meaningful here.
If you’re using something like FS load, all of that content would be downloaded, but most likely not the images until the HTML is displayed. You can verify that on the browser’s network tab.
Two key things from your original post-
You need the full querystring in the cache key in order for Webflow pagination to work at all.
If you’re having bandwidth issues, your RP isn’t working correctly to cache assets. There are other ways that involve off-hosting background videos, large assets and custom fonts, plus heavy image optimization, which work great.
