What Is Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) is a Core Web Vital that measures how quickly the largest visible content element loads on a page. It captures the moment when the main content of the page has finished rendering and is visible to the user. LCP is the metric that best represents perceived loading speed — it answers the question "when does the page look like it has loaded?"
What Elements Does LCP Measure?
LCP considers the largest of these element types in the viewport:
<img>elements<image>inside SVG<video>poster images- Elements with background images loaded via CSS
- Block-level text elements (paragraphs, headings)
On most pages, the LCP element is either the hero image, a large banner, or the main heading text if there are no large images above the fold.
What Is a Good LCP Score?
| LCP Time | Rating | User Experience |
|---|---|---|
| 0 - 2.5 seconds | Good | Page feels fast, users see content quickly |
| 2.5 - 4.0 seconds | Needs Improvement | Noticeable delay, some users may become impatient |
| Over 4.0 seconds | Poor | Significant delay, high bounce risk |
Why LCP Matters for SEO
LCP is the most impactful of the three Core Web Vitals for perceived performance. Google uses it as a ranking signal, and it directly affects user behaviour. Pages with poor LCP have higher bounce rates and lower engagement. In competitive search results, a poor LCP score can be the difference between ranking on page one and page two.
Common Causes of Poor LCP
- Slow server response (TTFB) — if the server takes too long to respond, everything is delayed
- Render-blocking resources — CSS and JavaScript in the head that must download before rendering starts
- Large unoptimised images — the hero image is often the LCP element and can be megabytes if not compressed
- Client-side rendering — JavaScript frameworks that render content in the browser instead of serving it from the server
- Web font loading — custom fonts that block text rendering until they download
How to Improve LCP
1. Optimise the LCP element
Identify what your LCP element is (use Chrome DevTools > Performance tab). If it is an image, compress it aggressively, use WebP format, and add a fetchpriority="high" attribute. If it is text, ensure fonts load quickly with font-display: swap.
2. Preload the LCP resource
Add a preload hint in the HTML head so the browser starts downloading the LCP resource immediately:
<link rel="preload" as="image" href="/hero-image.webp">
3. Reduce server response time
Aim for a Time to First Byte (TTFB) under 200ms. Use server-side caching, a CDN like Cloudflare, and ensure your hosting is not the bottleneck.
4. Remove render-blocking resources
Move non-critical CSS and JavaScript below the fold or load them with async/defer. Inline the critical CSS needed for above-the-fold content directly in the HTML.
5. Do not lazy-load the LCP element
The lazy loading attribute delays loading until the element is near the viewport. Your hero image or main content should load immediately — only lazy-load below-fold images.
6. Use a CDN for images
Serve images from a CDN close to the user. Image CDNs like Cloudflare, Imgix, or Cloudinary can also automatically resize, compress, and convert images to optimal formats.
Check your LCP score by running a free RankNibbler audit — the Performance tab shows your LCP time, whether it passes Google's threshold, and specific recommendations to improve it.
Last updated: March 2026