The Basics of Reading a Website Performance Waterfall Graph

When you’re using various tools to get information on what exactly is making your website slow, the most common method to display detailed information is a waterfall graph.

In this article, I will show you some tools that provide waterfall graphs and also give an explanation of how to read a simple waterfall graph.

The tool used in this graph is AOL Pagetest.

Some other tools that use waterfall graphs are:

• Firebug
• IBM Page Detailer
• Microsoft Fiddler 2
• OctaGate SiteTimer
• Site-Perf.com

Actually reading this graph is far easier than it looks.

The wider the graph, the slower your site is.

Any item that makes the graph wider by itself is singlehandedly making your page slower.

Each item is a “request”, where the browser talks to your web server to request a document.

In AOL PageTest, the time that the user first sees content (referred to as “Start Render”) is denoted by a green line that runs vertically along the graph.

Thus, my site shows a white page for 2.5 seconds until the first three resources have finished loading.

After the green line, the user can scroll around on the page, but other items are still downloading!

The dark blue line at the end is when the browser stops showing the loading indicators and when the page is considered “finished” loading:  anything loaded after this point is not preventing the page from loading faster.