Web Caching and Cache Busting

INTRODUCTION

“Caching” is a concept of storing frequently used data to a give quick access locations so that requesting of the data will happen faster. There are various types of caches like CPU cache, GPU cache, disc cache, and browser cache, etc. Content caching is one of the most powerful ways to improvise the user experience for your website. When it comes to a request and response, if the requested resource is found in the cache then it’s called as a cache hit. Similarly, if the resource is not found in the cache, it’s called a cache miss. Here we are focusing on the Web Caching and Cache Busting which is the crucial part to take into consideration while developing a website.

WHAT IS WEB CACHING?

Web caching is a core feature of the HTTP protocol utilized to minimize the network traffic by improving the performance of the web. Caches are found in each layer of a content journey right from the server to browser. Each browser has its own caching feature which is where the images and other web assets are stored for quick access later. The main purpose of web caching is to save time if requesting the same resource multiple times and also to minimize the bandwidth by reducing the data required over a network.

HOW DOES CACHING WORK?

At the time of a requesting data which is downloaded from the origin server, a copy is stored in the web cache for a particular period of time specified by the caching rule set. If the same data is requested by another user, the browser cache sends the previously stored content and the user request does not need to reach to the origin server again. Web cache flow:

PROS

Some of the advantages that caching bring are:

• Improved Response Time: Caching allows faster retrieval of the content because the entire round trip is not needed. The browser cache which is maintained close to the user can helps getting this retrieval quick.
• Low Network Usage: Content can be cached at the various stages of the network path between client and server side. When content is cached closer to the client side like in browser cache, it can make retrieval instantaneous.
• Continuous Availability of Data: In the case of network interruption, caching can be used to serve the content to the end user even when it is unavailable for a short period of time from server (origin point).

WHAT CAN BE CACHED?

Some of the most cache-friendly data of the most sites are:

• Media files
• Logo images
• Style sheets
• JavaScript files

All the above listed content changes infrequently, so it is a better to retrieve it using cache.

Some of the contents that you have to be careful while caching are:

• Frequently updated JS and CSS files.
• HTML pages.
• Rotating images
• Authentication requested content.

Many times, we are wondering about the reflection of the changes made with CSS/JS files although changes are deployed on the server. Say browser has a CSS/JS file cached since last six months and you want to change a CSS/JS file, for this you need to figure out a way of breaking the cache and forcing the browser to download a new copy. In such a case cache busting approach is more suitable.

CACHE BUSTING/VERSIONING APPROACH

It is browser which does the “web caching”. Most of the browsers will first ask the server whether it is mandatory to download CSS/JS file and the server responds back accordingly. Many a times server responds with the status 304 (Not Modified) which tells a browser to use its own cached copy.

Evidently, if you change the CSS/JS files on the server and instantly refresh the browser, the server may not have the updated changes and will respond with a 304 which will lead your browser to use its cached copy (i.e. oldest version of your file).

To get rid of it and to receive appropriate changes, adding version information (as a query string) at the end of the CSS/JS file link is probably a smarter way. To do this it is necessary to change a link in case a particular file is updated and hence time-stamping come into the picture.

• TimeStamping CSS/JS:To prevent caching of the scripts and style sheets, a timestamp is added to end of the href/src attribute. The main advantage of doing time-stamping is to change the link and let browser think this as a new file to load/download it fresh each time.You can use your platform specific code to retrieve the current time-stamp. TimeStamping CSS with the liquid template –

  <link rel="stylesheet" type="text/css" href="{{"main.css"}}?v={{site.time | date: '%Y-%m-%d-%T'}}">

  Which results like this:

  <link rel="stylesheet" type="text/css" href="main.css?v=2018-05-04-17:41:33">

Thus, time-stamping provides a better way to receive the changes on user end without worrying about refreshing a page again.

Conclusion

Now you have all pros and cons of how caching works in the browser and the cache busting/versioning approach. You can now set up all the appropriate caching policies which can help to speed up your web pages and give you a major enhancement with minimal work.

🔊 Listen