Chris Barr

How to use the YUI compressor

Saturday, December 13, 2008

Compressing your javascript and CSS is a easy way to save bandwidth and make a site’s download and performance feel a bit snappier. There’s lots of tools to allow you to do this, but from my research it seems that Yahoo!‘s YUI compressor is the overall best.  Sure there’s others out there like JSmin and Dean Edward’s packer, but YUI offers a higher compression ratio, it also works with CSS files, and it’ won’t obfuscate your code.

Compressors work by removing all comments and whitespace (line breaks), and in some cases they will actually analyze your code and shrink variable names.  Using compression can result in up to a 60% decrease in file size!  So lets get started in learning how to use the YUI compressor!

First, it’s probably a good idea to read about YUI, so check out the video introducing it at http://developer.yahoo.com/yui/compressor/

Now, lets go and download the latest version: http://www.julienlecomte.net/yuicompressor/ - also since this runs on Java, make sure you have Java installed and updated.

Open up the folder that was downloaded and grab the file in the “build” folder named yuicompressor-x.x.x.jar and you can delete everything else since we won’t need it just to use the compressor.

For this example I’m going to compress jQuery and jQuery UI, first go download them and be sure to get the uncompressed version of each, since we can’t really further compress an already compressed file.  Just open these two files, select all of jQuery UI and copy/paste that to the end of the jQuery file.  The resulting uncompressed file is 436k and over 13,000 lines of code!

If you’re using a Mac, you’ll need to open up the terminal (found by navigating to /Applications/Utilities/Terminal.app), and if you’re using Windows you’ll need to open the command line (Start > Run > type “cmd” and hit enter).

Now in the Terminal/Command Line here’s the syntax for basic compressing with YUI:

java -jar /path/to/yuicompressor.jar path/to/original.js -o path/to/output.js

Instead of typing all these file paths, luckily we can just drag files onto the terminal/Command line and it will write the path out for us.  So here’s what you need to do:

1. Type java -jar (type a space after) and then drag the yuicompressor.x.x.x.jar file into the window - this tells it that we want to run java code from a .jar file, and then we give it the file to run.
2. Type another space and drag the file you want to compress into the window.
3. Another space then type -o to specify that you want to write the compressed output into a new file.
4. Now you need the path to the output destination file that does not yet exist. So what I usually do is drag the same file into the window, and then use the arrow keys to go back a few characters and rename the file.
5. Just hit enter and that should do it!

As you can see, we went from 436k down to 264k - which is a 60.5% decrease! Also, it now has no comments and it’s all on a single line of code which makes it next to impossible to read, so be sure to keep a backup.  This is especially true if you are compressing a script that you wrote, if you don’t keep a backup you will forever loose your comments and formatting.