Cache Busting

Nov. 12, 2020

None

In the internet today almost everything gets cached. Every website you visit uses some caches. Either it is only a webserver filecache or one of the big players on market like cloudflare, fastly, keycdn, acamai or any other. In these cache systems static files can be stored for very long periods of time before it ends up expiring. But what happenes if you make any change, since the cached version of the file is stored in your visitors' browsers, they may be unable to see the changes made.

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. There are few methods you can use for that:

  • File name versioning (e.g. resource.v3.css)
  • File path versioning (e.g. /v3/resource.css)
  • Query strings (e.g. resource.css?ver=3)

I know the query string option is the prefered one of wordpress or other cms developers and frontend designers. But depending on the CDN you use in front it is the worst option you can use. If you don't enable the "ignore query string" Option in your CDN it always ignores the cache and hits your origin server. And ignoring a query string in CDN can also cause some trouble, depending on how you serve your website/page. They are 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.

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 this file.