Compressing Javascript

There are two utilities available, that combined I think offer the best option for compressing javascript. A while back, I was unaware that Dean Edwards Javascript Packer was actually available as a download, but it is available in both .NET and perl versions here.

The other utility that I would recommend is jscompact. This is a sourceforge project that requires libjs from the spidermonkey project at mozilla. JSCompact is pretty simple to get running - it's libjs that will give you a bit of a problem as installation is underdocumented. If you are familiar with C at all, you should be able to get it going.

The two utilities together make for a great way to turn big javascript implementations into realistic downloads for dialup users.

I'm going to run through a brief scenario here - using scriptaculous and prototype together is known to be a bit of a bear considering the wegiht of theh libraries, and the fact that in order to do anything useful with them you need to build another javascript file.

Looking at my own set of files here, I see that there are four files for scriptaculous - controls.js is 29K, dragdrop.js is 31k, effects.js is 34k, and builder.js is 4.2k - there is also scriptaculous.js that weighs in at a sprite 2.3k, but all that does is load the other files, so that file isn't really necessary. Then there's prototype.js which weighs in at 61k. Out of the box, that's 6 http requests, and 161.5K of data - and using my previous calculations for 56K download speeds, that means that it will take a dialup user nearly 37 seconds to download the javascript - let alone the images and the web page that you are putting this package on!

The first step would be to combine the necessary files into a single file - you save a few bytes here, and a few http requests and that puts you at 157K (35.7 seconds now).

Using jscompact, the file loses a few pounds and slims down to 124K (28.2 seconds). A consecutive run of dean edwards packer, gets the file down to 59K (13 seconds). Add to this recipe gzip compression by the web server and you get it down to 28K (6.3 seconds). I've seen some other less conservative sources quote that download speed as 4 seconds, but in my real world, I'd rather live on the slow side and have my expectations exceeded rather than the other way around. Forgetting about dialup users for a moment, you've also effectively decreased the load time for the javascript to under 1 second for broadband users. Under 1 second... now that's impressive.

I have tried a few other javascript compression utilities with less consistent success and slightly different compression ratios (some a little better, some worse), but the combination of these two utilities provides for the best results in my opinion. The fact that they can both be run from the command line makes life pretty easy for website admins as well.

Changing a web page download speed from over 30 seconds to under 10 seconds is an important difference. If you think back to your dial-up days, you'll remember too many occasions when you just left a site because the download speeds were so slow.

Don't forget to combine this technique with appropriate cache and ETAG headers to make the best experience for your website visitors - that way on consecutive visits the 6.3 second overhead can disappear altogether.

If you need even more immediate results, you could reasonably concieve of a way to separate your javascript files so that the must-have functionality was downloaded first, and the nice-to-have functionality came in on a consecutive download - thereby enhancing the user experience because they were able to interact with your page that much quicker.