Paint Based Metrics

One of the best things we can do to achieve a better user experience is rendering a page as quickly as possible — user perception of speed is extremely important. We thoroughly recommend optimising for a good first impression.

When pages are rendered more quickly, it translates to higher engagement rates, the number of pages viewed, and user conversion.

Calibre records a number of metrics that aim to break down the key points between a user entering a URL and the page being ready for interaction.

To understand the difference between those metrics, have a look at the following image portraying the render cycle:

First Paint

The first paint event. Think of this as the browser going from a blank white screen to anything else (background colours, text appearing, etc). It loosely describes that something is about to happen, but does not indicate a time at which a user has seen anything useful.

First Contentful Paint (FCP)

First Contentful Paint is the moment when text is first visible. Given that 69% of sites on the web use webfonts, this metric is often a good early indicator of when a page becomes useful. If you're in the content business this might be the metric for you.

First Meaningful Paint (FMP)

First Meaningful Paint describes when a pages primary content has appeared. It's the closest thing we have to being able to measure when a customer would visually perceive a page to be ready.

Visually Complete 85%

Measuring when a page is complete can be tricky when there are animated elements, or when there are slow to load icons that have little visual relevance. Visually Complete 85% was designed to be slightly earlier than Visually Complete to account for these factors.

Visually Complete

Visually Complete aims to indicate what a customer will perceive as the point in time when a site looked complete.

It’s calculated by recording a video of a page loading, which is then broken down into a series of screenshot frames. An image diffing algorithm compares and marks visual completion at the frame with the least amount of difference to the final frame.

Visually complete isn't a faultless metric—sites featuring animating carousels or auto-playing video content can make automated calculation extremely difficult (see Visually Complete 85% above).

In these circumstances, it may be better to rely on First Contentful Paint or Time to Interactive as they are calculated by the browser directly.

Speed Index

Coined by WebPageTest, speed index is a method of calculating a score that indicates the time it took a page to become visually complete.

Speed index is captured by recording a video of your page as it loads, which is then broken down into a series of screenshots (every 100ms) — these screenshots are analysed against the final frame of the video until the point where "visual completeness" is reached.

To read more about how Speed index works, see the WebPageTest documentation.

Related Articles