How to use "Visually complete" and "Speed index" metrics

Visually complete is a point-in-time metric that measures when the visual area of a page has finished loading. Visually complete metrics are typically shorter in duration than comparable metrics (for example, page load time and DOM interactive measures) because users perceive complete page load before 100% of background page elements have loaded. Optimizing visually complete timing is more valuable than optimizing other page load timings in terms of user experience as it reflects the amount of time that your real users spend waiting for above-the-fold content to load completely. Results are sortable based on location, device, operating system, and browser type.

Visually complete means that all elements within the visible area of a web page are 100% loaded:

Elements
Images
IFrames (only images)

The visible area extends from the top of the page to the bottom of the browser window (user scrolling doesn't affect the page area used for measurement).

Visually complete has the following benefits:

Lets you see exactly how long it takes your end users to see the information they're looking for.
Provides a true business-relevant metric from the perspective of the user.
Gives 100% visibility into actual real user experience, regardless of device.
Aligns IT and business in connecting user experience with business outcomes.
Accelerates performance improvements.
Optimizes decisions across development, operations, and user experience.
Can be combined with powerful waterfall charts for understanding and improving page rendering times.

Along with Speed index, Visually complete shows the total time taken by an entire page to load. Therefore, these metrics are collected only for main frames, not subframes. In cases where the frames are cross origin, and there is no way of knowing the parent frame, collection of Speed index and Visually complete is attempted for sub frames too.

Use Visually complete as a key performance metric

By default, "Visually complete" is the key performance metric that's applied for evaluating the performance of all load actions and XHR actions. "Visually complete" and "Speed index" timings are captured by default for all applications that have Real User Monitoring enabled.

You can change the key performance metric used for load actions and XHR actions. You can also disable capturing of "Visually complete" and "Speed index" timings, however re-enabling capture resets the anomaly detection reference periods defined for the application.

To set the key performance metric for an application

Select Applications and select the desired application from the list.
Click Edit on the menu bar.
In Application settings, click General. In the Select a key performance metric for this application section, select the key performance metric from the list for each of the user action types (Load actions, XHR actions, and Custom actions).

To disable capturing Visually complete and Speed index timings

Select Applications and select the desired application from the list.
Click Edit on the menu bar.
In Application settings, click Content Capture.
Turn off the Visually complete & Speed index setting.

Use Visually complete with single page applications

For single page application frameworks like Angular, "Visually complete" gives even more accurate timings for user actions. Previously on application load, captured user interactions had to be correlated with XHRs that were fired afterwards. With "Visually complete", timing doesn't stop when XHR responses are returned. Because of this, you can get additional insight into dynamic resource loading triggered by JavaScript-based DOM element changes from the XHR call response.

Correlate user performance with business metrics

Performance is one of the main drivers of user experience and successful business outcomes. The "Visually complete" metric provides this analysis out-of-the-box.

Visually complete for user action analysis

Visually complete and Speed index are captured for each step in a user action.

In DESK, select Applications, then select the application to be analyzed.
Under Performance analysis, click the actions section to display user action data.
In the Top 3 user actions tile, click View full details.
Under Key user actions or Top 100 user actions, click an action to see contribution timings and the step's action timeline in the Contributors breakdown tile. The action timeline shows timings for all the relevant action stages, including "Speed index" and "Visually complete". The performance metric used for the step is displayed at the top of the timeline, so you can quickly tell if "User action duration" or "Visually complete" is used as the performance metric.

Troubleshooting Visually complete and Speed index

When used as a key performance metric, "Visually complete" is displayed for each load and XHR user action. Check the following if you don't see accurate "Visually complete" or "Speed index" data:

Visually complete and Speed index metrics not shown

Ensure that "Visually complete" is the key performance metric used for XHR and load actions.
Check your browser support. The "Speed index" and "Visually complete" metrics are only available on browsers that support mutation observers. The following browsers are supported:
- Microsoft Internet Explorer 11
- Microsoft Edge 15 or later
- Firefox 57 or later
- Google Chrome 61 or later

"Speed index" is available only for load actions. "Visually complete" is calculated when something on a page changes. It is available for all actions, including load actions, but not for AJAX requests that don't affect the DOM.

See Known solutions and workarounds for information about Visually complete with Internet Explorer 11.

Safari isn't supported because it doesn't support resource timings.

Check the JavaScript injection point. "Visually complete" and "Speed index" metrics can't be calculated if the JavaScript tag isn't inserted at a location within the HTML of your application pages where it can reliably get the mutation observer listeners in place. JavaScript tag execution occurring too late to get mutation observer listeners in place happens mainly when using Tag Manager.

Inaccurate Visually complete and Speed index metrics

"Visually complete" and "Speed index" metrics can be inaccurate due to the following:

IFrames and Frames have their own JavaScript context, so it's not possible to access variables that are only available in another frame. DOM elements also must be available in a Frame/IFrame in which a JavaScript tag is injected. These factors can lead to skewed metrics. Make sure you verify JavaScript variable or DOM element capture for these elements.
There may be a defined setTimeOut for XHR callbacks. Make sure you've enabled support for XHR (AJAX) frameworks, and that the specific XHRs haven't been excluded from monitoring.