High-level diagnosis with Waterfall charts

Because our goal is to make a given web page load quicker, let's enumerate the components that make up a web page:

• The file with the HTML: In the ASP.NET world, this file normally has the extension .aspx. Because of this, in the remainder of this book, I'll refer to this file as the main .aspx file. Without this file, there is no page. Generating this file most often takes most of the server resources required to generate the overall page.

• Images and flash files: These files are often large and numerous.

• JavaScript and CSS files: These files can block rendering of the page.

Based on this, we can categorize bottlenecks that slow down the page-loading into these broad categories:

• Main .aspx file takes too long to generate

• Main .aspx file takes too long to transfer from server to browser

• Images (and flash files) take too long to transfer

• JavaScript and CSS files block page rendering

In order to speed up loading of a page, we need to know in which of these categories the bottleneck falls. This is the focus of the remainder of this chapter. Once you know the broad category, you can further pinpoint the bottleneck and fix it. You'll see how in the subsequent chapters.

How do I figure out in which broad category the bottleneck falls? A simple way to do that is with a Waterfall chart.

A Waterfall chart shows the components that make up the page, in which order they get loaded by the browser, and more importantly, how much time they take to load. It looks similar to the following:

If for example, the main .aspx file takes too long to load, the Waterfall chart will show a very long bar for that file.

In a little while, we'll see how to figure out the broad category of the bottleneck in a Waterfall chart. But first, let's see how to produce such a chart.