Cuzillion
At Web 2.0 Expo today I announce the release of Cuzillion. The tag line is ‘cuz there are zillion pages to check. It’s indispensable for people like me who are always pushing browsers to their limit trying to figure out how to squeeze out a little more performance.
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.
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.) (Update: No longer true as of Firefox 3.) 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!
Morgan Roderick | 25-Apr-08 at 10:52 am | Permalink |
That is a truly remarkable tool!
One possible improvement, would be to set background images in the CSS :-)
Hope your server will be able to handle the trafic over the next few weeks ;-)
Eric | 25-Apr-08 at 12:26 pm | Permalink |
Some improvements :
– @import CSS
– CSS that contains another CSS via @import
– Being able to fill the content of an iframe
– Being able to put a pause in the page (simulate an HTML which downloads irregularly) like “wait 2s between this image tag and the next one”
Bill Scott | 25-Apr-08 at 12:32 pm | Permalink |
Steve. This is nice. This will save a bunch of time in experimentation…
Some ideas (that you may want to ignore ;-)
– a way to have it run a bunch of times to get an average
– allow us to download the tool and run on our own servers… basically a zip that we can unpack… that would take a load off your server
– connect into firebug, analyze a page and break create a cuzillion page that mimics a live site and thus play with tweaking it.
– Provide a way to save configurations. This would allow you to have a gallery of good and bad examples
Of course, the tool is already useful enough… just some ideas.
Bill Scott | 25-Apr-08 at 12:33 pm | Permalink |
Ok, ignore the saving. Obviously I can just bookmark good and bad examples.
(Doh)
mel | 27-Apr-08 at 2:18 am | Permalink |
its brilliant but i really don’t understand how i can use it or every one else
Brian | 27-Apr-08 at 6:02 am | Permalink |
Hey Steve. Great tool!
Testing made easy. It’s even more efficient for demos.
Remy Sharp | 30-Apr-08 at 6:59 am | Permalink |
Thank you so much to you and Google for making this publicly available. I’m passing this on to a colleague right now whom I was debugging the speed of page load.
Vishal Shah | 30-Apr-08 at 8:35 am | Permalink |
Hi Steve,
Cuzillion is a really nice idea! Frankly, I think I saw this coming from you after your php, custom html pages and scripts like sleep.cgi that you had worked on earlier, which were very helpful. This tool’ifies that broad idea, which is great. It would be great if this tool can be made scriptable -with a REST style api interface. I have contacted you with some more details.
Cheers,
Vishal
Ben | 30-Apr-08 at 2:28 pm | Permalink |
A logical step you may want to consider is logging the information from the tests people run so that you can make recommended suggestions and show comparison through a chart. For example, if I have a basic external script, external stylesheet, and an internal script, I’ll have to run 6 separate tests to determine the fastest order. But if you can allow me to select each thing I want to include and then give me a graph or chart with the already proven fastest method, it’ll save a lot of time. Or, if you don’t want to log results, you could auto-cycle through all the possibilities given a certain set of criteria and then return a chart or graph. Just a suggestion for a future step, but great work. Thanks.
Steele Parker | 30-Apr-08 at 4:02 pm | Permalink |
Kudos! What a great tool! Just a few quick questions;
With ie8, if a page contains an Image, and an Iframe which contains an external script, will the external script in the iframe be loaded parallel with the image or will the loading of the image block the loading of the script in the Iframe?
Also, is there a way we can access these load time profiles so that we can see differences in load orders?
Steele Parker | 30-Apr-08 at 4:12 pm | Permalink |
Also, I have found a bug (perhaps its my proxy or browser though…)
After rendering a page, I click the “edit” button and the little icons in the top right have gone blank, however, if I move one of objects, its blank buttons return.
Addit Info:
MSIE 7.0.5730.13 on XPPro sp2
Steve Souders | 30-Apr-08 at 4:23 pm | Permalink |
1. Morgan: I’ll include CSS background images as another type of resource to add.
2. Eric: I added a checkbox to stylesheets for “use @import”. The other ideas are good, too, esp. the download pause.
3. Hi Bill! I like the run multiple times, but since the download times are fixed it might not reveal much. I hope soon to get the code up on Google Code so you can download it from there, but no promised date right now. I’ve been kicking around the idea of a “page visualizer” as you describe in your 3rd bullet. I’ll add “save your example” soon that ties in with a Cuzillion blog category. That provides a way for someone to save a Cuzillion page and ask “Why does it do this?” or “Look what I discovered!”.
8. Vishal: I like the API idea, but that might be further out. When I get it up on Google Code maybe you can add that.
9. Ben: Wow, that’s an awesome idea. Rather than being reactive like YSlow and evaluating a page, be proactive and suggest how the resources _should_ be ordered.
10. Steele: Images don’t block downloads, so the iframe and script are all loaded in parallel. You have to use the packet sniffer of choice to see the download times. If I had JS instrumentation in the page to do that I worry it’ll affect the results.
Ben | 01-May-08 at 11:03 am | Permalink |
Taken yet another step further, if you wanted to combine Cuzillion with YSlow, you could have it scan my page and then make optimization reordering suggestions based on Cuzillion’s data rather than having me enter the data manually. YSlow seems like it already does a fairly good job in figuring out what my page elements are. I wouldn’t imagine that it would be terribly difficult for it to use that data to populate Cuzillion. You could run a check against a database to see if that combination of page elements has already been tested. If it has, return those results; if not, run the test through Cuzillion.
Pascal Barbier | 02-May-08 at 1:44 am | Permalink |
Fantastic loading behavior analysis tool !
One question: How do you render the http profile charts in the example pages ? Is it hand made or do you hava a tool to suggest ?
Steve Souders | 02-May-08 at 8:21 am | Permalink |
I use IBM Page Detailer:
http://www.alphaworks.ibm.com/tech/pagedetailer
Unfortunately, the pay-for Pro version is no longer available. Fiddler is another cross-browser tool. HTTPWatch has good charts in IE, but they’re a little different (they show “blocked” time which is a great feature as long as you understand it). Be careful using Net Panel in Firebug (see http://developer.yahoo.com/yslow/netpanelpatch.html ).
Paul Smith | 18-Mar-10 at 11:12 pm | Permalink |
Is there any way to see the page that Cuzillion generates? Also, I guess the tool is intended to be used with something like IBM’s PageDetailer, or am I missing something that Cuzillion does that I’m not aware of?
Steve Souders | 19-Mar-10 at 9:17 am | Permalink |
@Paul: Cuzillion shows the load time for scripts, so you can see that within Cuzillion itself. To see every HTTP request you have to use some sort of packet sniffer.
Dan Ruspini | 03-Aug-10 at 1:37 pm | Permalink |
Steve, how should I deal with inconsistency in results. It seems that if I run this in a new tab, I always get ~4078ms. If I click Reload, I get ~2141ms. If I click Edit > Create, I get ~2094ms. This was all on IE7 but I see the same inconsistencies on IE8. Should I just always open a new tab to get the real numbers? Thanks, great work!
Dan Ruspini | 03-Aug-10 at 1:38 pm | Permalink |
sorry, here’s the link I’m referring to in the previous post
https://stevesouders.com/cuzillion/?c0=hb0hfff0_0_f&c1=hc1hfff2_0_f&c2=hj1hfff2_0_f&c3=hj1hfff2_0_f&t=1280864975