WP Cache, CF Cache, Browser Cache, how to handle this properly?


I’m currently operating a WordPress site and I’m trying to wrap my head around all the different levels of caching and how to invalidate them.

Our site uses WP Rocket for local cache and Cloudflare (of course). Performance was good, but the main issue we had was clearing the cache was sometime a bit unreliable. I’ve been told many times that our users we not seeing our latest changes unless they performed some kind of hard refresh of the page (which many do not know how).

I’ve looked into it and what I found that Cloudflare was adding a max-age=1year header and I believe(d) this would prevent browsers from getting the latest content (as they would use the browser cache instead). There was an option to change for how long CF cached stuff and we’ve set it to “Respect Server Headers” (or something similar). It seems that our browser caching problem was solved, but how, all of our pages are getting a BYPASS CF-Cache-Status.

So now, I’m wondering, has anyone managed a similar situation ? Is there a combinaison of settings that would make the CF cache work, but also invalidates the browser cache when new content is posted ?


By default, Cloudflare caches your static assets (css, js, images etc), but not html files. The reason is exactly the problem you described here:
If Cloudflare caches html files, users will continue to see old content until the cache expires, unless you purge the cache manually. And for browser cache, not even that helps.

Cloudflare has a Wordpress Plugin (APO, 5$/month) that automatically purges the relevant resources from the cache when you publish new content.