How to Debug Cache Misses in Chrome
Let’s talk about how to debug issues with your cache.
If you suspect that your cache isn’t serving the assets you request, you can confirm your suspicions in just a few clicks…
Let’s hop into our DevTools and take a peak at the X-Cache header.
How to Check Response’s X-Cache Header
If you open the network tab in Chrome DevTools and reload the page to see the network requests being made, you can click on the request for the asset you are interested in caching.
The network tab will show you the headers for the response, including X-Cache which is what we want.
This header tells you the result of the cache lookup.
Cache Miss
A cache miss means the request did go to the cache, but the requested asset wasn’t there so it forwarded the request to the origin to get the original asset from the source.
The header in your network tab might look something like this:
X-Cache: Miss from cloudfront
Cache Hit
A cache hit means the request went to the cache and found the asset there. The cache doesn't have to make a round trip to the source, saving precious time and delivering the asset to your browser more quickly.
A hit in your network tab might look something like this:
X-Cache: Hit from cloudfront
How to Fix a Cache Miss Issue
Most of the time you can fix a cache miss by simply reloading the page or resending the request.
This will usually do the trick because a cache will always miss when you look up a resource for the first time. Your cache will typically not store something unless it has been requested before. Once it has, the cache will store it and on the next request, you will get a cache hit.
A Bit Cache Fundamentals
To understand why a cache “misses” we need to understand fundamentally how a cache works.
A typical cache stores copies of certain information so that it can return that information without having to go all the way to the source to query or re-compute the original value of the information.
If you request some information that a cache has never seen before, it simply won’t have that information yet.
However after the cache registers a “miss” it will forward the request to the origin and then cache the result - allowing future requests to register as a cache hit.
Tips on Cache Misses
If you reload the page and notice that the X-Cache header is still showing a miss then there’s likely more going on.
There are typically 3 types of cache misses:
- Compulsory miss: resources that were never in the cache.
- Capacity miss: the resource was in the cache, but storage limitations caused it to be removed.
- Conflict miss: the resource was in the cache, but the cache was not associative enough, so it was forced out.
You may be running into a compulsory miss if the resource you are requesting is slightly different each time. If you request an asset at a URL with a slightly different path or query parameters, you will likely see a compulsory miss because the cache will interpret that as a different resource that it hasn’t seen before.
You could be running into a capacity miss if your cache is full and has deleted the previously cached resource that you are requesting. You can try requesting the asset again to see if it was cached once again. Or if that doesn’t work, increase the size of your cache.
And lastly, make sure the content you are trying to cache is allowed to be cached by checking the Cache-control header. If this is private then the thing won't be cached!