Launched, but Still Tweaking

Thursday, February 23, 2006, at 08:08AM

By Eric Richardson

So our new app is launched. It's an interactive map of Downtown Los Angeles that we developed for the Downtown Center BID and linked to their data. You can find it via the BID's website or via this direct URL. It requires Flash 8, so if you don't have that you'll be asked to upgrade (though the sidebar will still work unless you're running Firefox on Linux).

The sidebar is Javascript over Rails over MySQL. The map application is Flash, and it does a lot of back-and-forth communication with the javascript.

Now that the app is up, I discovered that the biggest perceived-lag on load was the javascript. I'm using prototype.js and the scriptaculous libraries, and those are pretty hefty. All told my JS was roughly eight files and 140K. That's not huge these days, but because the JS loaded up front nothing was displaying until those files had gotten down.

First thing to understand is that one file loads faster than many files that add up to the same size. Given this, I took most of my various JS files and combined them into one file. Since I was combining prototype, scriptaculous, Behaviour and others I decided to call the new file protoscriptacubehavulous. That raw file is 132K, but it'll still load better than its separate pieces.

Next I ran my borg JS file through the very cool dojo toolkit compressor, which is built on Mozilla's js engine and not sketchy regexpses. After compression the borg JS is now only 89K.

That's a big change right there, and in my purely non-scientific estimation you can see the difference in time to content.

The final step, which I haven't done yet, is to move the js file to where Apache can auto-negotiate sending gzipped data. The gzipped version of the borg JS is only 23K, and that I know would be a noticable difference for browsers that are cool with it.