Asset Helper PHP library
There was a good web site performance session at BarCamp Portland 2009. 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 stand-alone PHP library that gives you exactly this. Just drop it in, include it in your web site or application, and start using your new helper functions for your CSS, JavaScript, and images.
Once you have Asset Helper loaded, adding timestamped files is as easy as doing:
<?php stylesheet_tag('stylesheet.css'); ?>
Which will give you something like this:
<link rel='stylesheet' href='/css/stylesheet.css?1242089980' type='text/css' />
You can include files from anywhere by using filenames, relative paths, or paths from the site root. WordPress users get an added bonus: If you just want to include the standard style.css for your current theme, just call the function without an argument — Asset Helper will figure it out.
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 somewhere in your site’s configuration 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 MIT License and is free to use for any purpose. If you find this plugin helpful, a link back to my site would be cool, but it’s not required.
