How to Improve LCP: Largest Contentful Paint Guide
What LCP Measures
Largest Contentful Paint (LCP) measures when the largest visible content element in the viewport finishes rendering. In plain English: it tells you when the main thing the user came to see appears. That is often a hero image, heading block, product image, or large text section.
LCP matters because users judge page speed by when useful content appears, not when every background script finishes. A page can have plenty of technical activity still running, but if the hero content appears quickly, the user feels progress. For the full metric framework, see our Core Web Vitals pillar guide.
Find the Actual LCP Element First
Do not guess the LCP element. Find it. PageSpeed Insights and Chrome DevTools can identify which element is counted as LCP. Once you know the element, the fix becomes much more precise.
Common LCP elements include:
- Hero images.
- Featured blog images.
- Product images.
- Large headings or text blocks.
- Background images loaded through CSS.
- Video poster images.
The fastest way to waste time is to optimise everything except the element Google is actually measuring. Start with the LCP element, then work backwards through server response, resource discovery, download time, and render delay.
The Four-Part LCP Fix
LCP is usually delayed by one of four stages. Good optimisation means identifying which stage is slow and fixing that part directly.
| LCP Stage | Problem | Fix |
|---|---|---|
| Time to First Byte | Server is slow to respond | Cache HTML, optimise PHP/database work, use CDN/edge |
| Resource load delay | Browser discovers the LCP asset late | Preload critical image, avoid CSS background for hero |
| Resource load duration | LCP asset is too heavy | Resize, compress, use responsive images and modern formats |
| Render delay | CSS/JS blocks painting | Inline critical CSS, defer non-critical JS, reduce render-blocking work |
For many sites, the biggest win is simple: serve the correct image size, prioritise the LCP image, and stop JavaScript from blocking the first meaningful render.
Hero Image Optimisation
Hero images are the most common LCP problem on content and ecommerce sites. The browser needs to discover, download, decode, and render the image quickly. If the image is oversized, lazy-loaded, or hidden behind CSS, LCP suffers.
Hero Image Checklist
- Do not lazy-load the LCP image.
- Use responsive
srcsetandsizes. - Add explicit
widthandheight. - Use
fetchpriority="high"where appropriate. - Preload the hero image if discovery is delayed.
- Avoid CSS background images for critical hero content.
- Serve WebP/AVIF where supported, with sensible fallbacks.
- Compress without destroying visual quality.
This connects directly to the image work we have been doing across the blog. Good responsive images reduce wasted bytes and help the browser choose the right asset for the viewport.
Server and Render Bottlenecks
If the server is slow, every visual milestone starts late. A strong LCP strategy therefore includes server-side performance: caching, database optimisation, CDN routing, compression, and efficient HTML generation.
Render bottlenecks are the second half of the problem. Heavy CSS, blocking JavaScript, slow fonts, and client-side rendering can delay the LCP element even after the browser has downloaded it.
Useful supporting fixes include:
- Cache full HTML where possible.
- Reduce Time to First Byte.
- Inline critical CSS for above-the-fold content.
- Defer non-critical JavaScript.
- Preconnect to essential origins only.
- Load fonts with sensible fallbacks.
For server-side detail, read our server resources and TTFB guide and the dedicated TTFB SEO guide.
How to Measure LCP Properly
LCP should be checked with both field data and lab diagnostics. Field data tells you how real users experience the page. Lab tools tell you why the metric is slow.
Use this sequence:
- Search Console to identify affected URL groups.
- PageSpeed Insights to compare field and lab data.
- Chrome DevTools Performance panel to find the LCP element.
- WebPageTest to inspect waterfall and asset discovery.
- Repeat after deployment to confirm the fix.
Related Reading
External References
Frequently Asked Questions
What is LCP?
What usually causes poor LCP?
How do you improve LCP?
