Waterfall graph

A waterfall graph is available for every data point in your measurement. To access the Test details page, and from there, the waterfall graph, drill down from:

If the measurement has multiple pages, you will first see the transaction summary, from where you can select a page to view its waterfall. If the measurement has a single page, you are directly taken to the waterfall when you drill into the scatter plot. You can access a waterfall by clicking a data point in the scatter plot graph (Performance Graph tab) or tabular data (Page Detail or Error Detail in the Table tab).

A waterfall graph shows every element downloaded for a web page, in the order requested, with graphical displays of the time taken for each so you can visually view an element's download time in relation to other elements and the overall page download time as well.

The waterfall graph consists of these main sections:

  • User experience metrics for the selected page in the measurement data point
  • Page resource display with graphical representation of download times, listed in the order requested and indented to show the offset from start of page navigation when the resource was called—you can view the components of each resource's download time.

The waterfall graph also contains controls to:

User experience metrics

The top of the waterfall graph displays the measurement name and data point details such as time stamp, browser, and agent.

Following measurement and data point details, these page-level metrics are displayed at the top of a waterfall graph:

  • Network time – Also called Total Network Time or Total Time The total time of all network traffic for a page (not the sum of download times for all the resources)—it starts from the base page's DNS lookup and ends when the last packet of the last resource has been delivered for processing.
  • UX time – User experience time is the total time elapsed from when the browser started navigating to the page until it finished loading page contents. UX time is equal to or higher than network time to include times when there is no network activity, as when the system processes resources.

Note

UX time is not reported for Emulated Browser Monitoring (ApP) measurements.

  • Time to full screen - Indicates the time for a page to appear by showing when a specified page element begins to download. This metric only appears for Real Browser Monitoring (TxP) scripts where time to first screen is configured as a special custom component for in KITE.
  • Size – Total number of bytes downloaded from the web server
  • Elements – Number of resources downloaded (matches the numbered rows in the waterfall graph)
  • Connections – Number of TCP/IP connections opened (matches the number of resources with Initial Connection times)

You can use the Actions menu to generate a Browser Connection View graph. This graph page shows resources grouped by the network connections over which they are served.

  • IP addresses – Number of IP addresses to which connections were made (equal to or less than the number of connections, as multiple connections can be made to the same IP address)
  • CSS – Number of CSS resources downloaded
  • JS – Number of JavaScript resources downloaded
  • Images – Number of images downloaded

Resource waterfall

Each resource downloaded on a web page is displayed in the waterfall graph, numbered and listed in the order it was requested. A colored bar represents components of the download time of the resource. The bar is indented in the Timeline from the start of page navigation (0s) to show the moment when it was called. The resource download time is shown near the bar.

The Timeline scale is the page UX time divided by 10.

Hover over a resource bar to view details of the components of download time, each represented by a different color. Where applicable, third-party information is also presented.

Available components are:

  • DNS Lookup – Time required to resolve the IP address of the host—the time appears only if resolution occurred.

  • Initial Connection – Time to open a TCP/IP connection—the time appears only if TCP/IP connection is established. If the connection is reused for another resource, it does not appear in that resource's download time.

  • SSL – Time to establish an SSL connection—the time appears only if an SSL connection is established.

  • Request Time – Time required to send an HTTP request to the server

  • First Byte Download – Time between the end of the request and the arrival of the first packet of the response (all resources report this component)

  • Content Download – Time spent downloading all content of the resource. If the content is downloaded entirely in the first packet received and no additional packets are downloaded, this component is not reported.

  • Client Time – Total time spent to download the resource less any time spent for interaction with the network In the example below, the resource's total time is 45ms. However, component times add up to 37ms, leaving a Client Time of 8ms.

    Client time accounts for the gap that occurs on newer browsers when a connection is already opened but the resource request is not yet made, when the DNS host has been resolved but the connection has not been made, or other such gaps between components.

You can view these component times (where available) for every resource by displaying columns for them.

Other information included in resource details (some of these fields can also be displayed as columns in the timeline for every resource):

  • Filename and total download time
  • Exact offset from start of page navigation
  • Third-party category and vendor (where applicable)
  • Resource metrics such as network time, UX time, and size
  • File type and format, e.g., text/html, or image/jpeg
  • IP address
  • HTTP status code explanation

If your measurement has a page with a content error (yellow data points in a scatter plot), resource errors are shown in red in the waterfall. If your measurement has failed (red data points in a scatter plot), the error is shown in red above the waterfall and any resource errors are shown in red in the waterfall.

Resource trend information

Hover over any resource's shortened URL to see the complete string.

Click the link to see a trend graph of the resource's performance and availability in the 24 hours prior to this data point. The graph lets you see the resource's performance in context to check for any trends or outlier values. Data aggregation is by the minute; other than that, every data point is shown on the graph.

You can select an area of this graph to zoom in to it. Click Reset Zoom to zoom out.

 

Hover over any performance point to see the corresponding value. Hover over any availability bar to see the corresponding value at the base.

    

Click Open Link to open the object URL. This is useful to check if the resource can be accessed.

