Avoiding caching issues with CSS, Javascript and Image files

How to ensure correct caching of files accessed through your website.

You know the scenario, you've uploaded some new CSS, Javascript or image files to your client's website, and you ask them to have a look.  "It looks exactly the same" comes the response.  This is very often due to the fact that the files being used to display the page are being cached.

Caching can occur at many levels, most commonly in a user's browser.   Firefox, Internet Explorer, Safari and all major browsers are setup to cache files to ensure that optimal performance is achieved.  This means that rather than reloading the file each time someone accesses the page a local version of the file is used.  More often than not if the file is changed the new version is correctly loaded however it is not at all uncommon for an old version to be used instead.  It's not just the browser that cache files either, these might be cached by a Proxy server, running on an office network, or by an ISP.  So how do you resolve this problem.

I've lost track of the number of times in the past we've explained to people how to clear their cache, or asked them to do a full refresh of the page.  There is however a much more simple solution, by adding a querystring value to the end of the file, with a version number, you can ensure that the user sees the files you intend them to see.  As an example you might call a css file by using the url /css/style.css in normal circumstances.  To esnure the latest version is used you can simply append a querystring such as /css/style.css?v2.1, the browser will recognise this as a new file.  All you need to do is remember to change the unique querystring when you change the file.