What is LCP?
LCP measures how long the browser takes to render the largest visible element in the viewport — typically a hero image or above-the-fold heading. It is one of Google's three Core Web Vitals and a direct search ranking signal.
Google's LCP thresholds
Good
≤ 2.5s
Needs improvement
2.5s – 4s
Poor
> 4s
What Largest Contentful Paint (LCP) means
Largest Contentful Paint (LCP) is a Core Web Vitals metric that captures loading performance from the user's perspective. Unlike technical metrics such as TTFB or DOM content loaded, LCP measures when the page actually looks ready — specifically, when the largest image or text block visible in the viewport has finished rendering.
The LCP element is determined dynamically at render time. It is usually the hero image on a marketing landing page, the main product image on an ecommerce PDP, or a large heading on a blog post. Google's Lighthouse engine identifies the LCP element and reports the time from navigation start to when that element's paint completes.
LCP directly impacts both SEO rankings and conversion rates. Google confirmed LCP as a ranking factor in 2021 as part of the Page Experience update. Research from Google shows that each additional second of LCP reduces conversions by approximately 7%. For revenue-facing pages — checkout, product listings, landing pages — LCP is the single most important performance metric to optimise.
Common causes of poor LCP
- Hero image not preloaded — browser discovers it late in the render waterfall
- Web fonts blocking rendering before the LCP text element can paint
- Slow server response (TTFB) that delays when the browser even starts parsing HTML
- Render-blocking JavaScript or CSS in the document <head>
- Images served without width/height attributes, delaying layout
- Third-party scripts that monopolise the main thread before first paint
How to improve LCP
- Add the priority prop to your hero image (next/image) to inject a preload link
- Use next/font/google with display: 'swap' to eliminate font render blocking
- Move to edge hosting or add stale-while-revalidate caching to reduce TTFB
- Defer all non-critical scripts with strategy='afterInteractive'
- Serve hero images in WebP or AVIF format to reduce download time
- Use Suspense boundaries so the HTML shell streams before data-heavy sections
Frequently asked questions about LCP
What is a good LCP score?
Google considers an LCP score of 2.5 seconds or less as 'Good'. Scores between 2.5s and 4s are 'Needs Improvement', and anything above 4s is 'Poor'. For competitive rankings, aim for under 1.8s on mobile.
What element does LCP measure?
LCP measures the largest visible image or text block in the viewport at the time the metric is captured. Common LCP elements include hero images, above-the-fold headings, and large banner images. The element can change between page visits depending on viewport size and what content loads first.
Does LCP affect SEO rankings?
Yes. LCP is one of Google's Core Web Vitals and is used as a ranking factor in the Page Experience signal. Pages with 'Good' LCP scores may rank higher than equivalent pages with 'Poor' LCP, all else being equal.
How do I measure LCP in production?
Use the web-vitals JavaScript library to capture LCP from real user sessions, or use a monitoring platform like AuditJet that runs automated Lighthouse scans and tracks LCP trends across all your pages over time.
Monitor LCP continuously.
AuditJet tracks LCP across all your pages on a scheduled basis and alerts your team the moment it regresses.