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.
1. add components
Click on the type of component that you want
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 .
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.
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.
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 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?
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:
This approach is not applicable for inline scripts and inline style blocks.
var script1 = document.createElement('script');
script1.src = "resource.cgi?...";
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.