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.

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

6 Responses to AJAX and CSS Optimization

  1. Web do Corpo February 26, 2011 at 1:23 PM #

    thanks for posting ! excellent !!!

  2. Whitney Fenoff January 25, 2012 at 3:18 AM #

    Very entertaining site. I’ve bookmarked your site and added you on my blogroll! Keep up the great work.

  3. Quyen Negrin January 26, 2012 at 7:22 AM #

    Very nice, this one is going in my bookmarks!

  4. Na Anes January 30, 2012 at 7:22 AM #

    Your write up is a good model of it.

  5. Coleman Wachter May 10, 2012 at 7:07 AM #

    Come across a lot out of one’s thinking,and i also preferred your personal report!

  6. Alonzo Roepke June 27, 2012 at 5:02 AM #

    Significantly informative a lot of thanks, I do assume readers could really effectively need a lot more testimonies.

Copyright © 2022 Zimbra, Inc. All rights reserved.

All information contained in this blog is intended for informational purposes only. Synacor, Inc. is not responsible or liable in any manner for the use or misuse of any technical content provided herein. No specific or implied warranty is provided in association with the information or application of the information provided herein, including, but not limited to, use, misuse or distribution of such information by any user. The user assumes any and all risk pertaining to the use or distribution in any form of any subject matter contained in this blog.

Legal Information | Privacy Policy | Do Not Sell My Personal Information | CCPA Disclosures