Cache Busting Explained
Why Browsers Keep Outdated Files
Cache busting is a technique that forces browsers and CDNs to fetch a new version of a file by changing its address. Browsers store static files such as CSS, JavaScript and images for a period set by cache rules, so repeat visits do not download them again. That speed benefit becomes a problem when a file is updated but keeps the same address. Visitors continue to use the old copy until it expires. The browser side of this is covered in browser caching.
The fix is to make the new file look like a new file to every cache. The page that refers to the file is then updated to point at the new address, so the browser requests it without needing to know anything else.
Three Ways to Change a File's Address
- Query strings. A version parameter is added after the file name, such as style.css followed by a version number. It is easy to add, but some caches are set to ignore query strings, so the old copy can still be served.
- Versioned file names. The file is renamed, for example from style-2 to style-3. This works reliably, but renames must be managed by hand or by a build tool.
- Content fingerprinting. A short hash of the file's contents is added to its name. The name changes only when the content changes, so unchanged files stay cached for a long time.
Fingerprinting is widely used because it combines reliability with long cache lifetimes.
Example: A Menu Fix That Does Not Arrive
A site changes its main stylesheet to fix a broken menu, but keeps the same file name. Returning visitors still have the old file in their browsers, and the cache lifetime is a week, so they see the broken menu for days. New visitors see the fix straight away. The problem is that no cache has a reason to fetch the file again.
After the file is renamed with a new fingerprint, the page points to the new address. Every browser requests the new file, and the old copies are simply never asked for again.
Frequently asked questions
Does cache busting work for images too?
Yes. Any file that a browser or CDN caches can be versioned, including images, fonts and scripts. The page that refers to the file must also use the new address, which is usually handled by the same build tool or content system that generates the page.
Is cache busting the same as purging the cache?
No. Purging deletes copies from a cache, while cache busting changes the address so that old copies are no longer requested. Purging acts on stored copies; cache busting avoids them altogether. The two can be used together, and cache busting is usually the more reliable choice for static assets. Expiry rules themselves are set with Cache-Control headers, and the wider topic is in purge cache.