Largest Contentful Paint

Largest Contentful Paint (LCP) is a crucial performance metric that measures how long it takes for the largest content element (such as an image, video, or block of text) to fully render on the screen. This metric directly impacts user experience, as it signals when the main content of a page becomes visible and is ready for interaction.

Google has promoted LCP as a key metric for page speed and user experience, using it as a ranking signal in search engine results. A poor LCP score can negatively affect both your SEO and the user's perception of your website.

What is considered a good LCP?

Google's recommendation is that the LCP should occur within 2.5 seconds for at least 75% of page visits to provide a good user experience. If your LCP exceeds this threshold, it's worth investigating and optimizing the factors that contribute to its slowness.

LCP Breakdown Report

With the introduction of detailed breakdown reports in tools like PageVitals and the Web Vitals extension, it's now easier to understand which part of your page is contributing to LCP delays.

The LCP metric can be broken down into four distinct phases:

1. Time to First Byte (TTFB): This is the time it takes for the browser to receive the first byte of data from the server. A slow TTFB often points to server-side issues or inefficient backend systems.

2. Resource load delay: The time taken to load the largest contentful element (e.g., an image or a video). This can be impacted by factors like network speed, resource size, and the format of the media.

3. Resource load duration: The time needed for the browser to render the element once it has been downloaded.

4. Element render delay: The time when the element becomes visually complete and ready for interaction.

Each of these phases is critical for optimizing LCP, and improving any one of them can significantly reduce your overall LCP time.

How do I know which element is considered the LCP?

During the initial page load, browsers look for LCP candidates within the visible area of the website. The LCP candidate may change a few times during the page load, and only when the page is visually complete, the LCP element is determined by looking at which image or text block takes up most space on the website.

What can I do to speed up the LCP?

If you know that your LCP element is always an image, make sure that this image:

1. Is not lazy-loaded (use lazy="eager" and disable any JS-based lazy loaders)
2. Is compressed using a modern format such as WebP or AVIF
3. Has an appropriate resolution which is not too high.
4. Is being loaded directly in the HTML, not from a stylesheet or (yikes!) a script.
5. Has a fetchpriority="high" attribute to make sure it's prioritized by browsers.

PageVitals will show you relevant opportunities if one or more of the above guidelines aren't followed.

You can see a lot more tips on how to improve LCP here.

Google also has a highly details articles on how to Optimize the Largest Contentful Paint metric