How To Verify If CloudFlare CDN Cached Your Website Html Content, CSS, Images, JS Files

If you use CloudFlare as your website CDN ( http proxy server ), you must want to check whether your web page resources ( css, js, images, html conent ) has been cached by CloufFlare or not. CloudFlare add a http header CF-Cache-Status with various header value in http response to tell you whether your request resource has been cached or not. This article will tell you how to check it.

1. What Type Of Resources Will Be Cached By CloudFlare Automatically.

If you do not make special settings, CloudFlare will only cache static website content which has below file extension. Please note CloudFlare will not cache html files by default if you do not make special configuration.

cloudflare default cached file extensions

2. Check CloudFlare CF-Cache-Status Http Header Value.

We can use various web browser inspector to check this header value. This example will use google chrome. You can read article How To View HTTP Headers, Cookies In Google Chrome, Firefox, Internet Explorer to learn other web browser inspector.

  1. Browse your web page url ( for example https://www.code-learner.com/can-not-find-django-tutorial-django-polls-templates-error/ ) with google chrome.
  2. Right click the web page, click Inspect menu item in the popup menu list to popup the inspector window.
  3. Click Network tab in the inspector window, then you can select website resoruce in left panel.
  4. First we select the first website resource which is the web page url. Click Headers in right panel, we can not find the CF-Cache-StatusĀ header, but we can see a cf-ray header, this means CloudFlare do not cache this web resource ( because this file extension is not included in the CloudFlare default cachable file extension list ). But you can set CloudFlare page rules to customize the caching option. We can also know this from another http header’s value, the cache-control header in below picture. It’s value contains no-cache, this means the page is not returned from cache, it is returned from original web server.
    cloudflare do not cache html pages by default so no cf-cache-status header in response
  5. But when you click the second web resource which is a js file, you can find the cf-cache-status header’s value is MISS. This means the js file is cachable but not cached in CloudFlare now. So it will be loaded from the original web server also.
    cloudflare cf-cache-status header miss value
  6. Now let us click the web resource gallery.min.css?ver=4.0.0 ( full resource url is https://www.code-learner.com/wp-content/themes/stargazer/library/css/gallery.min.css?ver=4.0.0), we can find this web resource cf-cache-status header’s value is HIT. This means the web resource is cached in CloudFlare server. The cached version will be returned.
    cloudflare cf-cache-status header hit value
READ :   How To Connect Directly To Your Origin Web Server Bypass Intermediary Proxies To View Original Http Headers

2. Other CF-Cache-Status Header Values.

Besides HIT, MISS and not specified, CF-Cache-Status header has other values such as EXPIRED, STALE, IGNORED, REVALIDATED, UPDATING. Below picture list all the header values with explanitions.

cloudflare cf-cache-status header values list

(Visited 19 times, 1 visits today)

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.