I have been seeing a lot of AJAX-enabled Drupal sites that are not using JavaScript compression lately, and have been wondering how many people actually know how to use it. JavaScript compression has been around for a while, but the concept is still new for some people. The technology allows you to compress the size of JavaScript files in various ways to reduce download time, bandwidth and execution time on client browsers. While it is not always necessary if bandwidth or file size is not a big concern, large scripts can take much longer to execute unless they are compressed.

Here's an example of what I mean. We recently deployed a site with a media browser component built with jQuery. Uncompressed, the file size was about 80k, compressed, the file size was about 14k. Uncompressed, there was this massive delay in Firefox and Internet Explorer while the browser figured out how to deal with the script; about 10 seconds on some slower machines. Compressed, it executed immediately and there was no interruption after the page downloaded.

The key to working with any compression program is to know how to write good JavaScript. JSLint is a debugger that verifies the quality of your JavaScript code. It looks for major errors that cause cross-browser compatibility issues as well as syntax errors that JavaScript clients have to automatically correct before they can parse your scripts. You can find JSLint at http://www.jslint.com/.

For first timers, debugging your scripts can be a little challenging. JSLint places line numbers above actual errors it finds, which can be confusing when you are looking to find where an error is happening. It is also obsessive about syntax, and will throw errors on anything it does not recognize. For instance, I like to check for values which are exactly equal to 0, but not necessarily numeric, with a double equals sign. JSLint will throw an error each time it sees this. Adapting your programming style to be compliant with actual JavaScript spec, or learning to ignore errors which are not really errors, is a big part of learning how to work with JSLint.

Actually compressing a script is a pretty simple task. In general, all you have to do is go to the web site for one of the many compressors out there, paste a script, and get back compressed code. Others, like YUI, are downloadable applications you can use to pack your scripts. YUI and Packer are my favorite compression tools - they generally provide the smallest file sizes. Compressor Rater is a site that compares the compression ratio of individual scripts with the multiple compression tools out there to see which one gives you the smallest file size. You can combine different scripts compressed with different compressors in a single web page without issue.

A word about compatibility: it is very important to check your scripts after running them through a compressor. In general, if you can get your code to verify through JSLint, you can compress it with JSMin, Packer, YUI or any of the other ones out there and expect compatibility with all browsers. This doesn't mean this will always be the case. Also, Dean Edwards, the author of Packer, has this to say about the benefits of compression over gzip. Base62 compression does add 100-200 milliseconds of overhead to parsing of JavaScript files. It also results in smaller file sizes. You do the math about which is faster.