Far Future Expiration and File Versioning: Change the File Name or Add a Query String?

If you’re wondering what far future expiration is then odds are you haven’t spent much time looking into web delivery best practices.  Take a moment and read up.  I promise it won’t hurt and it will probably do you a lot of good.

We’ll use this blog as an example.  It has a total of eight images that may be loaded, three of which are external to this server (related to the PayPal ‘Donate’ button [please use it] and the Add-To-Any button).  The eight images comprise about 6KB worth of the page size with 2KB coming from the external ‘Donate’ button.  Then there are the stylesheets, between two and four (one extra to fix IE problems, one more if your version of IE is less than 7).  Those are about 16KB, but are gzipped to only require 3KB of bandwidth.  Then there are my two JavaScript files totaling 65KB uncompressed, 21KB gzipped.  All of these items need only be downloaded once.

So, of the total page size of 156KB (56KB compressed) for this article, around half won’t change with any regularity and falls within my control.  By setting a far future expires header on those items your browser won’t feel the need to check and see if there is a new version the next time you visit this site, saving both of us TCP connections.  When you first visited this site it told your browser those files don’t expire for ten years.

Sounds great, but what if I want to change, say, my CSS file?  Well in that case I need to change the file name so that your browser doesn’t think it already has a copy and will go ahead and download the changes.  This is generally accomplished in one of two ways: Change the filename or add a query string to the original filename.  But which is better?

Adding a query string to the existing filename is easy.  Especially in the case of a CSS file that is included once in a header file, such as this blog.  If you view the source you’ll notice I use this method.

<link rel="stylesheet" type="text/css" href="http://eric.biven.us/wp-content/themes/eric2/style.css?v3" />

Notice that “?3″ at the end?  That fools your browser into asking for the file again and my server just ignores that part of the request.  Now when you get this new version your browser again gets a response from my server saying “this file doesn’t expire for ten years”.

With that said, I prefer to change the filename.  Using a query string has the drawback that some internet caching proxies don’t cache files with query strings by default and others are configured not to by their administrators.  Since my goal is to reduce bandwidth it only makes sense that I would want to offload as much as possible onto other people’s caches.

So why not do that with my CSS file here?  Well, in the case of the WordPress stylesheet I haven’t found a good way to use a file with a different name.  According to the WordPress Codex the stylesheet_url parameter for the bloginfo template tag is hard coded to output a link to a file named “style.css”.  That means that adding the query string parameter is far easier.  Sometimes the path of least resistance is good, especially when it lets me go to bed earlier.