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

  1. Select Applications and select the desired application from the list.
  2. Click Edit on the menu bar.
  3. 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

  1. Select Applications and select the desired application from the list.
  2. Click Edit on the menu bar.
  3. In Application settings, click Content Capture.
  4. 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.

  1. In Dynatrace, select Applications, then select the application to be analyzed.
  2. Under Performance analysis, click the actions section to display user action data.
  3. In the Top 3 user actions tile, click View full details.
  4. 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.

Visually complete in user action details

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: