What is Largest Contentful Paint?

Largest Contentful Paint, or LCP, is a performance metric that measures how long it takes for the main content of a website to download and become visible within your visitor’s viewport. In a few words, it is the biggest visual part of the page.

Typical elements that are measured are videos, images and background images; and why are they measured? The reasoning behind this is that once there is something to look at, the user can start getting value from the page.

Which is the aim of LCP?

It is a key metric for the Core Web Vitals score that aims to provide good user experience, because it accurately measures how fast a webpage can be used. The Core Web Vitals are a set of metrics that were created to measure the web performance of any website, taking the user experience as a priority.

However, since the largest content element will differ from page to page, websites with similar structures may score very differently on the LCP metric.

When you come to think of it, it is a quite easy metric to understand; you just have to look at your webpage, identify the largest image or text block, and then just optimize its load time.

LCPʼs effect on your Performance Score

Think about it from the user’s point of view: if the page’s biggest element doesn’t load fast, their experience won’t be good. In other words, they are more likely to exit the site if the content they are looking for won’t load. The attention span of a user is very short, and during browsing time, a few milliseconds can make a huge difference!

That’s why LCP has been included as one of the Core Web Vital Metrics, the metrics measuring how great your user experience is.

Given the fact that LCP accounts for 25% of the Performance Score, it is actually one of the most important metrics to optimize.

Elements that can be considered Largest Contentful Paint

An element can be considered the largest contentful element only once it has rendered and is completely visible to the user. The images that have not yet loaded cannot be considered ʺrenderedʺ.

The elements that can be defined as LCP are: image elements, image elements inside an svg element, video elements, block-level elements containing text nodes or other in-line text elements.

What causes a slow Largest Contentful Paint?

Among the most common causes of a poor LCP we can mention: slow server response times, render-blocking JavaScript and CSS, slow resource load timer and client-side rendering.

In short, LCP is one of the most important performance metrics right now!

You may also wanna read this articles: