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.
The following image shows an example of the HTTP Waterfall page:
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.
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.
|Filters the resources that are included in the report.|
Click to highlight other resources in the table that were downloaded:
|The HTTP status code, such as 404 (page not found) or 200 (OK).|
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.|
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.|
The name of the flow.
|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.|
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.|
|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.|
StormRunner Load analysis
Note: Supported for TruClient scripts only.
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.
This section includes:
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
The point in time, after the client request was sent, when something was first displayed to the client screen.
The point in time when the HTML document is loaded, but before images, style sheets, and subframes on the page are fully 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:
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.
|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.
Lists all client actions that were performed while that web page was open, such as clicking a link or filling in a form field.
Loading times for each client event.
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?
Removes the event indicator line and other markers from the graph and table.
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 .
|Show or hide client-side information in the report.|
Filter the resources that are displayed in the report according to pages or events.