Reading time 4 min

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

Waterfall Chart - Columns 1Start 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

HTTP RESPONSE CODE

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

TRANSFER AND CONTENT SIZE

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.

TIMELINE WITH REQUEST PHASES

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.

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:

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

waterfallchartgap

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.

Suggested Blog Posts

The Perception Gap for Poor Web Performance

E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online.  However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...

Read More

Using Browser Trends to Maintain a Better Site

Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design...

Read More

Finding Causes of Intermittent Errors from Google Webmaster Tools

Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...

Read More

Optimization Options not Always Optimal

Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...

Read More