What is Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures the time from when a page starts loading to when the largest visible content element — typically a hero image, large text block, or video poster — is fully rendered in the viewport. It is Google's primary measure of perceived loading speed.
What LCP Measures
LCP captures the moment the page's most prominent element becomes visible to the user. It focuses on the largest element rather than the first element, because users perceive loading as complete when the main content is visible. The element counted is the largest by area: images, video posters, block-level text elements, or elements with a background image.
What is a Good LCP Score?
What Causes Poor LCP Scores?
- ✗Slow server response time (TTFB > 600ms) — every millisecond of TTFB delays LCP directly
- ✗Render-blocking JavaScript or CSS — scripts in <head> block the browser from rendering anything until they finish downloading and executing
- ✗Unoptimized LCP image — large image files without WebP format, missing preload hints, or lazy-loading applied to the LCP element
- ✗Client-side rendering (React/Vue SPA without SSR) — the browser must download and run JavaScript before the LCP element can appear
- ✗Slow resource load time — fonts, images, or CSS files fetched from slow CDNs or without caching headers
- ✗No <link rel="preload"> for the LCP image — the browser discovers the image too late in the waterfall
How to Fix LCP
- ✓Add <link rel="preload" as="image"> in <head> for the LCP element's image — this is the single highest-impact LCP fix
- ✓Convert LCP images to WebP or AVIF format and serve via a fast CDN
- ✓Ensure the LCP image has explicit width and height attributes to prevent layout recalculation
- ✓Never apply loading="lazy" to the LCP image — use loading="eager" or no attribute
- ✓Eliminate render-blocking scripts by deferring non-critical JavaScript and inlining critical CSS
- ✓Improve server TTFB with caching (page cache, CDN edge caching) and reducing Time to First Byte
- ✓For React/Next.js apps: use Server Components or SSR so the LCP element is in the initial HTML
Check Your LCP Score
Run a free Lighthouse audit at speedexporter.com to see your exact LCP score, identify the specific LCP element causing the delay, and export the complete JSON to feed to ChatGPT or Claude for exact code fixes.
Run a free Lighthouse audit →Frequently Asked Questions
What is a good LCP score?
Google considers LCP "good" at 2.5 seconds or faster. Between 2.5 and 4.0 seconds needs improvement. Above 4.0 seconds is considered poor. These thresholds are for real-user data (p75 — the 75th percentile of page loads).
Does LCP affect SEO?
Yes. LCP is one of Google's Core Web Vitals and is a direct ranking factor via the Page Experience signal. A poor LCP score (above 4.0 seconds) can negatively impact your organic search rankings.
How do I find my LCP element?
The Lighthouse audit "Largest Contentful Paint element" identifies the exact DOM element counted as your LCP. PageSpeed Exporter exports this in the JSON report. You can also use Chrome DevTools's Performance tab or the web-vitals JavaScript library.
What is the difference between LCP and FCP?
First Contentful Paint (FCP) measures when the first pixel of content renders. LCP measures when the largest content element renders. FCP is always ≤ LCP. LCP is the more important metric for user-perceived loading speed.