What is visually complete?
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
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 15 seconds after the load event end triggers. Whenever there is a change on a page, Visually complete is calculated again. 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
Visually complete is then calculated for these resources. Visually complete can differ from the action end time. But when visually complete is
-1 (default value), such as when no visible resources are added to 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
The Speed index indicates the average time it takes for all visible parts of a page to display. It's 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.
- (200ms * 100%) (nothing is loaded up to 200ms)
- (200ms * 60%) (already 40% are loaded by the first marker)
- (200ms * 40%) (40% must be loaded to reach 100%)
- (200ms * 100%) + (200ms * 60%) + (200ms * 40%) = 400ms
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.
Note: Speed index and Visually complete metrics are only available on browsers that support
mutationobservers. This includes the following browsers:
- 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 available for all actions, including load actions, but not for AJAX requests that don't affect the DOM.
Single page Applications
For single page application frameworks like Angular, visually complete gives even more accurate timings for user actions. Previously on application load, captured user interactions could be correlated with XHR requests being fired afterwards, as shown in the following:
Correlate user performance with business metrics
End user analytics
Visually complete and speed index display for each step in a user action.
In AppMon Web, select Visits, then select the visit you want to analyze. Click Show visit details to view the actions for that visit. Click on an action step to see contribution timings and the step's action timeline. The action timeline shows timings for all the relevant action stages, including speed index and visually complete. When the performance metric used for the step is user action duration or visually complete, it is highlighted at the top of the timeline.