Cache busting
Definition
Cache busting is a web development technique used to force browsers or content delivery networks (CDNs) to load the most recent version of a file instead of serving a previously cached copy. It ensures that users always see the latest updates to assets such as CSS, JavaScript, and images.
Browsers and CDNs often store files to speed up load times, but this can lead to outdated content being displayed after updates. Cache busting solves this by changing the file’s name or URL whenever it is modified, making the browser treat it as a new resource.
Advanced
Cache busting is commonly implemented by appending version identifiers or hash strings to file names or query parameters. For example, style.css?v=2.0 or script.abc123.js. This approach ensures that when files change, their URLs also change, invalidating cached versions automatically.
Advanced cache busting strategies involve build tools like Webpack, Gulp, or Parcel, which generate unique hashes based on file content. CDNs and web servers may also integrate cache-control headers and expiration policies for optimal caching while supporting busting techniques. Proper cache busting balances performance (caching static assets) with freshness (serving updated files).
Why it matters
Use cases
Metrics
Issues
Example
A news website updated its homepage layout but found many readers still saw the old design due to cached CSS files. By implementing cache busting with hashed filenames generated through Webpack, the site ensured all users received the updated styles immediately, reducing support tickets and confusion.