Largest Contentful Paint (LCP) measures when the largest content element in the viewport becomes visible to the user. It is a paint timing metric that identifies how quickly a page's main content loads. A fast LCP reassures visitors that the page is useful and ready for use.
What is Largest Contentful Paint (LCP)?
LCP reports the render time of the largest image, text block, or video relative to when the user first navigated to the page. Unlike older metrics such as load or DOMContentLoaded, LCP reflects what a user actually sees on their screen.
The browser identifies specific elements as LCP candidates:
* <img> elements and <image> elements inside an <svg>.
* Poster images for <video> elements or the first frame of a video.
* Elements with background images loaded via the CSS url() function.
* Block-level elements containing text nodes.
[Sites should aim for an LCP of 2.5 seconds or less] (web.dev) to provide a good user experience. To confirm you meet this target, [measure the 75th percentile of page loads] (web.dev) across both mobile and desktop devices.
Why Largest Contentful Paint (LCP) matters
LCP is one of the three Core Web Vitals Google uses as a part of its search rankings. Improving this metric directly impacts both SEO and user retention.
- Ranking factor: Google uses LCP to determine how well a page provides a high-quality user experience.
- Lighthouse impact: [LCP determines 25% of the overall Lighthouse Performance score] (DebugBear).
- Conversion and Retention: Slow loading leads to higher bounce rates. [An LCP over 4 seconds is considered poor] (DebugBear) and can harm rankings.
How Largest Contentful Paint (LCP) works
LCP is measured in stages because the largest element on a page might change as more content loads.
- Initial Paint: The browser renders the first frame and dispatches a
largest-contentful-paintperformance entry. - Element Discovery: As content like hero images or text blocks finish loading, the browser dispatches new entries if a newer element is larger than the previous one.
- Final Recording: The browser stops looking for new candidates once the user interacts with the page through scrolling, clicking, or typing.
- Reporting: For analysis, only the most recently dispatched performance entry is reported to analytics services.
For security reasons, cross-origin images without a Timing-Allow-Origin header may only report their load time rather than their render time. However, [this was resolved in late 2024 to allow a coarsened render time starting in Chrome 133] (web.dev).
Best practices
Follow these steps to ensure your largest content elements appear as quickly as possible.
- Optimize server response: [Target a Time to First Byte (TTFB) below 800 milliseconds] (DebugBear) to ensure the HTML document arrives early.
- Preload the LCP image: Use
<link rel="preload">in your HTML to help the browser discover the main image before it processes CSS or JavaScript. - Assign fetch priority: Add the
fetchpriority="high"attribute to your LCP image or its preload tag to prioritize the download over other resources. - Compress images: Use modern formats like WebP or AVIF and ensure images do not have unnecessarily large dimensions for the user's screen.
- Avoid lazy loading for LCP: Ensure the
loading="lazy"attribute is not applied to the largest above-the-fold image, as it can delay rendering. - Host fonts locally: Host web fonts on your own server to avoid establishing new connections to third-party providers.
Common mistakes
- Mistake: Using progressive JPEGs for LCP elements. Fix: While good for UX, LCP is only recorded when the image is 100% downloaded, so prioritize reducing file size instead.
- Mistake: Placing LCP images in external CSS files.
Fix: Images in CSS are discovered late. Use an
<img>tag or a preload hint in the HTML document. - Mistake: Relying on JavaScript to insert the main content. Fix: Use server-side rendering (SSR) so the main text or image is available in the initial HTML.
- Mistake: Missing
font-display: swap. Fix: Addfont-display: swapto your CSS font definitions so text remains visible while the custom font loads.
Largest Contentful Paint (LCP) vs First Contentful Paint (FCP)
| Metric | Goal | Key Input |
|---|---|---|
| LCP | Measure perceived load speed. | The largest visible element (image/text). |
| FCP | Measure the start of the loading experience. | The very first bit of content painted. |
Rule of thumb: FCP tells you when the page starts to load, while LCP tells you when the page actually becomes useful to the user.
FAQ
What is the difference between lab data and field data? Lab data is collected in a controlled environment with predefined device and network settings, such as in Lighthouse. Field data, or Real User Monitoring (RUM), comes from actual users visiting your site. [Lighthouse uses stricter desktop thresholds, recommending an LCP of 1.2 seconds or less] (Chrome for Developers) for a "Good" score.
How is the size of an element determined? LCP considers the size visible within the viewport. If an element is clipped or extends off-screen, those sections are not counted. For images, LCP uses either the visible size or the intrinsic size, whichever is smaller. It does not include margins, padding, or borders.
Why is my LCP element excluded? The browser uses heuristics to ignore "non-contentful" elements. This includes elements with 0 opacity, elements that cover the entire viewport (often treated as backgrounds), and low-entropy images like placeholders that do not reflect true content.
Can an iframe affect my score? Yes. While lab tools often only show the LCP for the main frame, real-user data in the Chrome User Experience Report (CrUX) includes elements within iframes. Sub-frames should report their LCP entries to the parent frame for accurate measurement.
What are the four sub-parts of LCP? LCP can be broken into Time to First Byte (HTML response), Load Delay (finding the resource), Load Time (downloading the resource), and Render Delay (time from finished download to screen paint).
