Whether you’re already familiar with waterfall charts or they’re new to you, you may be looking for some help with interpreting their lines, numbers, and colors. This article will give you an overview of six columns you are likely to see on a waterfall chart and share tips for using the information found within the chart to diagnose and address speed issues.
Six Columns You May See On a Waterfall Chart
This article will use a waterfall chart generated on the Rigor platform for the home page of the Rigor Knowledge Base as its primary example. The sample chart has been set to show the default view of six columns, though a user can customize the view with additional columns (including server IP address, domain, and connection) if desired.
OVERVIEW, HTTP METHODS, RESOURCE NAME
Start by looking at the very bottom of the chart to find an overview. On this chart, you can see that there are 22 requests, the total page size is 386.4 KB, it took 1.49s until the end of the last request, and it took 1.42s until the onload event fired.
Now move to the first column in this waterfall chart, where you will see HTTP methods. In this example, you can see that most of the requests are GET requests, although there is also one POST request. A waterfall chart for a different page might show additional HTTP methods – read more about them here.
NOTE: If your waterfall chart shows many requests or round trips, you may want to consider joining some resources, such as by creating a sprite sheet for icons and symbols.
The second column shows the name of the resource. When you hover over the name, you will see the URL path where the resource is located.
If you’re looking for more information about the request or the response, you can drill down even further to the Headers section. Click on the name of any resource to expand the Headers section and see available information about the Response Headers and Request Headers, as shown below.
HTTP RESPONSE CODE
The third column shows the HTTP response code that was received. In this example, most of the response codes are 200, with a single 301. (Learn more about HTTP response codes here.)
TRANSFER AND CONTENT SIZE
The fourth and fifth columns show the size of the resource – compressed and uncompressed (you can also choose to show just one or the other). When you hover over the size of a resource, a pop-up will appear comparing the compressed and uncompressed sizes for the resource in both KB and bytes.
TIMELINE WITH REQUEST PHASES
The sixth column features a timeline for your page load that starts at 0 ms and ends at the time it took for your last request to finish loading.
If you hover over any of the resources in this part of the waterfall chart, a legend will pop up that will help you interpret the lines and colors that represent requests.
TYPES OF REQUEST PHASES
- Blocking: time spent in the browser queue waiting for a network connection
- DNS lookup: time for the DNS to resolve
- Connecting: time required to create a TCP connection
- Sending: time sending request data to the server
- Waiting: time waiting for a response from the server
- Receiving: time downloading the response body
In the example above, when you look at the first GET request in this chart, you can see phases of connecting (green), sending (red), waiting (purple), and receiving (blue).
How to Diagnose Speed Issues with a Waterfall Chart
Here are three simple ways to diagnose what may be slowing things down:
- Look for red text. If you have 400 or 500 error response codes for resources in your waterfall chart, you may see the name of the resource marked in red text. This indicates an error retrieving that resource. The below example shows a 500 Internal Server Error on a waterfall chart, but you could see any individual request fail within the makeup of a page.
2. Look for long bars. In the following example, the long bar represents an exceptionally long time for a DNS lookup to find a custom font on a site.
Waterfall charts are visual tools that can be used to review a site’s performance and to provide insights about how specific assets may be negatively affecting page speed, performance, and user experience. Learn even more about waterfall charts here.
Rigor’s professional services team can help you analyze your performance data so you can get fast and stay fast. Reach out now for a free trial.