HTTP Waterfall

The HTTP Waterfall page includes both a graph and a table. The graph displays throughput values. The table displays the list of requests and resources sent over the network. Using this information, you can locate bottlenecks in your application and address them accordingly.

General analysis

The following image shows an example of the HTTP Waterfall page from VuGen:

You can:

  • Click a resource to see more details.

  • Click any of the table headers to sort the table according to the column.

    The table displays the list of requests and resources sent over the network, in the order that they were loaded.

  • Highlight a section of the throughput graph to view only that section's details in the table.

Item

Description
Graph

Visual display of emulated network transaction time.

Drag the handles to focus on a specific time frame in the timeline. Only the resources within the selected time frame are then displayed in the table.

Click a resource in the table to highlight the associated section of the graph.

Filter

Filters the resources that are included in the report.
Columns

Highlight

Click to highlight other resources in the table that were downloaded:

  • From the same host
  • During the same session

Code

The HTTP status code, such as 404 (page not found) or 200 (OK).

Optimization

Indicates that there are recommendations that you can perform to improve performance.

Switch between desktop and mobile views to see mode-specific optimization suggestions.

Resource The resource that was downloaded. Hover over the resource to see the full path.
Type

The type of resource that was downloaded. Possible types:

Host The host from which the resource was downloaded.
IP The IP address of the host from which the resource was downloaded.
Size The response body size (bytes).
Time Response time in milliseconds.
Server Time Time estimate for the web server to process the request and prepare the response.
Page

The URL of the web page from which the resource was downloaded.

Relevant only for TruClient.

Timeline The position of the resource in the timeline. Hover over a timeline to see the start timestamp.

HTTP Metrics

Click a row to view the following for the selected resource. The graph highlights the time frame.
Request Headers The request header details.
Response Headers The response header details.
Timeline Breakdown Breakdown of the time taken for the resource to be processed.
Resource Displays the resource's full URL and a link to the resource.
Optimizations Recommendations for optimizing the selected resource.

Back to top

TruClient analysis

The following image shows an example of the HTTP Waterfall page for a TruClient script:

In addition to the data on network traffic, you can also view the client-side breakdown, enabling you to:

  • inspect events in the client as they correlate to the network calls
  • analyze which steps in the client triggered network traffic
  • understand how slow resources impacted the events in the client

Examine an entire transaction, or focus on and analyze a single page.

Client events graph

The client-side data breakdown can help you measure the quality of the user experience on your application.

The bar below the graph indicates the duration that each visited page was open during the transaction.

Each page is displayed in a unique color.

  • Shaded section – the time during which the page received resources.
  • Clear section – the page remained open but there was no network traffic.

You can track the following client events. Learn how

Item Description
Start render

The point in time, after the client request was sent, when something was first displayed to the client screen.

DOM loaded

The point in time when the HTML document is loaded, but before images, style sheets, and subframes on the page are fully loaded.

Page loaded

The point in time when the HTML document is loaded, including images, style sheets, and subframes.

Client events for a page are indicated by lines in the same color, according to the legend.

For example, by hovering over the dotted line in the graph, you can see data for the DOM loaded event:

This example shows a transaction that included navigation through multiple pages in one window:

Duration bars, displayed under the graph one on top of another, represent traffic in separate browser tabs or windows. In this example, three browser tabs or windows are open:

Client-side breakdown popup

When you click a page on the bar, a popup opens with data for all client actions and events (see example below).

You can explore which network calls occurred before or after each client event, and isolate the resources that need to be optimized in order to shorten the client loading time.

Popup Item Description
Page title The URL of the selected page.
Duration The time during which the page received resources, and the total time the page was open during the transaction.
Show only this page

Displays data for the selected page only in the graph and table.

To return to the full transaction view, click Exit zoom in the toolbar at the top of the page.

Steps

Lists all client actions that were performed while that web page was open, such as clicking a link or filling in a form field.

Note: By default, the web page image is not displayed unless enabled in the TruClient script's Runtime Settings.

  • Click a step to view the relevant section marked in the timeline in the graph and table.
  • Click the image on the right to view a snapshot of the page captured during the selected step.
Loading Process

Loading times for each client event.

How to examine the client-side breakdown data

  • Click or hover over a client event in the throughput graph and see an indicator in the Timeline column of the table.

    For example, click the Dom Loaded event in the throughput graph, and see where it falls in the timeline.

    Tip: Click one event and then hover over another to compare the two events in the Timeline.

  • Click a page on the bar to display a popup with data on all client actions and events.

    For more details, see Client-side breakdown popup.

  • Click a step in the popup and see an indicator below the graph of relevant section, and in the timeline. You can also see the network calls that were performed during that step.

    For more details, see Client-side breakdown popup.

  • To identify potentially problematic issues, consider the following:

    • Does the Start render event occur a relatively long time after the first page request was sent?
    • Is there a particularly long gap between the time the last resource was received and any event?

HTTP Waterfall Toolbar

Option Description
Clear Markers

Removes the event indicator line and other markers from the graph and table.

Zoom

To display a section of the graph in greater detail, drag the markers as needed and click Fit to zoom .

To return to the full transaction view, click Exit zoom .

Client information

Show or hide client-side information in the report.

Filter

Filter the resources that are displayed in the report according to pages or events.

Back to top