How To Easily Detect CloudFlare Cache Hit

Annoyance

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.

At the time of writing this post, OGTester.com does 15 requests, and I did not want to check all of them one by one.

Solution

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”.

Here is a step-by-step guide:

0. Go to Chrome Developer Tools
1. Select the Network tab
2. Right click on the header
3. Select “Response Header”
4. Choose Manage Header Columns (you should not see “cf-cache-status”)

5. Add “Add custom header”
6. Add “cf-cache-status”
7. Click “Add”

Now you should have a new column, which shows you immediately the cached resources: