Largest Contentful Paint
LCP reports when the largest content element above the fold — typically the hero image or headline block — becomes visible, serving as the loading experience metric of Core Web Vitals.
Definition
Largest Contentful Paint marks the render time of the biggest image or text block visible in the initial viewport, with candidates replaced as larger ones paint. It approximates when the main content has appeared. Good is under 2.5 seconds at the 75th percentile of field data.
Context and scope
Optimized via server response time, render-blocking resource chains, image optimization and priority, and client rendering strategy — the whole critical path funnels into it.
Common misconceptions
- LCP is the page load event — it is the paint of the largest element, often long before or after load completes
- A fast server guarantees good LCP — resource chains, font swaps, and lazy hero images each delay the LCP element
- LCP only covers the hero image — any image or text block qualifies, and the candidate can change as larger elements paint
Anti-patterns
- Lazy-loading the hero image that is the LCP element and pushing it behind scroll-triggered loading
- Compressing and resizing the hero but delivering it last in the resource schedule
- Chasing LCP in lab tools with empty caches while field users hit warm connections and different behaviors
Related concepts
Related examples
Authoritative source
What it is
Users perceive load by the main content appearing, not by network idle. LCP captures that: the largest above-fold element paints, and that timestamp becomes the score. The element can be swapped if a bigger one paints later, keeping the metric honest about what dominates the viewport.
How it works
The PerformanceObserver of type largest-contentful-paint receives element candidates with paint times. LCP sub-parts attribute the time to: time to first byte, resource load delay, resource load duration, and element render delay — each pointing at different fixes from server caching to priority hints.
When to optimize
Any page whose main content is large and visible: product pages, articles, landing pages. Preload the LCP image, give it fetchpriority, avoid lazy-loading it, and unblock its discovery from CSS chains. Server-side render the headline so text is the early LCP while images stream.
Pitfalls
Client-rendered pages can paint a skeleton that is never the final LCP, oscillating the metric. Third-party fonts swapping late can re-render text blocks into the LCP slot. Lab and field disagree on cache warmth and device speed; treat lab as directional and field as truth.