Businesses and IT need reliable benchmarks to know what a good customer experience looks like. Until now, it’s been impossible to see and capture the visual experience of a real user. With Visually Complete and Speed Index, Dynatrace provides metrics that are as close to a real user experience as you can get.
The new Visually Complete metric lets you see your web application through your users' eyes. See exactly how long it takes your web page to become Visually Complete — for every user, on every mobile or desktop device. Get into the customer’s seat and go beyond Time to First Byte, DOM Interactive or Fully Loaded. Visually Complete measures how long it takes to display the content visible in the user's browser: content "below the fold" and non-visual content (like third-party tracking beacons) is excluded.
Users perceive the page to be ready when everything in their "viewport" is rendered — not all the other things on the page...
Besides being a more precise measure of the user's experience, Visually Complete is less volatile than traditional performance metrics. The metric uses modern browser APIs to identify changes to the browser DOM, allowing it to accurately calculate when elements and images are painted on the screen. It determines whether each object is visible based on the object's position and the browser window size.
Speed Index indicates how fast your page loads from a user’s perspective. A lower Speed Index is ideal, because it means large parts of the page can render very quickly.
This metric is great for comparing performance of webpages. For example, if the Visually Complete time for your homepage and that of your competitor is similar, the page with the lower Speed Index will feel faster to the end user.
Speed Index can also show whether the page is optimized. If Visually Complete is higher than expected but Speed Index is low, the site feels fast to users, so further optimization may not be necessary.
Monitoring Visually Complete and Speed Index
Visually Complete and Speed Index are available for tests that run on the Chrome Agent.
In the Test overview page, you can view Visually Complete in the trend chart.
In custom dashboards, you can add these metrics to a chart tile.
In the Waterfall summary page, Visually Complete is displayed in the page header.
In the waterfall chart, Visually Complete and Speed Index can be displayed as browser events.