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.
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.
- Browse your web page url ( for example https://www.code-learner.com/can-not-find-django-tutorial-django-polls-templates-error/ ) with google chrome.
- Right click the web page, click Inspect menu item in the popup menu list to popup the inspector window.
- Click Network tab in the inspector window, then you can select website resoruce in left panel.
- 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.
- 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.
- 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.
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.