LCP (Largest Contentful Paint)
LCP measures the time from navigation to when the largest visible content element is rendered. Target: under 2.5 seconds.
§ 1 Definition
LCP is a Core Web Vital reporting the render time of the largest image, text block, or video frame visible within the viewport. The LCP element can change between page loads depending on viewport size.
§ 2 What LCP Measures
Four element types: <img>, <image> inside SVG, <video> poster/first frame, and block-level text elements. Hero banners and large headings are common LCP candidates.
§ 3 LCP Sub-Parts
TTFB, resource load delay, resource load time, and element render delay. The total LCP is the sum of these phases.
§ 4 Common Misunderstandings
LCP is NOT 'page fully loaded.' It measures the largest element only. Viewport-dependent: mobile and desktop may differ. LCP candidates can change mid-load.
§ 5 How to Optimize
Eliminate render-blocking resources. Optimize images (WebP/AVIF). Preload the LCP candidate. Improve server response times (CDN, edge caching).
§ 6 Note
§ 7 In code
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<img src="/hero.webp" width="1200" height="600" fetchpriority="high">§ 8 Common questions
- Q. Can LCP element change?
- A. Yes, due to viewport, responsive images, or A/B testing.
§ 9 Thresholds
| Rating | LCP Threshold |
|---|---|
| Good | ≤ 2.5 s |
| Needs Improvement | 2.5 s - 4.0 s |
| Poor | > 4.0 s |
- Measures when largest content element is visible.
- Target: ≤ 2.5 s at p75.
- Four sub-parts: TTFB, load delay, load time, render delay.
- Never lazy-load the LCP candidate.
Atomic Glue diagnoses LCP at the sub-part level. Web Development services.
Get in touchLCP measures the time from navigation to when the largest visible content element is rendered. Target: under 2.5 seconds.
Category: Performance (also: SEO)
Author: Atomic Glue Performance Team
## Definition
LCP is a Core Web Vital reporting the render time of the largest image, text block, or video frame visible within the viewport. The LCP element can change between page loads depending on viewport size.
## What LCP Measures
Four element types: <img>, <image> inside SVG, <video> poster/first frame, and block-level text elements. Hero banners and large headings are common LCP candidates.
## LCP Sub-Parts
TTFB, resource load delay, resource load time, and element render delay. The total LCP is the sum of these phases.
## Common Misunderstandings
LCP is NOT 'page fully loaded.' It measures the largest element only. Viewport-dependent: mobile and desktop may differ. LCP candidates can change mid-load.
## How to Optimize
Eliminate render-blocking resources. Optimize images (WebP/AVIF). Preload the LCP candidate. Improve server response times (CDN, edge caching).
## Note
The LCP element must be in the initial viewport. Never lazy-load the LCP candidate.
## In code
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high"> <img src="/hero.webp" width="1200" height="600" fetchpriority="high">
## Common questions
Q: Can LCP element change?
A: Yes, due to viewport, responsive images, or A/B testing.
## Thresholds
Rating: Good, LCP Threshold: ≤ 2.5 s
Rating: Needs Improvement, LCP Threshold: 2.5 s - 4.0 s
Rating: Poor, LCP Threshold: > 4.0 s
## Key takeaways
- Measures when largest content element is visible.
- Target: ≤ 2.5 s at p75.
- Four sub-parts: TTFB, load delay, load time, render delay.
- Never lazy-load the LCP candidate.
## Related entries
- [Core Web Vitals](atomicglue.co/glossary/core-web-vitals)
- [FCP (First Contentful Paint)](atomicglue.co/glossary/fcp-first-contentful-paint)
- [TTFB (Time to First Byte)](atomicglue.co/glossary/ttfb-time-to-first-byte)
Last updated July 2026. Permalink: atomicglue.co/glossary/lcp-largest-contentful-paint