Skip to main content

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.

Discord Visually Complete

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

Visually Complete milestone reached

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.

Visually Complete after 26 seconds

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

Small promotion update at the top of the page

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

Time to Interactive occurring after Visually Complete

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.