Page-level browser events

You can view how overall page download time stacks up against the download of individual resources by overlaying the Timeline with Browser Events.

Overlaying browser events allows you to see which resources were downloaded before/after page download milestones.

The Browser Events menu displays any of the following browser events with a value greater than 0 on your page:

  • DOM Loading - Time from the start of page navigation to the start of processing content (loading DOM)
  • DOM Interactive - Time from the start of page navigation to DOM interactive (current document status = interactive)
  • First Paint - How long the measurement was running when the browser started displaying the current page
  • DOM Content Start - Time from start of page navigation to when the domContentLoaded event is fired
  • DOM Content End - Time from start of page navigation to when domContentLoadedEnd event is fired
  • DOM Complete - Time from the start of page navigation to completion of content processing (domComplete)
  • Load Event Start - Time from the start of page navigation to the start of the load event, i.e., before the load event of the page is fired
  • Load Event End - Time from the start of page navigation to the end of the load event

Note

Browser events are not available for Emulated Browser Monitoring (ApP) measurements.

By default, Time to first paint and Load event end are graphed. You can change the browser events displayed.

Your browser eventfilter and highlight, column, or preset views selections are stored in local storage; these settings persist across sessions, or until you clear local storage. Browser event selection also persists within a session when you add/delete columns or switch between preset column views.

Customizing column display

By default, the waterfall graph displays information on the resource URL (shortened), domain, link to view PurePath information, HTTP status, size, and download bar (Timeline column). You can customize this display using the Columns control; check marks indicate displayed columns. You can sort by any column by clicking on the column header.

  • Domain - Domain that the resource was served from
  • Content type - text, CSS, JavaScript, image, or other content type (You can filter or highlight certain content types.)
  • PurePath (must be enabled) - Click the PurePath icon  to view PurePath trace information in the Dynatrace Client.
  • Status - HTTP status code—hover over the code to see a short description . A longer description can be found in resource details.
  • Protocol - HTTP or HTTPS
  • Size - Resource size
  • IP address - IP address from which resource was served
  • Start offset - Time offset from start of page navigation when object was requested
  • Client time - Total download time less any time spent for network interaction (see resource details above for an example of client time)
  • Total time - Total download time, including any client time
  • Service - Whether a resource is primary or third-party content
  • 3rd party category - For third-party resources, the category, e.g., Advertising, Analytics and Tracking
  • 3rd party owner - For third-party resources, the vendor/owner, e.g., Google, Facebook
  • You can also display columns for all component times: DNS lookup, Initial connection, SSL, First byte download, Content download (see resource details for an explanation of these values)
  • Timeline - Graphical representation of resource downloads shown from start of page navigation to page completion

You can also choose from preset column configurations:

The Default Layout displays the timeline (with resource bars) with resource URL and size, domain, status code, and PurePath icon (if any). The Simple Layout shows the URL, status, PurePath icon, and timeline. The Advanced Layout shows all columns except the timeline.

Your browser eventfilter and highlight, column, or preset views selections are stored in local storage; these settings persist across sessions, or until you clear local storage. Browser event selection also persists within a session when you add/delete columns or switch between preset column views.

Filtering and highlighting content

Several controls enable you to filter or highlight the resources displayed in the waterfall graph. You can sort by any column by clicking on the column header.

You can type any search string in the Filter field—resources are dynamically filtered as you type.

Notes

  • You can only filter by text visible on the screen, e.g., you cannot filter by an IP address if it only appears in the IP Address column and that column is not displayed.
  • You cannot use wildcards in your search string.

You can filter by content types (Resources)—CSS, JavaScript, Images, and 3rd party services.

The Highlight feature allows you to highlight certain content types or file sizes in different colors in the waterfall.

Your browser eventfilter and highlight, column, or preset views selections are stored in local storage; these settings persist across sessions, or until you clear local storage. Browser event selection also persists within a session when you add/delete columns or switch between preset column views.

Other actions

Click the timestamp to see a list of all data points within that clock hour for which a waterfall is available for the selected page. Use the arrow buttons to scroll through data points.

Use the page controls to scroll through waterfall graphs for different pages in a data point.

Screenshot thumbnails are displayed at top right. Successful data points display a reference screenshot on the waterfall for each transaction page. Error data points display an error screenshot and a reference screenshot for each waterfall page. Click a thumbnail to view the entire screenshot.

The action buttons enable you to:

  • Download a HAR file with all the data used to generate the waterfall graph (Download HAR data).

  • Generate a Browser Connection View graph. This graph groups resources by the network connections over which they are served.

  • Share the waterfall graph page with another user not logged in to MyKeynote—click Post Graph. Short and long versions of the shareable URL are displayed for you to Copy. You can download HAR data for posted graphs.

    Name and Save the graph to the Home dashboard. You can have up to 20 saved graphs.

Comparing data points

You can opt to compare data points from a scatter plot by clicking Compare and then clicking to select two data points. When the waterfall for compared data is rendered, resources are color coded so you can tell which data point they belong to. Resources are grouped (and color-coded) by the start of download time.