Gzipping content may make Firefox unbearably slow

I set out yesterday on an enormous task, to improve the performance of my PHP framework, Hierophant.  I've been working on Hierophant since early 2005.  One area that I never put much focus into was in the area of download and page load performance.  It was always on the todo list, but kept getting pushed back for one reason or another.  So yesterday I set out to patch this gaping hole in my framework's functionality.

I began with the most obvious enhancement, supporting gzip for various dynamic HTML documents, CSS, and JavaScript.  Gzip can reduce the download size of a document somewhere in the neighborhood of ~67% for most documents.  For example, I took Base2's already compressed base2-dom-fp.js (original compressed with Dean Edwards's Packer) and took it from 47KB to 15KB.  Stylesheets went from 10KB to 2KB.

In addition to gzip, I implemented aggressive caching, setting the expiration times of scripts, stylesheets, and most images to 10 years.

So, agressive caching and gziping should alleviate a hefty chunk of performance issues, right?  It did, in fact, in IE6, IE7, and Safari.  But not in Firefox.  Firefox 2, and the latest Firefox 3 Beta 5 were slower with gzip turned on than with it disabled.  Not just a little bit slower, a lot slower.  It takes literally eons for Firefox to load up gzip'd content.

Safari and even, gasp, IE6 and IE7 run circles around Firefox with gzip'd content.  On the other hand, disabling gzip in Firefox brought its performance back on par with Safari and IE, which is completely baffling to me.

Ultimately, I did the only thing I could have done and that was to disable gzip for Gecko-based user agents, and left it enabled for all else.

So word to the wise, if you're going to experiment with gzip, Firefox and its Gecko-based brethren  may not be up to the task.

Going back to caching, how do you update content that is set to expire 10 years in the future?  In my framework I opted to append the last modified time of the file to every path output to HTML.  So, for a script you'd see a path that looks something like this:

/Library/base2/lib/base2-dom-fp.js?hFileLastModified=1207280248

That causes the document to be stored indefinitely, per the client's settings until the path changes.  When the timestamp changes, the file automatically updates on the client-side. And I'm taking the same approach for images.  This method allows you to utilize external scripts and stylesheets to their full potential, and as a result makes browsing blazing fast.  Combine with other various optimization techniques, and you can make your site even faster than fast!

As a side note, if you've never heard of Hierophant before, I'll be blogging about that more in the future.