Drakware

Sep 23 2006 01:23Javascript Consolidation

Many sites in this day and age of widespread Web 2.0 fever make use of bucketloads of Javascript. More power to them - I happen to like clever Javascript. The problem with this is that in order to use all of the new functionality, we're often forced to load much more than a single file. Throw in some CSS and we're easily making four or five requests per page.

Sites like digg and flickr, both of which are great, make use of multiple javascript files for their features. This results in having to wait for ages (okay, seconds, but it feels like a long time) for a myriad of requests to be sent and each file downloaded. Once they're all cached things go more smoothly, but on every return trip you have to endure the wait.

While having separate files makes development easier, it doesn't take long to consolidate everything into one file when you publish. Now instead of making eight requests, your users only need to make one, saving a bit of time and some processing power on the server. I was going to stop here and leave it at "trust me on this," but I decided a quantitative analysis would be much better.

For the test, I downloaded all of the separate Javascript files from digg, and then created a consolidated file. I then made two test pages - one that loads eight separate files, and one that loads a single consolidated file. I then put the files on my server and used the very handy Load Time Analyzer extension for Firefox to measure load times.

Load Time (milliseconds)
SeparateConsolidated
33911657

As you can see, the separate files take twice as long to load as the single, consolidated file. You can also further optimize your scripts by removing comments, extra whitespace, etc. Your users will notice the difference - or at least I will.

Copyright © 2006 Drakware
All rights reserved.