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 critical. We thoroughly recommend optimising for an excellent first impression.

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

Calibre records several metrics that aim to break down the critical 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 Contentful Paint (FCP)

First Contentful Paint is the moment when first element on the page becomes 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. We recommend FCP to be tracked by everyone, especially if your business relies on content consumption.

FCP is a Web Vital metric and contributes to Lighthouse Performance Score calculation.

Largest Contentful Paint (LCP)

Largest Contentful Paint measures when the largest content element becomes visible in the viewport (learn about what types of elements are considered). LCP is a good approximation of when the main content of a page is viewable and an accurate indicator of the loading experience.

LCP is a Core Web Vital metric and contributes to Lighthouse Performance Score calculation.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift quantifies how much elements within the viewport move around during page load. CLS is a good indicator of layout instability issues, which often result in user frustration and decreased conversion.

CLS is a Core Web Vital metric and contributes to Lighthouse Performance Score calculation.

First Paint (FP)

First Paint measures the moment between navigation to rendering the first pixels to the browser screen. It loosely describes that something is about to happen, but does not indicate a time at which a user has seen anything useful.

Speed Index (SI)

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. Learn more about how Speed Index works in the WebPageTest documentation.

Visually Complete

Visually Complete indicates the point in time when the user will perceive the site as looking complete. It’s calculated by recording a video of a page loading, which is then broken down into a series of screenshot frames. A diffing image 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% below). 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.

Visually Complete 85% (Deprecated)

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.

First Meaningful Paint (FMP) (Deprecated)

First Meaningful Paint is the time at which the largest area of above-the-fold content was painted to the screen. However, FMP often produces unstable measurements and is no longer recommended as trackable metric (use LCP instead). Learn more about why you should reconsider tracking FMP.