How are Visually complete and speed index metrics calculated?

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 the Speed index, Visually complete represents the most accurate picture of real page load timings.

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.

Visually complete calculation

Visually complete starts observing DOM content once the JavaScript tag is injected.

Observation stops when the load event end is triggered and the last added element of the page is more than one second in the past. If there are recurrent changes on the page, visually complete automatically times out 15 seconds after the load event end triggers. All elements which are part of the page at the time visually complete stops observing the page are used for the calculation.

Visually complete checks if the elements added to a page are visible or within the visible area. If they are, then the time when the last visible element appears on the page is used for visually complete. For external resources like images, visually complete uses the resource timings API of the browser to get the loading times, and not the time when the <img> tag is placed on the page.

Visually complete calculation for XHR actions

For XHR actions, the observation of the DOM content starts at the callback begin of the XHR action and ends 50 milliseconds after the callback end. Any mutations with external resources such as images, stylesheets or IFrames, cause the JavaScript tag to add a load listener to these resources. This extends the XHR action time to the last resource added within the observed timeframe.

Visually complete is then calculated for these resources. Visually complete can differ from the action end time. But when visually complete is -1 (default value), such as when no visible resources are added to DOM, the action end time is used for visually complete.

The reason why only resources and not all elements are supported for XHR actions is because if there are parallel XHR actions and multiple observations at the same time, the elements appearing on the page can’t be correlated to the right action.

Speed index calculation

The Speed index indicates the average time it takes for all visible parts of a page to display. It's useful for comparing the user experience of various pages. The lower the number, the better the user experience of the page. See the Google WebPagetest documentation page for a detailed definition of speed index and a basic description of the speed index calculation.

The solution within the JavaScript tag uses the same algorithm as WebPageTest, but it uses the visible elements that are captured from visually complete. These are the "real" page elements. The advantage to screenshot comparison (webpagetest.org) is that visually complete is aware of the elements on the page and their timings. Screenshot comparison only reflects the visual changes of a page. So, if for example there were a rotating GIF that changes continuously, the visually complete and speed index times of webpagetest.org would be inaccurate.

Speed index calculates an index by measuring the progress of the loading of a web page between certain markers, along with the percentage of elements that remain unloaded at a given point in time.

  • (200ms * 100%) (nothing is loaded up to 200ms)
  • (200ms * 60%) (already 40% are loaded by the first marker)
  • (200ms * 40%) (40% must be loaded to reach 100%)
  • (200ms * 100%) + (200ms * 60%) + (200ms * 40%) = 400ms

Speed index is only applicable for load actions because it uses the whole page as a reference for calculating the index.

For example, if there is a small icon on a page that takes five seconds to load, but the rest of the page is loaded within two seconds, then visually complete will be five seconds because the icon is the last element on the page. But the speed index would be near two seconds because the main part of the page loaded within two seconds.

Note: Speed Index and Visually Complete metrics are only available on browsers that support mutationobservers. This includes the following browsers:

  • Microsoft Internet Explorer 11 or later.
  • Microsoft Edge 15 or later.
  • Firefox 57 or later.
  • Google Chrome 61 or later.

Speed index is only available for load actions. Visually complete is available for all load actions, but not for AJAX requests, which don't affect the DOM.

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 XHR requests that were fired afterwards. With visually complete, timing doesn't stop when XHR-request 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: