Whenever you’re debugging caching issues, one valuable source of information are the HTTP Cache Headers that are present in the requests. There are multiple ways to see what headers are sent with your requests. We’ll show you two methods of obtaining them.
Method 1: using your browser
Most modern browser come with some kind of developer tools. You can use these to get a plethora of information about the website you’re visiting. One of the things you can check is the headers sent and received with your requests. For people that aren’t comfortable using command line tools this is the preferred method.
This is how you see them in Chrome:
First we open up the inspector. You can do so by right clicking anywhere on the page you want to inspect and choose the last option:
Now, we navigate to the Network tab. Make sure the checkbox at Disable Cache is checked, and reload the page. Find the first request made to your page (usually the top one) and click it. You will get more details on this specific request. The information we need is in the Headers tab:
This is how you see them in FireFox:
First we need to open up the Inspector. The quickest way to get there would be by right clicking anywhere on the page you want to inspect and choose the appropriate option:
When it’s open, we go to the Network tab, make sure the checkbox for Disable Cache is ticked, and reload the page. You will be presented with a (usually) large list of all HTTP requests made by the browser to render your page. Scroll all the way to the first request made (depends on sorting, but usually on top of the list) and click it. This will give you the needed information:
Method 2: using the command line interface
Most modern operating systems come shipped with a versatile command line tool known as cURL. There are of course different ways to get the information we need, but for simplicity we’ll stick to this tool for now. With cURL you can use the -I option to fetch only the headers of the resource you requested:
As you can see, this provides you with a lot more headers than just the caching headers we’re looking for. This is what makes cURL such a powerful tool at debugging various things, and not just looking at caching headers.
Checking if cache is working
Now that we know how to check cache headers, we can use that to see if cache is working for our own HTML cache, Cloudflare and Accelerated Domains.
Servebolt HTML cache
After enabling Static Files + Full-Page Cache in the Control Panel of your site and enabling HTML cache in our Servebolt Optimizer we can use the cache headers to verify if HTML cache is working or not.
In the highlighted area of cache headers we can see that x-frontend-cache: HIT . This indicates that the frontend-cache (HTML cache/Full-Page Cache) is working. x-frontend-cache: MISS indicates cache is not working on the request being sent.
Cloudflare cache
Cloudflare uses it’s own headers for cache and applies age: [time-in-seconds] to see how long cache have lived for.
cf-cache-status: HIT indicates that Cloudflare cache is working, while a cf-cache-status: MISS interprets cache is not working on the request being sent.
Accelerated Domains cache
Accelerated Domains cache can be checked in the same way, a working cache would look like this using Accelerated Domains:
Cache headers given by Accelerated Domains:
servebolt: acd indicates that the website loaded is using Accelerated Domains.
x-acd-cms: wordpress indicates the the CMS used by the website loaded is using WordPress.
x-acd-status: HIT indicates that cache is working for the request being sent.
x-acd-ttl: 86400 indicates how long cache will live for the given request. Accelerated Domains cache TTL can be altered using the Servebolt Optimizer plugin.
For more information regarding checking Accelerated Domains cache, please visit this article.
That’s it! Now you know how you can retrieve those HTTP cache headers and check that cache is working whenever you need them. Don’t hesitate to reach out to Servebolt Support if you should have any questions on enabling cache.
