Creating a Waterfall chart using Firebug

There are many free tools that will generate a Waterfall chart for you. One of those is Firebug, the popular add-on for the Firefox browser. Obviously, this tool works only for Firefox and not Internet Explorer or other browsers; so at the end of this chapter, you'll find other free tools that generate Waterfall charts for those browsers. But given the popularity of Firebug, we'll stick with that for now.

Installing Firebug

To use Firebug, you need to have the Firefox browser installed on your computer. Get it for free at http://www.mozilla.com/.

Once you have Firefox running, use it to open the Firebug home page at http://getfirebug.com/.

Here you'll find a link that installs Firebug.

Creating the Waterfall chart

Now that you have Firebug installed, create a Waterfall chart:

1. 1. In Firefox, open the Tools menu, choose Firebug, and then choose Open Firebug or press F12. The Firebug bar appears at the bottom of the browser window.

2. 2. In the Firebug bar, click on the Net drop-down and select Enable. Also, make sure that the All option is selected below the Firebug bar.

1. 3. Browse to a page in Firefox. You will see the Waterfall chart of the various components on the page appear.

Interpreting the Waterfall chart

That chart is certainly very colorful, but what does it all mean? Actually, Firebug provides a lot of information in the Waterfall chart, including full request and response headers and timeline information. Also, it's easy to save all this information to a file.

Request and response information

Click the little + sign to the left of a filename in the Waterfall chart. You'll see a drop-down with the full request and response headers that were sent when the file was retrieved.

But wait, there is more:

• In the drop-down, click on the Response tab to see the contents of the file.

• If the URL of the file had query string parameters, they are shown in a Params tab.

• If this was a POST or PUT request, there is a tab with the sent data.

• If it is an HTML file, the HTML tab shows the actual page created by the HTML, which is very handy for iframes.

• If the response came in the form of a JSON file, you'll find a tab with the data in the form of an expandable tree. For more information about JSON, visit http://www.json.org/.

Timeline information

Hover the mouse over a colored bar to see detailed timing information:

Here is what the numbers mean:

DNS Lookup	Time taken to find the IP address of the server holding the file, based on the file's URL.
Connecting	Time spent creating a TCP connection.
Queuing	Firefox limits the number of outstanding requests. If it finds an image or some other file in the .aspx page while Firefox is already at the maximum number of outstanding requests, it queues this new file. Queuing shows the time spent by the file in this queue.
Waiting For Response	Time spent waiting for the first byte of the file from the server.
Receiving Data	Time spent in receiving the file.
'DOMContentLoaded' (event)	Time between the start of the DNS lookup of this request and the entire DOM (Document Object Model) being ready. The DOM is the browser's internal representation of the HTML on your page. When the DOM is ready, the visitor can look around the entire page, even while some items are still loading. This number can be negative if the request started after the DOM became ready.
'load' (event)	Time between the start of the DNS lookup of this request and the page having been fully loaded, including the images.

In addition to this timing popup, there are two more. Hover over the file size to see the precise size of the file in bytes. To see the full URL of a file, hover over its name.

Page-level information

At the very bottom of the Waterfall chart, you will find the total number of files making up the page, their total size and the total page-load time:

Saving information

To save the headers to the clipboard, right-click on a file to get a popup with a save option. You can then paste the headers to a text file.

To save the entire chart to a file, use the NetExport extension for Firebug available at http://getfirebug.com/releases/extensions.html.

Once you have this installed, an Export button appears above the Waterfall chart, next to the All button. This exports the chart to a .har file.

If you open the .har file in your favorite text editor, you'll find that the file stores the information in JSON format.

The easiest way to view your .har files as a chart is with the online viewer at http://www.softwareishard.com/har/viewer/.

This not only shows the Waterfall chart saved in the .har file, but also throws in some additional statistics:

• How much of the total wait time was taken by the various components of each request (DNS lookup, receiving the page, and so on)

• The proportion of the total page weight in bytes taken by the .aspx file, images, CSS files, and so on

• The proportion of the total page weight that came from the internal browser cache rather than over the Internet

• The size of the request and response headers as compared to the request and response bodies