Largest Contentful Paint
Largest Contentful Paint (LCP) is a performance metric that measures the time it takes for the largest content element on a page to load, such as an image or a text block. It is a key metric for measuring page load performance, as it is the point in time when the page appears to be visually complete and ready for interaction.
LCP was invented and heavily promoted by Google as the most important speed metric which Google themselves use as a ranking signal.
What is considered a good LCP?
According to Google, "To provide a good browsing experience, sites should strive to have an LCP of 2.5 seconds or less for at least 75% of page visits."
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:
- Is not lazy-loaded (use
lazy="eager"and disable any JS-based lazy loaders) - Is compressed using a modern format such as WebP or AVIF
- Has an appropriate resolution which is not too high.
- Is being loaded directly in the HTML, not from a stylesheet or (yikes!) a script.
- 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.
Google has a highly details articles on how to Optimize the Largest Contentful Paint metric