back to Cuzillion
stevesouders.com
 Cuzillion'cuz there are a zillion pages to check

Cuzillion is a tool for quickly constructing web pages to see how components interact. Browsers have unexpected behavior in everyday situations (for example, inline scripts block all rendering in the page and nothing can download in parallel with an external script). Sometimes the behavior differs across browsers (Internet Explorer 8 downloads six items in parallel whereas Firefox 2.0 only downloads two in parallel). Cuzillion lets you observe these behaviors and share sample pages with others.

Step-by-Step Instructions

1. add components
Click on the type of component that you want (external script, inline script, external stylesheet, etc.) and it's added to the page avatar.
2. arrange and modify
You can drag-and-drop the components to rearrange them in the page avatar. All components have default settings that work. You can change a component's settings by clicking on the edit icon (

). The settings available depends on the type of component. See the FAQ for more information.
3. create the page...
Click to submit your changes. The server returns the page per your specification. Make further changes by clicking on .

FAQ

Why is this useful? Do you have any examples?
Can I use the generated code on my site?
Why do I have to click on "Edit" to invoke the edit tools? Why not make them there all the time?
Wow. The different ways of constructing components is confusing. What do "HTML tags", "document.write", "Script DOM element", etc. mean?
How exactly is "page load time" measured?
What's resource.cgi?
What do Domain1, Domain2, etc. translate to?
Why is this useful? Do you have any examples?
It's useful to be able to point to a page that everyone can view that demonstrates a particular browser behavior. Being able to construct these test pages quickly makes it possible to find more techniques for faster performance. Below are some page scenarios that I've used to identify best practices for making web pages load faster.
Inline Scripts Block Rendering
Nothing in the page is rendered until all inline script are done executing. If you have slow inline scripts your users aren't getting as good of an experience as they could because the page isn't being rendered progressively.
Stylesheets Block Downloads in Firefox and JavaScript Execution in IE
The negative impact scripts have on page loading is fairly well known, but the impact of stylesheets is less so. This page demonstrates how stylesheets block all parallel downloads in Firefox, but only block script execution in IE.
IE8 Parallel Script Loading
IE8 is the first browser to load scripts in parallel. This test page loads in 4 seconds in IE8, but takes over 10 seconds to load in other browsers. Two things to note about IE8 is how it no longer downloads components in the order they appear and how iframes and images disrupt parallel script loading.
Can I use the generated code on my site?
Yes, this is licensed under the Apache 2.0 License for your use.
Why do I have to click on "Edit" to invoke the edit tools? Why not make them there all the time?
The edit tools require a fair amount of JavaScript and CSS. If they were there all the time, they might actually affect the experiment being tested. My requirement was to render the test page without any external scripts and stylesheets, and without any inline script and style blocks. (Except for the ones specified as part of the test.)
Wow. The different ways of constructing components is confusing. What do "HTML tags", "document.write", "Script DOM element", "iframe", and "XHR eval" mean?
  • HTML tags - The component is created in the typical way using HTML. For example, an external script created using HTML tags is:
    <script src="resource.cgi?..."></script>
    
  • document.write - The exact same string used in the HTML tags approach is instead written out via JavaScript as document.write.
  • Script DOM Element - Instead of using HTML tags, a DOM element is created via JavaScript. For example, an external script is done as follows. This approach is not applicable for inline scripts and inline style blocks.
    var script1 = document.createElement('script');
    script1.src = "resource.cgi?...";
    document.getElementsByTagName('head')[0].appendChild(script1);
    
  • iframe - An alternative way to load JavaScript and CSS to avoid blocking is to do it via an iframe. This construction technique returns an iframe that contains either JavaScript or CSS.
  • XHR eval - An alternative way to load JavaScript is to eval the response from an XMLHttpRquest.
How exactly is "page load time" measured?
The page load time is the time from the first packet to the onload event. Therefore, it does not include the response time of the HTML document. I think this is preferred, since what's being tested is the components in the page and not the HTML document itself. By removing the HTML document response time there's one less variable.
What's resource.cgi?
tbd
What do Domain1, Domain2, etc. translate to?
  • "Domain1" == 1.cuzillion.com
  • "Domain2" == 2.cuzillion.com
  • "Domain3" == 3.cuzillion.com
  • "Domain4" == 4.cuzillion.com
  • "Domain5" == 5.cuzillion.com

stevesouders.com | contact Steve