Friday, April 25th, 2008

Cuzillion: Performance best practices tool

Category: Browsers, Examples, JavaScript, Performance, Showcase, Testing

<p>

Steve Souders has released a nice little tool called Cuzillion which has the tag line of ‘cuz there are zillion pages to check, although it could also be that there are a zillion ways to do Web development!

The tool lets you test out different techniques for optimizing performance in browsers, and these tests can be saved and shared by the community.

Steve explains how the tool came about:

I’m constantly thinking of or being asked about how browsers handle different sets of resources loaded in various ways. Before I would open an editor and build some test pages. Firing up a packet sniffer I would load these pages in different browsers to diagnose what was going on. I was starting my research on advanced techniques for loading scripts without blocking and realized the number of test pages needed to cover all the permutations was in the hundreds. That was the birth of Cuzillion.

Here Steve talks about some examples:

A great example of how Cuzillion is useful is looking at the impact inline scripts have when they follow a stylesheet in Internet Explorer. Typically, a stylesheet followed by any other resource results in both resources being downloaded in parallel in Internet Explorer. (In Firefox stylesheets block parallel downloads, so this performance optimization is only applicable to IE.) Here’s a Cuzillion page that shows this: stylesheet and image downloading in parallel. Both the stylesheet and image are configured to take 2 seconds to download. Since they download in parallel the page takes about 2 seconds to load as shown by the “page load time”.

But look what happens if we put an innocent inline script between the stylesheet and image: stylesheet, inline script, and image. Now, in Internet Explorer the stylesheet and image are downloaded sequentially, which means the page load time goes from 2 seconds to 4 seconds. If the inline script is simply moved above the stylesheet the two resources are downloaded in parallel again, and the page load goes back down to 2 seconds: inline script, stylesheet, and image.

This was a great discovery. But immediately my officemate asked if inline style blocks had the same effect. No problem. With Cuzillion I just do some clicks and drag-and-drop, and can test it out: stylesheet, inline style block, image. It turns out inline style blocks don’t cause stylesheets to block downloads.

The findings from a tool like Cuzillion are really valuable. The lessons learned from poking at inline scripts and stylesheets can save hundreds of milliseconds on page load times. And it’s a common problem. eBay, MSN.com, MySpace, and Wikipedia all suffer from this problem.

Much thanks to Google for letting me release this code under Open Source. It’s not currently on Google Code but if you want to contribute let me know and I’ll do that. Try it out and send me your feedback. And share your insights with others. We all want the Internet to be faster!

Steve is talking at Web 2.0 Expo today at 1:30pm in room 2002. If you are in town, check it out and see Cuzillion in action!

Related Content:

Posted by Dion Almaer at 1:37 pm
3 Comments

+++--
3.6 rating from 19 votes

3 Comments »

Comments feed TrackBack URI

Now that is a truly useful tool!

And what remarkable results in the latest webkit!

Comment by MorganRoderick — April 25, 2008

Very nice Steve. Its nice to know there’s a tool out there that lets you compare for instance the loading time difference when you have only one “domain” serving your assets compared to when you have multiple; and the best part of it is that you don’t have to actually deploy your application in order to find out what the expected results would be. Kudos!

Comment by tjackiw — April 25, 2008

I saw the presentation at Web 2.0. It was very enlightening. Looking forward to understanding more about the optimization of JS and websites in general.

Comment by ilazarte — April 25, 2008

Leave a comment

You must be logged in to post a comment.