What Is Cache Busting?

Imagine you're browsing the internet, and you come across a website that looks like it hasn't been updated in years. The fonts are outdated, the images are pixelated, and the layout is just plain ugly. It's frustrating, right? You wonder why the website owner hasn't bothered to update it.

Well, one reason might be that the website is relying on cached versions of its files. This means that even though the website owner has updated their CSS or JavaScript files, your browser is still loading the old, cached versions. This is where cache busting comes in – it's a technique that web developers use to ensure that users always see the most up-to-date version of a website, no matter how many times they've visited it before.

In this blog post, we'll go over everything you need to know about cache busting.

What is cache busting?

Cache busting is a technique used by web developers to force the browser to load the most recent version of a file, rather than a previously cached version. When a static file gets cached it can be stored for very long periods of time before it ends up expiring. This can be an annoyance in the event that you make an update to a site however, since the cached version of the file is stored in your visitors' browsers, they may be unable to see the changes made. This is due to the fact that a visitor's browser will locally store a cached copy of your static assets given that your website is configured to leverage browser caching.

Cache busting solves the browser caching issue by using a unique file version identifier to tell the browser that a new version of the file is available. Therefore the browser doesn't retrieve the old file from cache but rather makes a request to the origin server for the new file.

Why is cache busting important?

Cache busting is important for several reasons:

• Consistent user experience: When a user visits a website, they expect the website to look and function the same way every time. If a cached version of a file is causing issues, the user may have a negative experience and be less likely to return to the website.

• Accurate analytics: If a cached version of a file is being loaded, it can skew analytics data, making it difficult to accurately track user behavior.

• Website updates: Cache busting ensures that users are seeing the most up-to-date version of a website. This is particularly important for websites that frequently update their content or make changes to their design.

How to use cache busting?

Cache busting works by changing the URL of a file, forcing the browser to treat it as a new file and download it from the server. There are several techniques that can be used for cache busting, including:

1. File name versioning

One of the most common cache busting techniques is to add a version number to the file name itself. For example, a CSS file with the filename styles.css can be modified to style.v2.css. When the file is updated, the version number is incremented to style.v3.css, and so on.

This technique is particularly useful for websites that use a content delivery network (CDN). The CDN can be configured to automatically cache the new version of the file and serve it to users.

2. File path versioning

File path versioning involves adding a version number to the filename of the file being referenced in the HTML, CSS, or JavaScript file. The version number is typically a timestamp, a hash value, or a simple incrementing number.

For example, let's say you have a CSS file called styles.css that you want to cache bust. You could create a new version of the file called /v2/style.css and update the HTML file to reference this new version. Then, if you make changes to the CSS file, you can create a new version called /v3/style.css and update the HTML file again to reference the new version.

3. Query strings

OAnother cache busting technique is to add a query string parameter to the URL of a file. For example, a CSS file with the URL https://example.com/styles.css can be modified to https://example.com/styles.css?v=2. The ?v=2 query string parameter tells the browser that this is a new version of the file, and it should be downloaded from the server.

The value of the query string parameter can be any string, such as a timestamp or a version number. As long as the value changes each time the file is updated, the browser will treat it as a new file and download it from the server.

Both file name versioning and file path versioning are recommended cache busting methods. They do not interfere with any caching mechanisms and can be easily updated to reflect a modified file.

Query strings on the other hand, have been known to cause caching issues. Some proxies or CDNs aren't even able to cache files that contain query strings and it is recommended not to use them. Additionally, If you run your site through a site speed test, it will likely return a suggestion to remove query strings. Therefore, when using cache busting, try to use file name or file path versioning wherever possible. For whichever method you choose to use, ensure that once the file name or path is modified you also update the HTML which references said file.

Using cache busting with a CDN

If using either file name or file path versioning there will be nothing to configure when using cache busting in conjunction with a CDN. However, if you're using query strings and your CDN has the ability to ignore or allow query strings, you have a couple of options available. With KeyCDN you have the option to ignore query strings. When the Ignore Query String setting is enabled, this setting tells the CDN to view the request as if there is no query string present. The cache therefore replies with a cached version of the asset even if the query string differs.

However, if this setting is disabled, the CDN will honor all query string variations and treat them as they are each a separate file. Therefore, if you request the following:

• https://example-hexid.kxcdn.com/style.css
• https://example-hexid.kxcdn.com/style.css?ver=1
• https://example-hexid.kxcdn.com/style.css?ver=2

Each variation will be cached individually even if the origin returns the exact same response. This however, it not a recommended method as the cache gets populated with unnecessary versions of the same file as well as for other reasons mentioned above.

Cache busting example

To help better illustrate cache busting, consider the following example to help better explain what is cache busting.

1. Let's say that you have a CSS file (e.g. style.css) and you set the expires value for that file type to 1 year. This means that once cached locally on the user's browser, the browser won't check the origin server again for 1 whole year to see if any updates have been made to the file.
2. Three months down the road you decide to make a change to the style.css file. Therefore if you make the change, and reupload it to the server under the same name, the browser won't know the difference and will keep delivering the original style.css file.
3. On the other hand, if you implement cache busting, you would rename the updated file to something like style.v2.css. Therefore once you have updated the page's HTML to reflect this change, the browser will know that there is a new file that should be retrieved and it will start using it right away.

Using this method you can take advantage of setting high expires values while continuing to deliver the most recently updated changes to visitors.

Potential issues with cache busting

While cache busting is an effective way to ensure that users are always seeing the most up-to-date version of a website, there are a few potential issues to keep in mind.

1. Caching overhead: Cache busting can increase the amount of data that needs to be transferred between the server and the client. Each time a file is updated, a new version must be downloaded, even if the changes are minor. This can result in increased bandwidth usage and slower page load times.
2. CDN compatibility: If you're using a content delivery network (CDN), you may need to configure it to work with your cache busting technique. Some CDNs have built-in cache busting functionality, while others require you to configure it manually.
3. Browser compatibility: While cache busting is supported by all modern browsers, there may be some older browsers that don't support it. If you need to support older browsers, you may need to use a fallback method such as adding a timestamp to the URL.

Conclusion

Cache busting is an important technique for web developers to ensure that users are always seeing the most up-to-date version of a website. By changing the URL of a file, cache busting forces the browser to download the new version from the server, rather than relying on a cached version. There are several techniques for implementing cache busting, including query string parameters, file name versioning, and file path versioning. While there are a few potential issues to keep in mind, cache busting is a valuable tool for ensuring a consistent user experience and accurate analytics data.