To help you gain greater visibility into the user experience of your application, we've introduced a new, enhanced version of the Visually complete algorithm that gives you better control over your Visually complete calculations. Combined with additional performance metrics, the enhanced version of Visually complete gives you accurate, stable measurements and better control over what's included in Visually complete calculations. To migrate to the new version globally across your environment, go to Applications and select any application from the list. Then scroll down to Enable Visually complete 2.0 and new web performance metrics and select Enable for all applications.
Support for the earlier version of Visually complete will end on November 30, 2020 11:59 PM UTC.
Visually complete means that all elements within the visible area of a web page are 100% loaded:
- IFrames (only images)
The visible area extends from the top of the page to the bottom of the browser window (user scrolling doesn't affect the page area used for measurement).
Visually complete has the following benefits:
- Lets you see exactly how long it takes your end users to see the information they're looking for.
- Provides a true business-relevant metric from the perspective of the user.
- Gives 100% visibility into actual real user experience, regardless of device.
- Aligns IT and business in connecting user experience with business outcomes.
- Accelerates performance improvements.
- Optimizes decisions across development, operations, and user experience.
- Can be combined with powerful waterfall charts for understanding and improving page rendering times.
Along with Speed index, Visually complete shows the total time taken by an entire page to load. Therefore, these metrics are collected only for main frames, not subframes. In cases where the frames are cross origin, and there is no way of knowing the parent frame, collection of Speed index and Visually complete is attempted for sub frames too.
Visually complete calculation
Visually complete calculation for load actions
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
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.
Speed index calculation
Speed index is useful for comparing the user experience of various pages. The lower the number, the better the user experience of the page. See the Google WebPagetest documentation page for a detailed definition of Speed index and a basic description of the Speed index calculation.
Speed index calculates an index by measuring the progress of the loading of a web page between certain markers, along with the percentage of elements that remain unloaded at a given point in time.
- (200 ms * 100%) (nothing is loaded up to 200 ms)
- (200 ms * 60%) (already 40% are loaded by the first marker, i.e. 60% must be loaded to reach 100%)
- (200 ms * 40%) (40% must be loaded to reach 100%)
- Speed index = (200 ms * 100%) + (200 ms * 60%) + (200 ms * 40%) = 400
Speed index is only applicable for load actions because it uses the whole page as a reference for calculating the index. For example, if there is a small icon on a page that takes five seconds to load, but the rest of the page is loaded within two seconds, then Visually complete will be five seconds because the icon is the last element on the page. But the Speed index would be near two seconds because the main part of the page loaded within two seconds.
Configuration settings for enhanced Visually complete
In Dynatrace versions 1.194 and later, the new Visually complete algorithm gives you more control over how the metric is calculated by allowing you to specify the following settings:
- Threshold: Use this setting to define the minimum visible area per element (in pixels) for an element to be counted towards Visually complete and Speed index. This means that only elements that have the minimum defined pixel area will be included in the calculations. Use the
vctproperty to define the threshold.
- Inactivity timeout for load actions: The time the Visually complete module waits for inactivity and no further mutations on the page after the load action. Use the
vcitproperty to define the inactivity timeout.
- Mutation timeout for XHR and custom actions: The time the Visually complete module waits after an XHR or custom action closes to start the calculation. Use the
vcxproperty to define the mutation timeout.
- Excluded URL list: Use regular expressions to define URLs for images and iFrames to exclude from detection by the Visually complete module. Use the
iubproperty to create the list.
- Ignored mutation list: Query CSS selectors to specify mutation nodes (elements that change) to ignore in Visually complete and Speed index calculation. Use the
mbproperty to create the list.
To configure these settings
Select Applications and select the desired application from the list.
On the Application overview page, select Browse (...) in the upper-right corner and then select Edit.
Under Application settings, select Advanced setup.
Use a value from 0 to 10000, such as
vct=100; the default value is 50.
vcit(Inactivity timeout for load actions):
The time in milliseconds—use a value from 0 to 30000, such as
vcit=2000; the default value is 1000.
vcx(Mutation timeout for XHR and custom actions):
The time in milliseconds—use a value from 0 to 5000, such as
vcx=1000; the default value is 50.
iub(Excluded URL list):
^p(without space) as a separator between entries, such as
iub=URL1^pURL2. Separation between different protocols of the URLs is not supported; every protocol of the URL is excluded.
mb(Ignored mutation list):
^c(without space) as a separator between entries, such as
Use the pipe (
|) character to separate multiple parameters, such as
Adding Visually complete and other metrics to your dashboard
Visually complete and other calculated metrics for RUM can be used to create dashboards for the metrics that you are most interested in. You must create a metric before adding it to the dashboard. Besides our well-known Visually complete metric, here we've also added two of the three "web vitals," First input delay (FID) and Largest contentful paint (LCP).
Use Visually complete as a key performance metric
In Dynatrace versions 1.193 and earlier, Visually complete is a default key performance metric that's applied for evaluating the performance of all load actions and XHR actions. Visually complete and Speed index timings are captured by default for all applications that have Real User Monitoring enabled.
You can change the key performance metric used for load actions and XHR actions. You can also disable capturing of Visually complete and Speed index timings, however re-enabling capture resets the anomaly detection reference periods defined for the application.
To set the key performance metric for an application
- Select Applications and select the desired application from the list.
- On the Application overview page, select browse [...] in the upper-right corner and then select Edit.
- Under Application settings, select General. In the Select a key performance metric for this application section, select the key performance metric from the list for each of the user action types (Load actions, XHR actions, and Custom actions).
To disable capturing Visually complete and Speed index timings
- Select Applications and select the desired application from the list.
- On the Application overview page, click browse [...] in the upper-right corner and then select Edit.
- Under Application settings, select Content Capture.
- Turn off the Visually complete & Speed index setting.
Use Visually complete with single page applications
Correlate user performance with business metrics
Performance is one of the main drivers of user experience and successful business outcomes. The "Visually complete" metric provides this analysis out-of-the-box.
Visually complete for user action analysis
Visually complete and Speed index are captured for each step in a user action.
- In Dynatrace, select Applications, then select the application to be analyzed.
- Under Performance analysis, select the actions section to display user action data.
- In the Top 3 user actions tile, select View full details.
- Under Key user actions or Top 100 user actions, click an action to see contribution timings and the step's action timeline in the Contributors breakdown tile. The action timeline shows timings for all the relevant action stages, including "Speed index" and "Visually complete". The performance metric used for the step is displayed at the top of the timeline, so you can quickly tell if "User action duration" or "Visually complete" is used as the performance metric.
Troubleshooting Visually complete and Speed index
When used as a key performance metric, "Visually complete" is displayed for each load and XHR user action. Check the following if you don't see accurate "Visually complete" or "Speed index" data:
- Ensure that "Visually complete" is the key performance metric used for XHR and load actions.
- Check your browser support. The "Speed index" and "Visually complete" metrics are only available on browsers that support mutation observers. The following browsers are supported:
- Microsoft Internet Explorer 11
- Microsoft Edge 15 or later
- Firefox 57 or later
- Google Chrome 61 or later
"Speed index" is available only for load actions. "Visually complete" is calculated when something on a page changes. It is available for all actions, including load actions, but not for AJAX requests that don't affect the DOM.
See Known solutions and workarounds for information about Visually complete with Internet Explorer 11.
Safari isn't supported because it doesn't support resource timings.
"Visually complete" and "Speed index" metrics can be inaccurate due to the following:
- There may be a defined
setTimeOutfor XHR callbacks. Make sure you've enabled support for XHR (AJAX) frameworks, and that the specific XHRs haven't been excluded from monitoring.