What's the best way to version CSS and JS URLs?

Question

As per Yahoo's much-ballyhooed Best Practices for Speeding Up Your Site, we serve up static content from a CDN using far-future cache expiration headers. Of course, we need to occasionally update these "static" files, so we currently add an infix version as part of the filename (based on the SHA1 sum of the file contents). Thus:

styles.min.css

Becomes:

styles.min.abcd1234.css

However, managing the versioned files can become tedious, and I was wondering if a GET argument notation might be cleaner and better:

styles.min.css?v=abcd1234

Which do you use, and why? Are there browser- or proxy/cache-related considerations that I should consider?

Answer 1

Using the GET-style versioning, from a blank cache multiple URLs - e.g. style.css?v=123 and style.css?v=456 - would return the same content. However I can't see this would be problematic, especially since you'd only link to one at a time.

I think you'll find the GET-style much easier to maintain. You don't need separate files: just change the URL and browsers will fetch the CSS afresh.

UPDATE: on further research it appears that using a query string may stop browsers caching the files. However, if you are returning proper headers such as Expires this is not an issue.

UPDATE 2: the accepted answer points out that some proxies do not cache files with a query string. However this is based on old information; the particular issue they mention in Squid was fixed 7 years ago. Impressive Webs did a good write up on this.

Answer 2

According to Google's Make the Web Faster, pages with query parameters are not cached by many HTTP proxies.

Most proxies, most notably Squid up through version 3.0, do not cache resources with a "?" in their URL even if a Cache-control: public header is present in the response. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves.

So styles.min.abcd1234.css is the preferred solution. You can use an appropriate URL rewriting mechanism to turn styles.min.abcd1234.css into the easier to implement styles.min.css?v=abcd1234 transparently.

If you support HTTPS only, that advice does not apply, because proxies can't normally cache pages that are served over SSL.

Answer 3

Both will work equally well as a query string is considered part of the URL and by changing it you are in effect changing the name of the resource thus causing the browser to fetch a new copy of the file.

I say use whichever method is easier for you to maintain.

Answer 4

However, managing the versioned files can become tedious, and I was wondering if a GET argument notation might be cleaner and better

You can limit the versioned filename to the frontend/HTML (eg. styles.min.abcd1234.css) and maintain just the static file (eg. styles.min.css) in the backend without any version string, by using URL-rewriting to rewrite the versioned filename to the backend file.

For example, on Apache you can use mod_rewrite:

RewriteEngine On

# Rewrite "styles.min.<hash>.css" to "styles.min.css"
RewriteRule ^styles\.min\.\w+\.css$ styles.min.css [L]

The version string does not need to be passed through to the backend (as a query string), since this is only used for cache-busting in the frontend.

Or, more generally, for any .css or .js file that contains a lowercase hexadecimal hash (of at least 16 chars) before the file extension:

# Rewrite "<something>.<hash>.(css|js)" to "<something>.(css|js)"
RewriteRule (.+)\.[a-f\d]{16,}\.(css|js)$ $1.$2 [L]

You can apply a similar technique to the .min (minified) file. ie. Reference styles.<version>.css in the frontend, but rewrite to styles.min.css in the backend (if it exists), otherwise fallback to styles.css (in development).