Share your ideas

"Visually Complete" measurement

Dynatrace performs a measurement of when pages are "visually complete" that Tealeaf very much needs something similar, if not the same:

Here is the description from the Dynatrace site:


Visually complete calculation for load actions

Visually complete starts observing DOM content once the RUM JavaScript 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 3 seconds after the Load event end triggers. All elements that 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 RUM JavaScript 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 set to -1 (default value), such as when no visible resources are added to the 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.

  • Wesley Thompson
  • Dec 15 2021
How will this idea be used?

It will be much easier to detect when pages load slowly and would be a potential better solution for performing DOM capture too early (spinners displayed in replay, etc.)

What is your industry? Insurance
What is the idea priority? High