The aggregated resource waterfall widget takes the traditional web page waterfall concept and applies it to the data available from real user measurement (RUM). Rather than present absolute values for a single test, the aggregate resource waterfall shows the distribution of resource load times relative to page construction timers.

It lets you correlate individual resource performance, page load performance, and relative page timing milestones to see how a resource performs not just in the moment, but over time.

📘

Note

To use this widget, you'll need to enable resource timing for your web app.

The aggregate resource waterfall widget is available from the widget type directory as shown in this example. To add this widget to a custom dashboard, see Create a custom dashboard.

The aggregated resource waterfall widget uses area charts to show how often resources were loading at any time in the page load as shown in this example.

The x-axis shows the percentage of page load completion relative to the chosen timer, instead of the absolute time in seconds. This normalization of resource performance against variations in the overall page load allows mPulse to present resource timing data aggregated across all user sessions, while also reducing noise in the data from variable connection speeds, device types, and user location. The shape and position of the distributions tell you more about the resource performance and loading patterns, potentially across millions of page loads.

Any filters that you set in mPulse are recognized in the aggregated resource waterfall view, allowing direct comparison of waterfalls by browser, device type, or whether the visitor was a bot or not. Start with a 30 minute time window. Waterfall results usually takes several minutes to load.

Resources are initially grouped by host to condense the vertical size of the waterfall. Selecting a host group expands and focuses on that host for further analysis as shown in this example.

Resource selections (HTML, CSS, script, image, font, XHR, unknown, text) are at the top of the widget and can be filtered by type.

For example, if your focus is on third-party JavaScript, double-click the script filter to narrow the view as shown in this example.

Click the script to see the percentage of requests relative to the page load time.

Performance treemap

This widget shows aggregate performance data by device type, page group, browser and country. The hierarchy is shown at the top of the widget, the current view is highlighted in a lighter color and the hierarchy can be re-arranged by clicking on the direction arrows next to the text.

The color of the nodes indicates relative performance, the scale is shown at the bottom of the widget and can be adjusted by dragging the colored markers.

The aggregation toggle switch can be turned off to disable aggregation of beacons by hierarchy.

Resource treemap

This widget shows aggregated resource performance by media type and host. The hierarchy is shown at the top of the widget, the current view is highlighted in a lighter color and the hierarchy can be re-arranged by clicking on the direction arrows next to the text.

The color of the nodes indicates relative performance, the scale is shown at the bottom of the widget and can be adjusted by dragging the colored markers.