How to get browsers to only download CSS/Javascript when it changes?

Question

I had an epiphany earlier when reading codinghorror. On a content website (blog/forum/website) the basic things rarely change if at all. So I was wondering if there was a way to cache them and only re-download if something changes?

I guess there's two questions here:

1. Do browsers cache CSS/Javascript, if so how long, can I change how long?
2. Do I have to write a simple Javascript program that checks if the CSS/JS changed and download if necessary or is there a framework that handles it?

Answer 1

You can use your .htaccess file achieve this. FYI This is exactly what programs like YSlow! and Google page speed tell you to do when they talk about setting far future expiration dates for static media.

I use the following code, which sets the cache expiration date to 2099, removes entity tags and enables gzip. Googling for this kind of thing will throw up all sorts of other ways to achieve the same result and I'm certain most webmasters have their own favorite way of doing this.

Copy/paste the code into your .htaccess file and upload.

#####################################################
# CONFIGURE media caching
#
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|ico|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 15 Apr 2099 20:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css|php|html)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
#
#####################################################

Answer 2

Yes, browsers do cache CSS and JavaScript. Toomanyairmiles has already shown you one way to set the cache lifetime of CSS / JS files in an Apache .htaccess file; another way to do it is to use mod_expires:

ExpiresActive On
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType text/css "access plus 1 week"

This tells browsers to cache any CSS / JS files for up to one week — that's long enough to keep requests for such files to a minimum, but still short enough that you won't have to worry about someone's browser retaining an old style sheet from last year in its cache.

(Of course, this only works if your server is using the correct MIME types for these files, but if not, that's a problem which you should fix anyway.)

---

Now that you've set a long cache lifetime for your static files, the next problem you'll face is getting them refreshed quickly when you do change them (as you almost surely eventually will). A common solution is to append a dummy query string containing a revision number to the URLs, like this:

<link rel="stylesheet" type="text/css" href="/static/style.css?v001" />

The server will ignore the query string (since the URL points to a static file), but the browser will treat it as part of the URL. That way, after you've updated the style sheet, you just need to remember to change the version number to get browsers to load the new style sheet instead of the old. (If you want to get really fancy, you can use a script to generate the version number automatically based on the last modification timestamp of the file.)

In fact, the StackExchange software on this site uses something very much like this trick. If you look at the source of this page, you'll see that the main stylesheet URL looks like this:

http://cdn.sstatic.net/webmasters/all.css?v=e42c8b75839a

Here, the ?v=e42c8b75839a is presumably a version identifier which changes whenever the style sheet is updated. Looking at the HTTP headers e.g. in Firebug, you can also see that the style sheet has a one week cache lifetime (max-age=604800) like I suggested above.