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 Splunk platform for the home page of the Splunk 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.


Waterfall Chart - Columns 1

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.

Request and Response Headers



Rigor Waterfall Chart Column 3

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.)


Rigor Waterfall Chart Sizes

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. 

As technology has progressed, web designs now may include large, complex CSS and JavaScript files. If you suspect that your design is affecting performance, pay special attention to the sizes noted in these columns. You may need to compress, minify, or concatenate some files.


Rigor Waterfall Chart Column 5

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.


  • 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.

Waterfall Chart 500 Error

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.

Rigor Waterfall Chart Long Bars

3. Look for big gaps between requests. As demonstrated in the following example, these gaps represent times when no requests happened, such as when JavaScript was executing or the browser was processing.


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.