Visually Complete

The Visually Complete metric measures how long after the initial navigation a web page finishes rendering. At this point all above the fold content has been fully loaded and no additional UI changes occur.

Every new paint increases the Visually Complete metric. That means that pages with a background video or even a small ongoing animation will have a high Visually Complete score.

Examples of Visually Complete

This filmstrip from DebugBear shows the Visually Complete milestone for the Discord homepage.

You can see that the largest page element is rendered early, as indicated by the Largest Contentful Paint marker. However, there are still ongoing UI updates further down on the page.

The Visually Complete state is only reached when all UI updates are complete.

If a page has continuous small updates the Visually Complete metric can occur very late. In some cases the Visually Complete value is only recorded when the page test itself is complete.

We can see that there are small ongoing UI updates, highlighting different product promotions.

However, the page can also stop rendering before all background network and CPU activity has finished.

Should you optimize Visually Complete?

Visually Complete is a metric that's primarily used to debug page behavior and understand how long it takes for a page to fully render. However, small ongoing animations or similar features don't necessarily hurt user experience.

Other metrics like Largest Contentful Paint or Speed Index are a better measure of when the page has mostly finished loading. Both of these page speed metrics have present a more nuanced view of visual rendering progress.