Waterfall / Timeline

The waterfall is the chronological representation of the network traffic associated with the loading of a web page, with all the HTTP requests sent by the browser and the associated HTTP responses.

timeline/waterfall overview

It contains temporal information, as well on the establishment of network connections as on the transfer of data. We can also find useful information for the good understanding of the loading of the page, as for example the weight of the various resources, the HTTP statuses or the HTTP headers sent on each request and response.

Dareboost includes an interactive waterfall in its analysis reports, its comparison reports, and also the detailed steps reports of its User Journeys feature.

General introduction

Above the waterfall itself, there is a "Timings" section, listing the values ​​of all performance metrics for the page. You can select the ones to be displayed on the waterfall (as vertical lines), so you can analyze them with the related network traffic.

timeline timings

A second section displays the Long Tasks (web browser being busy for more than 50ms) and the Total Blocking Time value. The Long Task(s) related to the Max Potential FID is highlighted with a different color.

timeline long tasks

The next section is dedicated to the waterfall itself, with the sequential list of all HTTP requests. Those information are displayed by default:

  • The HTTP method (in most cases GET or POST).
  • The URL, or more exactly the name of the resource. The full URL is displayed when hovering over the name.
  • The HTTP Status (200, 301, 404, etc.)
  • The response size
  • Its placement on a time axis, with a breakdown of the different steps between establishing the connection and receiving the response.

Regarding this last part, you can hover over the request representation to obtain detailed values on the request and response time milestones:

Request tooltip
  • DNS Lookup: the time required for DNS resolution. Note that Dareboost uses DNS server (Google).
  • Connecting: the time needed to establish the TCP (and possibly SSL) connection required for HTTP communication.
  • Waiting: the time between the HTTP request being sent and the start of the response being received.
  • Receiving: the time between the beginning and the end of receiving the response.

In order to realistically reproduce the context of an Internet user, Dareboost injects latency on all these steps, with the exception of the DNS Lookup. All observed delays are therefore dependent on the nature of the connection configured for your tests. This is especially true for the Connecting step, which will suffer latency on both the TCP connection and on the SSL connection (if applicable).

Please note that the DNS Lookup and Connecting steps will not always be present. DNS resolution is required only once per domain, and TCP (and SSL if applicable) connection will only be required if an existing TCP connection is not used.

For more information on a given request/response, you can click on the line:

Waterfall details http headers

You can find the full URL of the request, the related IP address, the HTTP headers of the request and finally of the response.

Customizing the waterfall: the available information

A lot of information are directly available in the columns of the waterfall. You can customize them at any time with a right-click (or by clicking on the configuration icon located on the left of the column names) to display the configurator.

Waterfall column settings

You can enable/disable the information to be displayed according to your needs, then close the configuration window.

Your display settings will be saved automatically for future use of the waterfall, even if you are viewing a different report.

Here is a quick description of each column available on the waterfall:

  • Method: the HTTP method used by the request (GET, POST, PUT, etc)
  • Url: the name of the resource. The full URL is displayed when hovering over the name.
  • Domain: the domain you are sending the request to (e.g. example.com)
  • Status: the status of the HTTP response (200, 301, 404, etc.), of the cache ("from cache") or the error on the request (e.g. "Request blocked by the browser" if you use our AdBlock or Blocklist / Allowlist features).
  • Type: the type of content associated with the request (Stylesheet, Image, XHR, etc)
  • Size: reponse size (as transferred over the network, will be the compressed size of the resource if it is compressed). Hover the value to get some details.
  • Protocol: the protocol (http/1.1, h2, etc.)
  • Scheme: the URL scheme (http,https, wss, etc)
  • Remote Address: the IP address of the server (obtained after domain DNS resolution by Google DNS
  • Initiator: the resource and related source code line initially triggering the request (example: analytics.js: 28). Any associated call stack will be available when hovering over the Initiator value.
  • Time: the total time between sending the request and retrieving the complete response
  • Priority: the priority given to the request by the web browser
  • Timings: the chronological breakdown of the various stages of the request/response communication.

Filter and sort

The filter functionality is available just above the timeline itself. You will be able to enter a text to display only the requests containing that text into their full URL.

You can also enable another filter to select queries by their type of content: All, Document, Stylesheet, Script, Image, Media, Font, XHR, WebSocket, Other.

Waterfall filters order

These 2 types of filters can be used independently as well as in combination. The area at the bottom left of the waterfall will show you the number and weight of the filtered elements compared to the total of the requests.

You can click on any column name to sort the waterfall elements according to the value of this information. A first click will apply an ascending sort. Click a second time to obtain a descending sort.

A good approach to study your third-party content (external dependencies) is to display the Domain and Initiator columns and then use the sorting features on those columns.

Back to Table of Contents