What is Largest Contentful Paint (LCP)?

The Largest Contentful Paint (LPC) metric measures the loading speed of each of the pages of your website, recording the moment in which the main content is loaded, which as the main one, is the largest content within the page.

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP), like Cumulative Layout Shift (CLS) , is another Google metric included in the Core Web Vitals , which focuses on the user experience on each of the websites that the Google Search Engine positions. .

What is a good LCP score?

To provide a good user experience, websites should strive for an LCP score of 2.5 seconds or less. The lower your score, the faster your website will be.

The official LCP scores used by Google's performance tools are as follows:

· Good - LCP below 2.5 seconds.
· Improvable - LCP between 2.5 and 4.0 seconds.
· Needs Improvement - LCP above 4.0 seconds.
· What elements does the LCP metric analyze?

Not all elements of your website are included in the LCP metric. According to the LCP API , the elements that can be considered as part of the metric are:

· Image elements, <img>
· Image elements within an element, <image> and <svg>
· Video elements, <video>
· Elements with a background image , with CSS
· Block elements that contain text or other elements in line of text.

How is Largest Contentful Paint (LCP) analyzed?

Because websites often have lazy-loading configured to stage load the page as the user navigates, the largest element on the page could change as the rest of the elements are processed. As a result of this potential change, the browser creates an LCP performance entry to identify the highest content item as soon as the browser loads the first frame. However, while the page continues to load, the browser will register the new additional elements each time they appear, and will change the LCP with the new element with a higher proportion than the initial one if it were the case.

The following example shows a content change and the registration of the new content with more proportion:

Conclusion

The LCP metric evaluates the loading time of your website and is reported before the user interacts with the page. Once the user touches, clicks or scrolls on the page, the browser will stop creating performance entries because user interactions will often change what is displayed on the page.