Visually complete metric


Visually complete is a point-in-time metric that measures when the visual area of a page's content has finished loading. Visually complete timing happens substantially earlier than the typical page load time, and optimizing the visually complete timing is more valuable then optimizing other page load timings when targeting the user experience. Visually complete has the following benefits:

  • Lets you see exactly how long it takes your end users to see the information they are looking for.
  • Provide a true business-relevant metric from the perspective of the user.
  • 100% visibility to actual real user experiences, regardless of device.
  • Align IT and business to connect user experience with business outcomes.
  • Accelerate performance improvement.
  • Optimize decisions across development, operations and user journey.

Along with the speed index, these metrics represent the most accurate picture of real page load timings.

Visually complete shows you the exact time your real users spent waiting for above-the-fold content to load completely for any location, device, operating system and browser type. It can also be combined with powerful waterfall charts to understand and tune the rendering of a web page.

The Speed Index marks the average time that visible parts of a page display. It is useful for comparing the user experience of various pages. The lower the number, the better the user experience of the page. The Speed Index is only available for page load actions.

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 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.