Join our webinar and get expert insights on how to pass LCP →
Optimizing your website’s performance without a solid caching policy in place is like trying to build a house on quicksand.
You can use the best materials and tools, but when your foundation isn’t rock solid, you will always feel like something hinders your progress.
Your caching policy is the backbone of your website’s exceptional web performance. If you have a proper caching system, you can drastically improve your site’s speed.
Conversely, without a good working caching setup, your visitors’ requests will lead to cache misses, which in turn will slow down your page load time.
And cache miss is just one of the topics that will cover in the following lines along with:
Before delving into the world of cache hits and misses, it’s essential to understand how caching works, what purpose it serves, and why it’s considered the best speed optimization strategy.
To understand caching, we need to take a step back and follow the whole process that takes part behind the scenes when a visitor requests your site.
When you have 10 visitors who simultaneously request your site’s files, there shouldn’t be a problem, and your server can handle them pretty easily.
However, this model doesn’t work when 100,000 visitors want to visit your website.
Servers have a limit on how many requests they can handle simultaneously, and every request after that limit goes into a queue, resulting in longer loading times for your visitors.
That’s where caching comes in.
In a nutshell, caching is the process of saving a copy of your site data (HTML, CSS, JS, images, etc.) to a different location called web cache.
The web cache plays the role of an intermediary between users and your origin. That way, their requests are served from the cache and not retrieved from your server.
As a result, your pages load way faster.
You can find numerous types of caching classifications. But for the purpose of this article, and to understand when cache hits and misses occur, we will take a glimpse at the two most popular types - browser and proxy caching.
Each browser has its own caching policy, and it can store data locally on a user’s computer.
That’s useful because it makes loading a previously visited page blazing fast. In fact, browser caching is the main reason why the back and forward buttons can work their magic.
Unfortunately, browser caching is limited to operating per device. But its biggest advantage is that it can save entire network requests, which makes it a must-have.
Proxy caching helps alleviate the load on the server and deliver relatively faster content to end-users. The best-case scenario is when proxy caching works hand-in-hand with browser caching.
Proxy servers are distributed all over the world. They are usually maintained by CDN (Content Delivery Network) providers.
Proxies are intermediaries between the user and your origin server. You can use them to cache content on different locations, and that way, your content will be closer to the users, reducing latency and network traffic:
Unlike browser caching, proxy server caching isn’t limited per device, and it can simultaneously serve content to multiple users.
That’s the gist of caching. It’s a nuanced topic, and there is much more to be unfolded - advantages and disadvantages of the different caching types, how to set up caching rules, and more.
But that’s not the focus of this article.
If you want to dive deeper into the topic, you can check our article - Web Caching 101: Beginner's Guide To HTTP Caching (Examples, Tips and Strategies)
Or watch our YouTube video:
For now, it’s important to remember that If the requested data is not found in your web cache, that’s when delays and issues start to occur. This brings us to a cache miss.
A cache miss occurs when a system, application, or browser requests to retrieve data from the cache, but that specific data could not be currently found in the cache memory.
When a cache miss occurs, the request gets forwarded to the origin server.
Once the data is retrieved from the origin, it is then copied and stored into the cache memory in anticipation of similar future requests for that same data.
There are multiple reasons for a cache miss to occur.
For instance, the specific data was never cached in the first place.
Another possibility for cache miss is that the cached data was removed at some point.
Again, there are several things that might have led to that scenario - more space was needed, an application requested the removal, or the Time to Live policy on the data expired.
We will touch more on Time to Live later in the article.
Whatever the reason might be, the truth is that every cache miss leads to longer latency, slow load times, bad user experience, and unsatisfied visitors.
However, I don’t want to leave you with the impression that you need to achieve cache hits 100% of the time. That’s not realistic.
What’s more, there are some cases where cache misses are necessary, as you might need to ensure that the content you serve is always up-to-date.
For instance, a news website like bbc.com can change its home page content several times throughout the day as breaking news needs to be reported. In this case, a cache hit means that their readers didn’t see the latest version of their website, and respectively - they missed the latest news.
So there is an upside to the occurrence of a cache miss.
However, if you don’t have a news website and don’t change your content regularly, you should aim to keep cache misses as low as possible, and cache hits as high as possible.
A cache hit occurs when the requested data is successfully served from the cache.
For instance, if a user visits one of your product pages that’s supposed to display an image of the product you sell, their browser will send a request for this image to the cache (browser or CDN). If the CDN has a copy of the image in its storage, the request results in a cache hit, and the image is sent back to the browser.
Cache hit ratio measures how many requests a cache has delivered successfully from its storage, compared to how many requests it received in total.
A high cache hit ratio means that most of your users’ requests have been fulfilled by the cache, which in turn means that they experienced faster load times.
You can calculate your cache hit ratio using this formula:
However, that might not be needed as most CDN providers calculate this for you.
NitroPack’s dashboard display this information as well:
As a general rule of thumb - a cache hit ratio of 80% and higher is a good result as it means that most of the requests are served from the cache.
Anything below 80% on static websites indicates an inefficient caching policy.
According to Cloudflare, one of the biggest CDN providers in the world:
The global Cache Hit Ratio for NitroPack is 90%. And roughly 70% of all NitroPack users experience a Cache Hit Ratio of 80% or higher.
You can take specific steps to reduce the number of cache misses and hence increase your cache hit ratio.
The cache-control header allows you to set a myriad of different caching rules in order to optimize your content’s serving.
Some of the rules include:
You should set a Time to Live (how long the cache will hold onto your data before it retrieves updated information from the origin) that best fits your content.
For instance, if an asset changes approximately every two months, a max-age header of 50 days may be appropriate. However, if the asset is changed on a daily basis, you may want to use a no-cache header.
You can find more information on cache control headers, cache freshness, and validation in our YouTube video:
Running multiple ad campaigns (e.g., Facebook ads, Google ads, etc.) generates different URLs with specific UTM parameters.
As a result, you have a single page with multiple variations (different UTM parameters) that need to be optimized.
That is a problem as each URL variation is considered to be a unique object, and every request will be directed to the origin server.
Accordingly, each request will be classified as a cache miss, even though the requested content was available in the web cache.
This leads to an unnecessarily lower cache hit ratio.
After everything we’ve covered, the whole process of achieving a high cache hit ratio might sound a bit overwhelming.
The good news is that if you are working with a CDN provider, most of the stuff I mentioned, like cach-control headers, might be already taken care of for you.
For everything else, you can use a caching plugin.
For instance, NitroPack comes with out-of-the-box features that guarantee our users’ high cache hit ratio. This includes:
But you don’t have to take my word for it. Test NitroPack for free and see its impact for yourself.
Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.