Web Cache Guide
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, also known as a HTTP cache, is a mechanism used to store and deliver web content, such as HTML pages, images, and scripts, to users more quickly. When you visit a website, your browser sends a request to the server to fetch the page. The server then sends the page back to your browser, which displays it on your screen. However, this process can be slow, especially if the page is large or contains many elements.
A web cache works by storing a copy of the content on a server or on your local device, such as in your browser’s cache. The next time you visit the same website, instead of sending a request to the server, your browser can retrieve the content from the cache, which is faster and more efficient.
How a web cache works
A web cache works by intercepting requests for web content and checking to see if the content is already stored in the cache. If the content is available in the cache, the cache server returns it to the user without having to contact the origin server. This process is known as a cache hit. If the content is not available in the cache, the cache server will retrieve the content from the origin server and store it in the cache for future requests. This process is known as a cache miss.
Web caches use different caching algorithms to determine which content to store in the cache and how long to keep it. The most common caching algorithm is the Least Recently Used (LRU) algorithm, which removes the least recently used content from the cache when the cache reaches its maximum capacity.
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.
CDN caching
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.
CDN caching can significantly improve website performance and reduce server load, especially for websites with users located in different parts of the world. By storing copies of web content in servers located closer to the user, CDNs can reduce the time it takes for the content to reach the user and improve web page loading times.
CDN caching can also help improve website reliability and availability. If a server hosting web content goes down, the CDN can redirect requests to another server that has a copy of the content in its cache, ensuring that the content remains available to users.
Web developers can configure CDNs to control how long content is stored in the cache and how often it's refreshed. This can help ensure that the content is always fresh and up-to-date while still taking advantage of the benefits of caching.
Benefits of using a web cache
Using a web cache can provide several benefits, including:
1. Faster Web Page Loading Times
By storing web content in a cache, users can access content more quickly, which improves web page loading times. This is especially important for websites with high traffic volumes or large amounts of content.
2. Reduced server load
Using a web cache can also help reduce server load by reducing the number of requests that the server needs to process. This can help improve server performance and reduce server costs.
3. Improved user experience
Faster web page loading times and reduced server load can improve the user experience by providing a smoother and more responsive browsing experience.
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 DevTools 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.
3. Surrogates
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.
How to use a web cache
Web caches are used automatically by web browsers and proxy servers, so you don’t need to do anything to enable them. However, you can configure your browser to use a cache more effectively by adjusting the cache settings.
In most web browsers, you can adjust the cache settings by going to the browser’s settings or preferences menu. In the settings menu, you can adjust the size of the cache, the duration that content is stored in the cache, and other cache-related settings.
It’s important to note that web caches can sometimes cause issues, such as outdated content being served to users. To avoid this, web developers can use techniques such as cache busting mentioned above, which involves appending a unique identifier to the URL of the content, to ensure that the content is always fresh.
Summary
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.