Intereactive Web Design - Sugar Land, TX

In the development of our web app, Mosaic, we are finalizing a lot of the core and how certain files are going to be best served to the browser. Recently, our focus has been our Javascript libraries and the best way to compress/cache them for minimal download time for the users.

The first roadblock I ran into is there is a TON of information out there on compressing and serving Javascript. In order to weed through it all the first thing I did was asked myself some questions that I thought were relevant.

• Which one makes the library the smallest?
• Which one is the easiest to use?
• Which one is most reliable across all browsers?
• Which one includes caching?
• Which one allows me to update a file and get it into the live codebase the fastest/easiest?

After sorting through the many utilities/methods, the front runners were Dean’s Packer, YUI Compressor, Combine, PHP Header Method and JSMin. The one utility that seemed to best fit our needs was a script called Combine. Combine is a PHP script that basically acts as a handler for all your javascript traffic from the server to the browser. There are a few PHP scripts out there that will serve compressed versions of your Javascript, but this is the Ferrari of all of the bunch.

So what exactly can it do? This script is so well written that is can do as much or as little as you desire or your users can handle. Here’s a break down of what all this script does for us.

It Combines

This is a gimme.. The first thing that Combine does is to ‘combine’ all your javascript files together and serve them as one large file to reduce the number of requests from the server giving a slight speed boost.

It Compresses

Combine detects if your browser will will handle gzip compression and if so, it will gzip the data and serve the compressed version. This will usually result in a sizable reduction in the file size you are serving.

It Caches

If you set up a cache directory it will store the gziped version of your data (that it generated) so that future requests simply grab the cached gzipped version instead of generating the gzipped content on the fly, which will reduce your server load by a small amount because the processors isn’t gzipping data on every request.

It Checks For Changes

This is probably my favorite part of the script. It will run a quick check on the timestamp and filesize of the cached data and if it has changed, it will automatically regenerate the file and serve the new version. It’s my favorite part of the script because, as far as I can tell, it handles the headers perfectly which allows me to change something in my Javascript and know that the users won’t be seeing the older versions. This has worked flawlessly through the past few months of development when our JS has been changing drastically every day.

It Allows For Realtime Editing

This may not be the exact term, but it’s a pretty close description. Because Combine doesn’t do anything to my original source files, I can edit them and upload/commit changes very quickly. With most scripts, you generally have to do all the compressing manually and then upload/commit that file. This takes a lot of time when you want to change something and mainly is just a hassle. I’m aware that you can write a custom serverside script that using the packer scripts such as YUI or JSmin but I think that is slightly out of the scope of the intermediate web developer.

So that’s the overview of why we’re using this script and you can read up more details on the authors site: http://rakaz.nl/extra/code/combine. You’ll also notice that this script can also be used to combine CSS files. We will probably implement this as well but for now our main intest is in getting the JS to a manageable size.

Next up in Part 2 we’re going to look at some real examples of how this script works, how we use it, and some benchmarks to show off how this script shines.