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 and How to Use Cache Busting?
Cache busting is useful because it allows your visitors to receive the most recently updated files without having to perform a hard refresh or clear their browser cache. From a developer’s point of view, using cache busting is beneficial so that the latest changes can be pushed out and become available to everyone immediately. There are a few methods you can use to take advantage of cache busting:
- File name versioning (e.g. style.v2.css)
- File path versioning (e.g. /v2/style.css)
- Query strings (e.g. style.css?ver=2)
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 / 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 string. When enabled, this option 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 option 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:
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.
- 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.
- Three months down the road you decide to make a change to the style.css file. Therefore if you make the change, and re-upload it to the server under the same name, the browser won’t know the difference and will keep delivering the original style.css file.
- 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.