What is a web cache and what are the benefits of cached data?
Before we get into what exactly caching is, you need to understand why caching is important. Ultimately, the main benefit of caching is faster web pages. And faster web pages lead to a better user experience, which means happier website visitors. Multiple studies have shown that users visit more pages on a website when it loads faster. For a media company, this could mean more articles and ads viewed, and for an eCommerce site, it means that customers view more products. In fact, it’s even been shown that faster web pages lead to increased conversions and revenue, and a web page delay of just 1 second leads to an average 7% loss in revenue. Faster web pages also mean search engines view your website more favorably, improving your SEO value and meaning more people find your site.
How does a cache work?
Now that we know why caching is important, let’s take a look at what it actually means and how caching makes your website faster. Every time you visit a web page, you are using your web browser to request and assemble that page from the website’s server. The server holds all the files needed to assemble that web page, including the HTML doc (instructions to build the rest of the page), the images, text, styling, and more. On average, your browser makes upwards of 100 requests back and forth from the website’s server to build a complete webpage.
Without any type of caching, whenever you visit that page you make those requests all over again. And every other person visiting that web page is making the same requests. If there are lots of people accessing a page at one time, the server slows down and takes longer to deliver the web page to everyone. And slow web pages = unhappy visitors.
Caching solves this problem by storing a copy of the assembled web page in a couple of different locations. This copy is temporarily stored somewhere other than the website server, so your browser doesn’t need to go all the way back there each time you load the same page. I’ll go through two major caching locations and how they work.
Browser Caching: Why do I need to clear my cache?
One way to cache content is to do it directly on the hard disk of your personal computer. Web browsers do this automatically for web pages you visit, so they don’t need to go back to the website server to download every single element again. For example, a website logo is often repeated on each web page. If that logo is in your browser cache, the browser doesn’t have to re-download it for every page on that website you visit. You may be familiar with the phrase “clear your cache” or “clear browser data” - this is one of the first things engineers ask you to do when troubleshooting why a web page isn’t showing up correctly, or you can’t see updates that have been made. Clearing your cache deletes all those files that have been saved on your computer, forcing your browser to go back to the website server and download a “clean” copy of the web page.
Cached data on a server
Web pages are also sometimes cached closer to the website server, rather than on your personal computer. When a website installs a cache on top of their server, they are keeping copies of the relevant files and instructions in that cache. When your browser requests data from the website server, it hits the cache first, and if the cache has a recent copy of the web page you requested, the cache delivers the assembled content directly to your web browser so your browser doesn’t have to travel back to the server. The website can control how often their cached content needs to be updated: if you are the first visitor to a web page after the cached content has expired, the cache will re-collect a new version of the web page from the server, then deliver that content to you and save it until that newer copy also expires. This graphic illustrates how it all works:
What is cache hit vs cache miss?:
To get into the terminology of all this, a “cache hit” means that the cache successfully delivered you the content the website has cached, whereas a “cache miss” means the cache didn’t have the relevant content stored and had to go back and request it from the server. The higher the cache hit percentage, the more often people are getting content delivered to them through the cache, meaning web pages are loading faster for them and there are less requests going to the website server, which also decreases server hosting costs for the website.
How does a Content Delivery Network come in to play?
Now that you’ve got the basics of caching, you may be interested in what type of content websites choose to cache and why, how you can set up a cache for your own website, and how Content Delivery Networks or CDNs are related to caching. We’ll cover all that in Part 2 of the Fundamentals of Caching: look for it on the section.io blog next week.
If you want a simple way to cache your web content, request a demo of section.io’s easy-install cache solution.