Adventures in Packing, Minifying, gzipping and iPhoning

I have a few days to kill before we officially start selling Shockey Monkey v2 (waiting on Windows Mobile application to be completely bugless) and I figured I’d sit down and work on Shockey Monkey performance a little.

Good news. No page under Shockey Monkey requires more than 1 second to render, with most actually rendered in under 0.3 seconds.

The network utilization is a whole different story unfortunately. You see, all the pretty AJAX interface and usability functionality comes at a cost. Roughly 400 Kb worth of uncompressed Javascript type of a cost. To give you an idea of why this is a problem: imagine refreshing the support request display give times. You would have downloaded 2 Mb worth of Javascript. Not good at all.

So one of my tasks this weekend was to figure out a way to reduce that burden. The first problem was that of multiple requests. Between my own and third party Javascript I had eight Javascript files, meaning eight requests to the web server. Since IE and Firefox only use a maximum of two requests to the server this meant that the browser would request, load, request, load, request, load… and make you pull your hair as you watched the loading bar bounce around.

I first started with trying to combine my Javascript on the fly which resulted in a learning experience that packed Javascript code cannot be combined. FMR.

I finally ended up uncompressing all of my Javascript and minifying it in a single Javascript file. Here is the before:

Notice it took nearly a second for the combined request to pull down all my Javascript files. But with minification and a single script:

Notice that after minification and consolidation the Javascript library has gone from over 400 uncompressed, to 340 compressed, down to 142 compressed and minified! The total download and render time from nearly a second down to 1/5th of a second! If I put my marketing hat on, that’s 500% improvement!

So a page with 168 support requests, live code and effects including autocomplete and all the other good stuff is yours in 2.38 seconds.

I have two items remaining in the to do list. First, enable gzip compression on the server even more. Second, find out why Javascript is not being cached. Currently I am trying to cache Javascript code at 1 month:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/x-javascript “access plus 1 month”
</IfModule>

But not making it very far with that one, yes the module is loaded and available.

As far as the iPhone is concerned – app works flawlessly over Safari even the visual effects are all there. As for release, any day now folks…