Visually Complete vs Speed Index

Visually complete

What is the best metric to consider in measuring your customers’ actual experience with your applications? As it turns out, users are primarily focused on how long it takes for visual page elements above the fold to render completely.

Visually complete is a user experience metric that identifies the moment in time when users perceive that all the visual elements of a page have completely loaded. Because this is a measure of user perception, it is an ideal measure of user experience. Visually complete metrics are typically shorter in duration than comparable metrics, for example, page load time, because users perceive complete page load before 100% of background page elements have loaded. As you can see in the example below. The Visually complete milestone is reached before the page has loaded completely.

 

Speed index

Speed index is a performance metric that measures how quickly a page renders visual elements, from the user’s perspective. This is a rate-of-speed metric that is closely related to Visually complete, which is a moment-in-time measure. A lower Speed index is preferred as it means that large parts of a page render quickly. Speed index, which was introduced by webpagetest.org, takes the “visually complete” concept one step further. Pages that render large visible elements earlier (see example below) receive better scores than pages that render elements slowly (see example below on the right) even when those pages have an identical Visually complete measure.

A milestone for user experience monitoring

There is currently no W3C standard available for capturing metrics that are comparable to Visually complete and Speed index. Until recently, such metrics could only be gathered in synthetic environments where it’s possible to capture screen images during runtime and subsequently process those image. Dynatrace has now found a way of calculating such measures purely in JavaScript by monitoring the DOM—thereby making these metrics available in real user monitoring for the first time. This means that, for the first time, you can capture these metrics in real time and in the real world—no lab setting required.

Visually complete and Speed index measures are available for all user actions, across all device types. Wondering how long it takes to load your application’s home page using an old version of the Firefox mobile browser on a budget cell phone? All such metrics are now at your fingertips. No synthetic testing environment required.

As official partner of Dynatrace we will be happy to help you enabling these metrics.

Reference: https://www.dynatrace.com/news/blog/optimize-user-experience-visually-complete-speed-index-measures/