What is Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) is the time it takes for the largest image or block of text in the initial viewport to finish rendering, counted from when the user started navigating to the page. It is the loading metric among the Core Web Vitals, and it is a good proxy for when a visitor feels the main content has arrived.
A good LCP is 2.5 seconds or less at the 75th percentile of real visits. Over 4 seconds is poor.
How it works
The browser keeps track of the largest element painted in the viewport as the page loads. Candidates include <img> elements, images inside <svg>, video poster images, elements with a CSS background-image, and block-level text such as a heading or paragraph. The last candidate reported before the user interacts is the LCP element.
LCP time breaks down into four parts, which tell you where to look:
- Time to First Byte: waiting for the server. See TTFB.
- Resource load delay: time between TTFB and when the browser starts downloading the LCP image. Long if the image is discovered late, for example through CSS or JavaScript, or lazy-loaded.
- Resource load duration: downloading the image itself. Long for large files.
- Element render delay: time between the download finishing and the element being painted, often caused by render-blocking CSS or scripts.
If the LCP element is text, only the first and last parts apply.
Example
The LCP element on a blog post is its featured image. To make it load as early as possible:
<img src="/images/pour-over-1200.webp"
width="1200" height="675"
fetchpriority="high"
alt="Pouring water over coffee in a pour-over dripper">
No loading="lazy", a compressed modern format, explicit dimensions, and fetchpriority="high" so the browser requests it before less important resources. If the image is set in CSS, a <link rel="preload" as="image"> in the head helps the browser discover it sooner.
In WordPress
WordPress lazy-loads images by default but, in recent versions, skips the first large content image and adds fetchpriority="high" to it. Themes that output hero images in unusual ways, sliders, and page builders can defeat that logic, so check which element is the LCP in PageSpeed Insights. Page caching and a CDN shorten TTFB, which is the first part of every LCP. The hydrogenseo.com web vitals checker reports LCP for any URL; see bulk audit and SEO tools.
Common mistakes
- Lazy-loading the hero image, which delays its download.
- Sliders and carousels that load the first slide with JavaScript.
- Uncompressed, oversized images in the first screen.
- Web fonts that block text rendering when the LCP element is a heading.
Common questions
What is a good LCP score?
2.5 seconds or less for at least 75 percent of page visits. Between 2.5 and 4 seconds needs improvement; over 4 seconds is poor.
How do I find my LCP element?
Run the page through PageSpeed Insights or the Performance panel in Chrome DevTools. Both identify the element that was measured as LCP.