LCP (Largest Contentful Paint)
Definition
A Core Web Vital measuring how quickly the largest visible content loads. Should be under 2.5 seconds for good user experience.
What is LCP?
LCP stands for Largest Contentful Paint. It's a Core Web Vital that measures how long it takes for the largest visible element on the page to fully load – usually a hero image, main heading, or video.
Why LCP Matters
LCP represents when the page feels "loaded" to users. Until the main content appears, visitors are waiting.
Google uses LCP as a ranking factor. Poor LCP hurts search performance.
LCP Targets
- Good: ≤ 2.5 seconds
- Needs Improvement: 2.5-4.0 seconds
- Poor: > 4.0 seconds
What Counts as LCP?
The largest element in the visible viewport:
- Images (including background images)
- Video poster images
- Text blocks
- Inline SVGs
It's measured when the largest element becomes visible.
Common LCP Issues
Large, Unoptimised Images
Hero images are often the LCP element – and often huge files.
Slow Server Response
Server takes too long to deliver the initial HTML.
Render-Blocking Resources
CSS and JavaScript blocking the browser from showing content.
Client-Side Rendering
Content loaded via JavaScript after page load.
Lazy Loading Above the Fold
Lazy loading the LCP element defeats its purpose.
Improving LCP
Optimise Images
- Compress and resize
- Use modern formats (WebP)
- Use proper dimensions
- Preload hero images
Improve Server Response
- Faster hosting
- CDN usage
- Server-side caching
Optimise Critical Resources
- Inline critical CSS
- Defer non-essential JavaScript
- Preconnect to third-party origins
Testing LCP
- PageSpeed Insights
- Lighthouse (in Chrome DevTools)
- WebPageTest
- Google Search Console (Core Web Vitals report)
Focus on LCP first when optimising Core Web Vitals – it has the biggest perceived impact on loading speed.