I used to use the YUI Compressor but based on John Resig’s findings during the release of jQuery 1.4, I’ve switched to using Google’s Closure Compiler which seems to get better compression.

Setting Things Up

It’s incredibly easy to compress files and I’m going to outline the steps. The first thing you need to do is download Java. Since the Closure Compiler comes in the form of a .jar binary file, you’ll need Java to run it. Also, I’d recommended ensuring that you make Java available via your OS path so that you don’t need some long, convoluted command line statement to get to it.

Next, download the Closure Compiler .jar file and drop it into a convenient place that’s easily accessible.

For this tutorial, I’m going to use the uncompressed version of jQuery since it’s sizeable and will be a good sample to use to demonstrate the results. Uncompressed, that file comes in at 161kb. Note, though, that jQuery already comes packaged in a compressed, ready-to-use form via the jQuery website and I’m only using the file for demonstrating file compression.

Compressing the Code

Actually compressing the code is incredibly easy. Note that I’m using Windows so the steps will differ a little if you’re using OSX with terminal.

Go ahead and click on Start->Run and open a command prompt window by typing in “CMD” and hitting Enter. From there, change directories to the directory where you’ve saved your uncompressed jQuery JavaScript file. If you can’t remember the DOS command for it, look up “CD” which is the command to allow you to change directories. For example, I need to enter the following to go to my directory:

cd \rey\closure

Next, run the following command to run the Closure Compiler:

java -jar compiler.jar –js=jquery-1.4.2.js –js_output_file=jquery-1.4.2-compressed.js

This will run the compiler and create a new, compressed version of the .js file. The results are immediately obvious:

jQuery Uncompressed: 161kb
jQuery Compresse: 71kb

Shaving off more than 50% of the file size is a REALLY big savings when your users initially come to the site and you want them to get snappy pages.

Other Choices

I would highly encourage you to check out the other compressors available to determine which one works for you. In a recent post I made outlining a list of tools I think are really important to client-side development, I mentioned the following:

YUI compressor
JSMIN
Dean Edward’s Packer
Microsoft Ajax Minifer
Dojo Shrinksafe

For example, when I ran those tools on the same uncompressed jQuery file, here’s what I got:

YUI Compressor: 78kb
Microsoft’s Ajax Minifier: 72kb
Dojo Shrinksafe: 86kb

I tried using Packer and an online version of JSMin but I think the size of the file caused them both to timeout so I don’t have figures for you.

Again, it’s important that you do your own homework as there may settings that I’m not leveraging and could offer even better compression. If you find better performance, let me know. I’d love to hear about it.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

IIS Compression in IIS6.0

restarted IIS and was COMPLETELY floored by the results. The main page of Gotcfm.com which already was a nice & trim 105k shrunk down to less than half of that!! It now comes it at a tiny 45k, JS & CSS included! WOAH!!

Now before you run out and go crazy adding compression, be sure to test out your prod code on a dev server. Compression can mess with your files in unexpected ways, especially files that have been previously minified or packed.

Update: So enabling compression somehow messed up my RSS feed for the blog. As soon as I disabled it, the RSS feed worked perfectly. I'll have to probe this a little further.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.