Categorizing bottlenecks using Waterfall charts

Before we saw how to create a Waterfall chart with Firebug, we discussed the four broad categories of bottlenecks that slow down page loading:

• Main .aspx file taking too long to generate

• Main .aspx file taking too long to load

• Images (and flash files) taking too long to load

• JavaScript and CSS files blocking page rendering

The following sections show how each broad category expresses itself in a Waterfall chart generated by Firebug. Each section also refers you to the chapter where you'll see how to further pinpoint the bottleneck and then fix it.

Scenario 1: Main .aspx file takes long to arrive

In the chart below, the top line is for the main .aspx page. The purple section shows how long the browser waited until it received the first byte. It shows a situation where the browser has to wait a long time for the first byte of the .aspx file. Obviously, this delays loading of all other components, because it is the .aspx file that tells the browser which images, CSS files, and so on to load.

If your web page produces a similar Waterfall chart, you will want to focus on reducing the time it takes the web server to generate the .aspx page. Refer to Chapter 2, Reducing Time to First Byte, where you'll see how to pinpoint web server issues, code issues, and so on.

Scenario 2: Main .aspx file takes long to load over the Internet

In the chart below, the top line still refers to the .aspx file. In this scenario, the purple section shows that the browser didn't have to wait long for the first byte of the .aspx file. However, the grey section shows it took a long time to load the entire file over the Internet. This, in turn, delays loading of those images and other files that appear towards the end of the .aspx file.

To see how to deal with this scenario, refer to Chapter 9,

Scenario 3: Images take long to load

This chart shows a common scenario, where the .aspx file is quick to arrive and load, but the images on the page take a long time to load. Fortunately, browsers will load a number of images in parallel rather than one-by-one, speeding up the process. However, the number of images loaded in parallel is limited by the browser to avoid overloading the connection; the exact limit depends on the browser. As a result, on pages with lots of images, some images will wait for other images to load first, thereby increasing the page load time, as shown in the following screenshot:

Refer to Chapter 12, Reducing Image Load Times to see how to get your images loaded sooner in a variety of ways, including browser caching and removing unused bytes to reduce image file sizes.

Scenario 4: JavaScript file blocks rendering

This chart shows a less common scenario, where a JavaScript file blocks rendering of the rest of the page. This can have a big impact on overall page load time.

When an external JavaScript file starts loading, rendering of the rest of the page is stopped until the file has completed loading and executing. This ensures that the JavaScript coming later in the page can use JavaScript libraries that were loaded and executed earlier on. CSS files also block page rendering in order to ensure that the visitor is not exposed to the raw , unstyled version of the page.

The following chart shows a different scenario where JavaScript code blocks rendering of the rest of the page, not by being slow to load but by taking a long time to execute. This could be caused by both external JavaScript, which is loaded from an external file, and by internal JavaScript which sits in the main .aspx file.

Solutions for this scenario include reducing the download time of JavaScript files, loading them after the page has been rendered, and loading them on demand. Chapter 13, Improving JavaScript Loading goes into the details. It also shows how to improve loading of your CSS files, and how to ensure that the advertisements served by external advertisement networks do not block rendering of your page.