Vastermonster

One of the best ways to speed up rendering of your website is to compress all your assets: JavaScript, CSS and images. Yahoo! has all but perfected this. The best way of compressing these files is using Yahoo!’s YUI Compressor. Here’s how.

Get the YUI Compressor

YUI Compressor can be found at Yahoo! here:

• Docs: http://developer.yahoo.com/yui/compressor/
• Download: http://yuilibrary.com/downloads/#yuicompressor
• Source: http://github.com/yui/yuicompressor/tree/master

Once downloaded, you can run the compressor via command-line. Java is required.

$ java -jar yuicompressor-x.y.z.jar
$ java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js

The YUI Compressor Ruby Gem

You can also use a ruby gem to install and run the compressor. Compressing files is a little more difficult, check the documentation to learn how.

http://github.com/sstephenson/ruby-yui-compressor/tree/master

$ sudo gem install -r yui-compressor
$ irb -rubygems
>> require "yui/compressor"
compressor = YUI::JavaScriptCompressor.new
compressor.compress('var JS = "goes here";')

There are a few options for compressing and serving assets on the fly. Gzip compression via Apache is common and usually turned on by default on your server. In addition to that, I use Minify. It takes some time to setup but it’s worth it.

Minify PHP

• Project page: http://code.google.com/p/minify/
• Docs: http://code.google.com/p/minify/wiki/UserGuide
• Download: http://code.google.com/p/minify/downloads/list
• Source: http://code.google.com/p/minify/source/checkout

The documentation is pretty clear, so I won’t copy it here. Either way, you’ve got smaller files. Running the command manually gives you a lot more control over how it works and where the files end up. But setting up a Minify “server” lets you compress all your files without worrying about missing anything. They both work great.

Image Compression with OptiPNG

Recently we’ve started compressing our images as well. Images are probably the most common asset format found on your webpage so it’s important to get them downloaded smoothly. I haven’t found a great tool for this yet but once again, Yahoo! provides. These tools provide lossless compression, which means you won’t see any visual difference in the file, only in the final file size. Most of the tools I’ve found work best on png files, which is a great format to work with since it provides 24 bit alpha channels (better transparency) unlike gif or jpgs.

• Yahoo! Smush-It: http://developer.yahoo.com/yslow/smushit/
  Smush it does not yet have a public tool or API, but they’re working on it. It does a great job on png files. To compress the files, you have to place them on the internet and give the tool the urls. A better workaround is to use the tool via YSlow in Firebug.
• OptiPNG: http://optipng.sourceforge.net/
  OptiPNG has great compression, a command-line tool and a GUI wrapper for OS X. The only downside is that it only works on png files. The GUI wrapper gives you a drag and drop tool for compressing your files.

How have you been compressing your files?