Header background

Real User Monitoring: Important changes to Visually complete calculation

Visually complete now supports CSS images in Iframes

We recently made changes to how we calculate the Visually complete metric. To date, we’ve had issues detecting background images inside Iframes, so images were mostly ignored when the Visually Complete metric was calculated. This issue has been resolved. We’ve also improved the efficiency of Visually Complete calculations—you might notice a slight decrease in memory consumption and processing time on your and your customers’ browsers.

As Visually complete is also needed for the calculation of the Speed index, these improvements also influence the Speed index metric.

How has the calculation changed?

To minimize the impact on the browser, calculation of Visually complete time is done asynchronously in chunks of 100 DOM nodes at a time. Previously, we first took all image tags into account before we traversed the DOM to find any CSS background images and frames. If we found any frames, we repeated the process; however, we didn’t wait for the asynchronous execution to finish. Now the process is streamlined, and we wait for any asynchronous calculation to finish before we determine the final state of the metric.

Does this affect my environment?

If you happen to have Iframes on your page with more than 100 DOM nodes, and after those 100 DOM nodes, there are visible CSS background images, then your page is affected by this change.

What’s the impact?

Since the load time of such images wasn’t taken into account previously, it’s likely that the Visually complete metric for affected pages will rise. The impact depends on the request time of visible images within Iframes.

Which OneAgent versions are affected?

These changes have been implemented with Dynatrace OneAgent version 1.155 and have been backported to version 1.151 (starting with RUM JavaScript library version 1.151.372.20181009-170340) and version 1.153 (starting with library version 1.153.290.20181009-170332).

To find out which OneAgent version and Real User Monitoring JavaScript library version you have, go to Settings > Preferences > OneAgent updates.