AJAX and CSS Optimization

By | January 28, 2006

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


Comments

  • thanks for posting ! excellent !!!

    Commented on February 26, 2011 at 1:23 PM
  • Very entertaining site. I’ve bookmarked your site and added you on my blogroll! Keep up the great work.

    Commented on January 25, 2012 at 3:18 AM
  • Very nice, this one is going in my bookmarks!

    Commented on January 26, 2012 at 7:22 AM
  • Your write up is a good model of it.

    Commented on January 30, 2012 at 7:22 AM
  • Come across a lot out of one’s thinking,and i also preferred your personal report!

    Commented on May 10, 2012 at 7:07 AM
  • Significantly informative a lot of thanks, I do assume readers could really effectively need a lot more testimonies.

    Commented on June 27, 2012 at 5:02 AM