Monday, May 25th, 2009

There was a good web site performance session at BarCamp Portland a couple weeks ago. It was led by a developer from Yahoo and covered the use of YSlow 2.0, the new version of Yahoo’s add-on to the Firebug Firefox extension, and how it can help you find areas in need of optimization on your web sites.

One optimization that’s becoming more popular lately is the use of far-future expires headers for static files on your site. With a bit of web server configuration, you can instruct browsers to cache your images, stylesheets, JavaScript, and any other static files for as long as you wish, which results in faster page load times after the initial visit because the browsers won’t try to download new copies of these files. This can make a dramatic difference in load times for large, high-traffic sites but can also benefit smaller sites.

For Apache, this configuration might look something like this:

ExpiresActive On
<FilesMatch "\.(ico|gif|jpe?g|png|js|css)$">
	ExpiresDefault "access plus 1 year"
</FilesMatch>

The one disadvantage to this practice is that sometimes these files change and you want your readers to get the latest versions. This is particularly the case with CSS which can change frequently as web sites evolve. This necessitates a way to instruct browsers to fetch new copies of these particular files despite the expiry time not yet being reached. A common method of doing this is by appending a query string to the file URLs that changes when the file does, thus giving the appearance of a different file.

An example of this would be something like:

<link rel="stylesheet" href="/css/main.css?v2.0" type="text/css" />

This has the desired effect but requires an extra manual step of incrementing the version number each time the file changes, which is easy to forget to do.

A better approach is to have something appended automatically when a file changes. A great way of doing this is to code your site to automatically check the last-modified date of your static files and append a Unix timestamp in the query string:

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

This value is guaranteed to increment when the file changes but will remain the same otherwise. Best of all, once you set it up you never have to touch it again.

But how do I do that?

Of course this doesn’t happen by itself; it requires some initial setup. If you’re working with Rails, this is done for you when you use certain asset helper methods, such as stylesheet_link_tag or image_tag. But what about PHP projects? CakePHP will do this as well but sometimes you don’t have the luxury of a framework like this.

Asset Helper

Asset Helper is a Wordpress plugin that gives you exactly this. Just drop it in, activate it via the Wordpress plugins panel, and start using your new helper functions for your CSS, JavaScript, and images. Alternately, add it to your theme directory and load it via include() and you won’t even have to worry about activating it.

Once you have Asset Helper loaded, adding timestamped files is as easy as doing:

<?php stylesheet_tag('style.css'); ?>

Which will give you something like this:

<link rel='stylesheet' href='/wp-content/themes/theme-name/style.css?1242089980' type='text/css' />

Actually, it’s even smarter than that example shows. If you just want to include the standard style.css for your current theme, just call the function without an argument — the plugin will figure it out. You can include files from anywhere by using filenames, relative paths, or paths from the site root.

Of course you can also do this with your JavaScript and images by using the javascript_tag() and image_tag() functions, which operate in a similar way.

Asset Helper is also aware of static asset hosts — those secondary hostnames you can use for your static files to allow for more concurrent downloads. Just define the ASSET_HOST constant in wp-config.php and the generated tags will automatically point to your asset host instead of the primary site’s hostname.

How to use Asset Helper

Complete documentation and lots of examples are available on the Asset Helper documentation page. Asset Helper is released under the terms of the GNU General Public License (GPL) version 2. If you find this plugin helpful, a link back to my site would be cool, but it’s not required.

Update

Asset Helper now works as a stand-alone PHP library as well as a Wordpress plugin. See the documentation page for details (usage for WP sites hasn’t changed).

Download Asset Helper from the Wordpress plugin directory