February 12^th, 2008

Experimenting with YSlow, a FireBug plug-in for Firefox, has proven very productive. I've said it before: FireBug in combination with the Web Developer Toolbar and Jesse's Bookmarklets makes Firefox the best web development environment around.

So I spent an hour today improving maurus.net's YSlow rating. In detail, I added general output compression support by enabling zlib.output_compression in my php.ini and adding a deflate filter for JavaScript and CSS files. I also added "Expires"-headers to images, CSS files and JavaScript files. These optimizations alone, together with disabling ETags, as recommended by the YSlow FAQ, made a huge difference in this site's loading speed. Last but not least, YSlow pointed out some redundant <script> tags on the front-page.

Here's the Apache configuration I used:

FileETag none
ExpiresActive On
# images and css expire after two weeks
ExpiresByType image/gif A1296000
ExpiresByType image/jpeg A1296000
ExpiresByType text/css A1296000
AddType text/javascript .js
ExpiresByType text/javascript A1296000

AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css

While I did all this, I also had to solve the problem that updating files for my weblog wouldn't be as simple anymore, because users would visit my site with old stylesheets and JavaScripts for two weeks when I updated my site. I decided to do the following:

• JavaScript libraries like YUI now live in versioned directories like /yui-2.4.1/.

• All CSS files and JavaScript files that belong to my site get a query-parameter appended to their URL that is equal to their last modification date. Thus, as soon as the file changes, its URL changes, too. Here's an example of how I load a CSS file in my header.php:

  @import url(realstyle.css.php<?php 
  echo '?ts=' . 
  date('YmdHis', 
    filectime(TEMPLATEPATH . '/realstyle.css.php')); 
  ?>);

  The resulting URL looks like this:

  @import url(realstyle.css.php?ts=20080212171452);

In summary, with a primed cache, this site will now load a lot faster than before, but if I change anything the changes will still be reflected the moment I make them. The only caveat is that I can't change images on the fly without changing their filenames, but that doesn't bother me much because I never did that anyway.