Prevent your CSS and Javascript files from being cached

Sometimes you just don’t want your CSS or Javascript files to be cached. That’s why I use the following code snippit to prevent this.

Sometimes you just don’t want your CSS or Javascript files to be cached. For instance, I don’t feeling like having to explain to a customer how to disable their cache during the development of their new website whenever they have early access or want to take a peek and don’t see the desired changes I already implemented, just because they have some greedy cache setting.

In those cases I have to fire up another browser on another OS ( I work with Firefox on OS X, most clients just use Internet Explorer on Windows ) so I can guide them step-by-step through the process, which is pretty time-consuming. That’s why I use the following code snippit to prevent my CSS and Javascript files from being cached.

<link href="/css/stylesheet.css?<?php echo time(); ?>" rel="stylesheet" type="text/css" />

This results into something like this.

<link href="/css/stylesheet.css?1281262375" rel="stylesheet" type="text/css" />

The timestamp behind the CSS file now changes every second so every time the page is loaded a different timestamp will appear which prevents it from being re-used from the users’ cache. This also works perfectly for Javascript files.

Please note that this is undesirable for a production environment because you want fast load times in production. So only use this during the development or testing phases for your website or web application.

Author: Luc De Brouwer

Mild-mannered software engineer, Nine Inch Nails lover, gin drinker, cat person, and somewhat of a geek. Ron Swanson is my spirit animal.

13 thoughts on “Prevent your CSS and Javascript files from being cached”

  1. Just a thought here, but could this not every easily be taken to a production environment simply by using a variable that has a version number and echo that instead of the time?

    1. Sure, as long as you don’t have to change it too often. I’ve seen people using the filemtime() of the CSS or JavaScript file but that tends to get really slow if you get a lot visitors, which could impact your usability severely!

  2. I use the version number like Alex suggests as well. My deployment script generates a new version number on every release. This does not have a measurable influence on the performance. The user will still have the performance advantage from caching. The javascript and css files are also concatenated and compressed by the same scirpt. I use don’t have to use the version, concatenation and compression during development. It took about an hour to google about it, find the tools and create the script.

  3. I thought that the Ctrl+F5 combo (that is universal to all browsers) refreshes the page and bypasses the cache.. Wouldn’t this be easier to explain to your customers??

  4. By the way… if you’d like to make a hard-core version on preventing javascript/css caching but you also like to prevent the reload of your source on every page call, you can try to make a kind of virtual path with url rewriting (exp. mod-rewrite -> apache)
    Such an url could look like this: http://www.domain.com/css/12345/styles.css
    the rewriting module will change this to -> http://www.domain.com/css/styles.css with the benefit, that you only must change the revision of the style sheet (for example in a global config file) and you can ensure, that every visitor of your page get the right version.

  5. Thanks for an excellent solution. My issue was that I had Javascript RSS feeding the main page but all js scripts cached. The js was being cached and the RSS was not being updated. Your fix works perfectly. I spent a day scratching my head and trawling the web.

    Cheers! (next round’s on me)

Comments are closed.