Catchpoint's Visually Complete Time (VCT) metric is intended to capture the amount of time it takes to load and render all visual elements of a webpage within the viewport. As there are a huge variety of web pages using different design techniques and content types (text, images, videos, CSS animations, etc.), consistently determining when the visible portion of a page is "complete" is challenging, and our legacy technique for calculating VCT has been relatively inaccurate in many cases.
In our May 2022 release we have completely overhauled this algorithm to provide much more accurate VCT data for the vast majority of web pages. As a result, some customers may notice a shift in their VCT metrics corresponding to this update. This is to be expected, and in most cases the difference will be in the direction of greater accuracy and consistency.
VCT Calculation Method
The new VCT calculation algorithm works by watching for all of the events listed below, taking the last detected event's timestamp as the Visually Complete Time:
- First Contentful Paint (FCP) event from the browser (the minimum possible VCT)
- Any Layout shift from the LayoutShift API, indicating that the layout in the viewport has changed
- Resource loading times - The time when all fonts finish loading (We are unable to detect whether each font appears in the viewport, so this is based on all fonts in the whole page) - The time when a video element's "canplay" event fires - The time when an image within the viewport is complete
- Any Document Object Model (DOM) changes, as detected via the MutationObserver API. These are sorted and processed during JS engine idle times to determine if the DOM elements that changed were visible.
This technique will address the vast majority of modern webpages, providing accurate VCT results. Still, it is impossible to cover every possible case, and there are some known issues that can reduce VCT accuracy. Websites that use persistent CSS animations or make style changes that are not readily apparent may cause the VCT calculation to appear to be - or to actually be - less accurate. For example, on one website we tested, a 1% opacity (effectively invisible) element was loaded at a certain point, which does technically impact VCT, although whether it should is debatable.