AJAX and CSS Optimization

Roland pointed me to an article about the amount of Javascript on digg.com’s home page. Seems a few Digger’s found it interesting. Well here at Zimbra we’ve got tons of Javascript and CSS in our AJAX web app. I decided to try an experiment to see if the techniques we use for Zimbra, a rather large AJAX app would help a site like digg.

First some background on Zimbra’s AJAX app and the techniques we currently use. Raw and uncompressed the Javascript alone is over 2Megs. To make our app easier to download we’ve made some optimizations.

For Javascript we combine all the files in to a single _all.js file. The order that you concat these files is important since the browser will parse the files top to bottom. The same reason why the order of the script tags in your HTML document would matter to prevent dependency problems.

We then use jsmin to remove comments, white space, and excess new lines. This gives on average 25-30% reduction in size. The final and most important step is to gzip the file. This gives on average 300-400% reduction in size. Some web applications will apply gzip compression on-the-fly, which for dynamic data is the only way. Here since the Javascript is static, which is true for most AJAX applications these days, we can pre-compress which will reduce latency and CPU overhead.

For CSS we also combine all our CSS files into a single _all.css file. This combined file is then compressed with gzip.

Now back to the experiment. I took a copy of Digg’s home page and applied the techniques above. Combined, jsminified, and gziped the Javascript, then combined and gziped the CSS. Visually and functionality nothing has changed. Under the covers however the source is quite a bit smaller. I used Web Page Analyzer to compare the results. We see a 50% reduction in the number of HTTP requests and a 65% reduction in the size of the download.

Original:
Total HTTP Requests: 26
Total Size: 199246 bytes

Zimbrafied Digg:
Total HTTP Requests: 13
Total Size: 70040 bytes

Not bad at all… Took me longer to write this up than to make the changes and I think all digg user’s would benefit from such a change. Not to mention digg itself would see a > %50 reduction in bandwidth usage which for a site like digg could be very significant.

Love working on ajax optimization problems like this? Check out our careers page and drop us an email.

Digg This