Today, I found out that the good folks behind jQuery were using Packer, another great JavaScript compression utility by Dean Edwards, to distribute their compressed version of the library. The result: an amazingly small 21KB download! My first thought was: Wow, that is small! I then tried the YUI Compressor on the uncompressed version of the jQuery library and obtained a 31KB file. Not bad, but not nearly as good as Packer… I then decided to compare the gzipped version of these files. Here are my findings:

These results are amazing! The smallest file is the file obtained by minifying jQuery using the YUI Compressor and then gzipping. I would have thought that using Packer would have yielded the smallest file. In fact, it appears that Packer’s redundancy reduction algorithm is detrimental to gzip compression.

In addition to that, using Packer’s redundancy reduction algorithm adds a delay at the time the script gets executed (because the script needs to be unpacked and then eval’ed) On my laptop, this delay is about 200 msec. The conclusion is clear: for optimal performance, gzip your JavaScript code, and stay away from “advanced” JavaScript compression schemes that look attractive on paper, but end up degrading the performance of your site.

If your web hosting company does not offer HTTP compression, but gives you access to PHP (that’s the case of Yahoo! Web Hosting), I wrote a simple PHP script that will compress files and set the cache control headers so that the requested files actually get cached by the browser. I used this script with great success for a web site I worked on recently.

Note: yahoo-dom-event.js, minified with the YUI Compressor and gzipped only weighs 9,476 bytes. Not bad!

Update: Read this article by John Resig on JavaScript library Loading Speed.