LCP (Largest Contentful Paint)
LCP measures the time from navigation to when the largest visible content element is rendered. Target: under 2.5 seconds.
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
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 | LCP Threshold |
|---|---|
| Good | ≤ 2.5 s |
| Needs Improvement | 2.5 s - 4.0 s |
| Poor | > 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.
At a glance
- Measures
- Loading
- Target
- ≤ 2.5 s
- Part of
- Core Web Vitals
- Type
- Field & Lab
Sources
How Atomic Glue helps
Atomic Glue diagnoses LCP at the sub-part level. Web Development services.
Get in touchUnderlined terms have their own entry. Selecting one shows it on the map below.
Atomic Glue. "LCP (Largest Contentful Paint)." Glossary.atomicglue.co/glossary/lcp-largest-contentful-paint
How LCP (Largest Contentful Paint) connects
LCP measures the time from navigation to when the largest visible content element is rendered. Target: under 2.5 seconds.
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: , inside SVG, 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.