How To Easily Detect CloudFlare Cache Hit
TLDR: Add a new custom header to Chrome Developer Tools for ‘cf-cache-status’ and see instantly which resources are cache hit and which are miss.
I was optimizing the performance of OGTester.com. The page is hosted (for now) at Fly.io with CloudFlare (CF) in front as a caching proxy. By default, CloudFlare does not cache HTML pages - only images are cached. My goal was to force CF to cache the main page using Caching Rule, but debugging the change was cumbersome.
The precense of the response header “cf-cache-status” tells you if the resource was cached or not. If the value is HIT then you know the Caching Rule is working.
This is a simple solution, but I did not find any mention of it anywhere else. You can add custom columns to the Network tab. Simply add a custom column “Response header” for “cf-cache-status”.
