Cache invalidation using the query-string, bad practice?

Question

On websites I make I usually invalidate the cache of CSS and JS using query-string params, like so:

Note: this is a screenshot from the chrome inspector, these query-strings are all appended automatically by a little system I made when being rendered into the browser.

A friend now told me that using the query-string doesn't cache as good as changing the filename itself or somewhere in the path before the filename. He also sent an article along with it and here they're mainly talking about bad performance when people use proxies.

However, the article is 8 years old. I wonder, is it still a valid point? Should I care? Is it really a bad practice?

Answer 1

It's true that query string cache invalidation is not exactly best practice. There are cases where it doesn't work... some browsers (supposedly), and your CDN might be set up to ignore the query string (serve the same file). But this doesn't mean it's not effective for development workflows or as a quick fix that scratches the itch.

Some folks feel strongly that query strings are not good enough. For a professional site (especially with continuous integration) you should use filenames based on last updated date or a hash of file contents.

Links on the topic...

• https://css-tricks.com/strategies-for-cache-busting-css
• https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring
• File Caching: Query string vs Last-Modified?