Shrinking Your JavaScript Files for Improved Page Performance

With all of the performance advances in JavaScript engines in modern browsers, it’s easy to forget that we still need to do some legwork ourselves, especially considering how many users are still on older browsers. Compressing JavaScript files is an oft forgotten task which could have a dramatic & positive impact and something that will make our apps perform better (as well as make Steve Souders, Kyle Simpson & Nicholas Zakas very happy). :)

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.