Visually complete metric

What is Visually complete?

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, time-to-first-byte, 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.

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.

For AppMon Spring 2017 and later, the JavaScript agent captures both visually complete and speed index timings. Enable both visually complete and speed index capture for a System Profile by selecting the Visually Complete check box in the System Profile - User Experience settings.

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 could be correlated with XHR requests being fired afterwards, as shown in the following:

With visually complete, timing no longer stops when the XHR-request response comes back. 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 for user experience, which impacts business outcomes. AppMon and the visually complete metric gives you this analysis out of the box. For example, the following graphic shows how bounce rate is impacted by performance or Frontend JavaScript errors.

End user analytics

Visually complete and speed index display for each step in a user action.

In AppMon Web, select Visits, then select the visit you want to analyze. Click Show visit details to view the actions for that visit. Click on an action step to see contribution timings and the step's action timeline. The action timeline shows timings for all the relevant action stages, including speed index and visually complete. When the performance metric used for the step is user action duration or visually complete, it is highlighted at the top of the timeline.