Cache busting: What is it, and should you use it?

What is cache busting?

Cache busting, in simple terms, is forcing a browser to open the latest version of a website instead of an older one. To understand how that works, we first have to think about what a cache is and how it works.

What is a cache?

Every internet user accesses websites through a web browser, and the browser stores these sites in disk memory. The browser caches content to help make loading previously visited websites faster. You’re likely familiar with how to clear your cache to speed up a slow browser. The browser might keep a cached version of the website for months to a year so that it continues to load quickly for a long time. If the developer makes changes to the website, however, they might not load for that time period, and that will keep the site looking old and stale. That’s where a cache buster becomes useful.

What does a cache buster do?

A cache buster forces the browser to load a new version of a file rather than the cached version. In other words, it busts the cache. When a new version of the website is accessed, the browser then caches this updated file and uses it until it’s no longer the latest version.

Cache busting example

Suppose you want to update content often and have this reflected in the user’s experience. This example can help explain how cache busting can help.

• Imagine you have a CSS called example.css. Let’s say you normally perform style updates every year, and you may set your expiry so that browsers will cache this file for six months. That means once a user visits this page, their browser will save this version and won’t load an updated version for six months.
• However, you decide to make some significant style changes to the website just a month later. If you use the same file name, browsers won’t know that you made any changes and won’t load the up-to-date version from the origin server for as long as six months. They’ll keep seeing the old example.css file.
• By implementing cache-busting techniques, however, you can choose a different name for your new, updated file, like example.v2.css, to direct browsers to look for a new file.

Rather than setting a really short expiry for your files, you want to keep your websites loading quickly with long expiries. But when you do make changes, cache busting is an effective way to force browsers to update to new content.

Why is cache busting important?

Cache busting is crucial for web developers because it ensures that users get access to the most up to date version of a website. This is important for functionality and improving the user experiences in a number of ways.

Style and functionality

Web developers are constantly changing and updating websites to improve the user experience. The client may want to make seasonal or more frequent style changes to reflect products and deals, and updates to content can be crucial to their business.

Website performance

Cached versions can run into compatibility problems so cache busters work to keep files current. They also improve website performance by helping to reduce server load.

Analytics

Older, cached files can interfere with the collection of browser performance metrics. Data collection can be affected, and this can cause inaccuracies in your analytics.

Security

Security updates to your website may require users to access an up-to-date version, while cached files can leave them unprotected and vulnerable to security threats.

The bottom line is that cache busting is important to ensure that the link between users and websites is always updated and functioning at peak effectiveness.

How to use cache busting?

Developers can use different techniques to bust cache. All of them change a file’s URL so that the browser will ignore the cached file and load the new version from the server.

File path versioning

Many developers use file path versioning to bust caches easily. In this simple technique, you add a version number to the file name in the form of a subdirectory or a query. File path versioning helps the browser identify a new version of the file and load it instead of reusing the cached version.

Suppose you want to cache bust css with a file named example.css. You can make a new version called /v2/example.css and update your HTML file to reference it.

File name versioning

Rather than changing the file path, you can also simply rename files. This is a common cache-busting javascript technique because it’s easy to do and works well with CDNs. With a file called example.js, you can rename the new version example.v2.js, and that will make the browser show the updated file to the user.

Query string versioning

This much less commonly used technique for cache busting uses a query string parameter to let the browser know that a new file version is available. Developers can add a “?” and a string parameter that could be a version number or time stamp.

For example, a file named example.css could be updated to example.css?v=2 to indicate a new version.

While all three of these techniques are possible, file name versioning and file path versioning are more commonly used. However, with a huge website with a large number of files to keep updating, it can be hard to keep track of file names. With query string versioning, however, you might run into problems. Some CDNs can’t cache files that have query strings attached, which means you’d be permanently busting the cache using this technique.

Using cache busting with a CDN

If you’re using a content delivery network (CDN) to reduce bandwidth costs, improve load time, and increase content availability, you can use both file path versioning and filename versioning techniques for cache busting. Neither should cause issues with browser caching.

If you use query string versioning, though, you may find that your CDN can’t cache your files at all. In other cases, you may need to configure the CDN settings to ignore query strings so that caching will still be possible.

Potential issues with cache busting

Cache busting isn’t without its limitations and challenges. While cache busting ensures a balance between long caching with speedy updates, there are still some issues to work through.

1. Older browsers. While most new browsers support cache busting, at least when updated to more recent versions, some older ones may not. Developers may need to make a choice between supporting older browsers and busting cache.
2. Content delivery networks. Not all CDNs will automatically support cache busting. You may need to configure your CDN to allow for file path and filename versioning, and some won’t support query string versioning at all.
3. Bandwidth and speed. While it’s important to keep your websites updated, caching mechanisms help to reduce bandwidth use and increase load time. When you bust cache, you do the opposite, creating more pressure on bandwidth and slowing load speeds.

Ultimately, as a developer, you need to decide if implementing cache busting is the right choice for your website’s users’ experience.