If you’ve ever tried to access a website or a resource online that has taken a long time to load, you’ll know that it can be frustrating. In certain cases, these long waiting periods are due to the fact that your request is far away from the website’s server and therefore the request must travel all the way to the server’s location and all the way back. This results in latency, and latency equals waiting time.
However, thankfully there are many methods available to webmasters to help improve their overall website performance optimization. One of these methods involves using a web cache. In this article, we’re going to discuss what exactly a web cache is, how it works, and why it’s important.
What Is a Web Cache?
A web cache is a device or software application used to store temporary copies of information received by the origin server. If you’re unfamiliar with cache in general, it is basically the process of creating a copy of the original resource and storing it locally with the intention of using it to satisfy subsequent requests faster.
Using a web cache has two main benefits:
- Reduces latency – Web caches reduce latency by providing a method to shorten the physical distance between the client and the resources requested. In the case of a CDN, multiple edge servers are spread across the globe to provide users with points of presence that are located near them.
- Reduced origin server load – Since the requested resources are delivered from a web cache instead of the origin server, this reduces the origin server’s load. With a reduced load on the origin server, this allows webmasters to be better prepared for traffic spikes and reduces the chance that the server will crash.
How a Web Cache Works
A CDN or, content delivery network, is a good example of a web cache. It sits in between the origin server and the client requesting the information and stores copies of resources from the origin. With a CDN enabled, the following process takes place when a request is made to a website.
- A client makes a request for a particular page, this page contains resources a, b, and c which must be fetched
- The request goes to the CDN to check whether or not these resources are already cached. There are two possibilities here:
- The resources are already cached, therefore the CDN’s server returns the requested resources to the client
- The resources are not yet cached, therefore the process continues to step 3
- The request now passes through the CDN’s server and goes directly to the site’s origin server
- Resources a, b, and c are fetched from the origin server
- On the way back to the client, these resources are cached and stored on the CDN’s server so that the CDN can deliver them upon subsequent requests.
Now, let’s say that you’re a webmaster using a web cache however, you’ve made a change to one of your assets. Since the asset is already cached, users are receiving the old version instead. There are a few ways to solve this issue.
- First, all web caches have a purge function that allows you to purge the entire cache so that you can more or less “start from scratch” and the cache will begin rebuilding again with the latest updates.
- Second, you can define expires header which will give your assets a particular time period for which they will be cacheable. Once that time period is up, the assets expire and fresh assets must be fetched from the origin.
- Third, webmasters can use a technique called cache busting to essentially give the updated asset a new name (e.g. style.v2.css). Since the asset has a new name, it will require that it be fetched from the origin by default.
Types of Web Caches
When it comes to caching web assets there are two primary types of caching methods you can make use of:
1. Browser Cache
As the name implies, browser cache happens at the browser level. All web browsers have caching mechanisms in place to locally store cacheable web assets so that they can be accessed faster. If you access the same web page a couple of times and look at the site’s assets from the Network tab and under the “Size” column in Chrome dev tools you’ll notice a
(from memory cache) message.
This means that the assets were able to be retrieved locally, therefore reducing the load time dramatically. Learn more about how to leverage browser cache.
2. Caching Proxies
Caching proxies are pieces of hardware that sit between the client and the server and deliver cached versions of assets from the origin. These proxies tend to sit close to network gateway on the server side. A proxy forwards a client request to the origin server thus hiding the client’s network address.
The downside to caching proxies is that they can be a little complicated. Users must configure their browsers correctly which may be a burden to some.
Surrogates is another term for caching systems that sit in between the client and the origin server. This can be a CDN or a reverse proxy like Varnish®.
Surrogates allow webmasters to have their content cached in locations which are closer to their visitors. In the case of Varnish®, they also tend to perform better than just using an origin server as the Varnish® server has a less intensive load. Therefore, if a new visitor that doesn’t have any browser cache built up yet, their request will be directed and fulfilled by the closest and fastest surrogate.
In summary, using a web cache method as mentioned above, is a great way to easily improve the loading speed of a website. Defining the proper expires values both for browser and intermediary caches will ensure that your assets stay in cache long enough that they don’t need to be regularly fetched from the origin but not too long that they become outdated.