Two Six Code
November 10, 2010

Simple Cache Busting for CSS and JS

If you update your site’s CSS or JS it is a good idea to force browsers to download the latest version. If you don’t then your visitor’s browser may well load a cached version of the CSS or JS which can result in broken pages. Busting the cache is also really convenient when you are pushing out changes for review (you won’t have to ask your reviewers to refresh or clear their cache to see the changes). One simple way I like to do this by appending a query string to the link.

If you’re referencing the linked file in a server-side include (like a head.php include, for example) this technique allows you to make one small edit and avoid renaming any files.

Just place a query string at the end of the link. Put anything you want in the string, but some suggestions would be a timestamp or a version number:

<link rel="stylesheet" href="/css/example.css?v1.0" type="text/css" />

Then when you update the CSS file and want to make sure a visitor’s browser pulls down the latest changes just manually increment the querystring and you’re all set. In this example v1.0 changes to v1.1.

<link rel="stylesheet" href="/css/example.css?v1.1" type="text/css" />

Comments

Add a comment

Comments are closed on this entry.