LCP (Largest Contentful Paint)
A Core Web Vital that measures when the largest content element on a page becomes visible. Learn what causes slow LCP and how to fix it.
Largest Contentful Paint (LCP) is a Core Web Vital that measures perceived load speed. It marks the point when the page’s main content has likely loaded—specifically, when the largest image, video, or text block becomes fully visible in the viewport.
Think of it as the moment a visitor stops waiting and starts reading. If that moment takes too long, they’ll bounce.
What is a Good LCP Score?
| Rating | LCP Time | What It Means |
|---|---|---|
| ✅ Good | ≤ 2.5s | Fast load. Users engage immediately. |
| ⚠️ Needs Improvement | 2.5s – 4s | Noticeable delay. Some users will leave. |
| ❌ Poor | > 4s | Slow. Significant bounce rate increase and SEO hit. |
Google measures LCP at the 75th percentile—meaning 75% of your page loads should hit the target, not just the average.
What Elements Count as LCP?
LCP only considers elements visible in the viewport without scrolling:
- Images –
<img>,<image>inside SVG,background-imagevia CSS - Video thumbnails – The poster image of a
<video>element - Text blocks – Large headings, paragraphs, or text containers
- Background images – CSS
background-imageon block-level elements
Note: LCP ignores elements with zero opacity, elements outside the viewport, and placeholder/skeleton images.
How to Measure LCP
- Google PageSpeed Insights – Enter your URL and check the “Largest Contentful Paint” metric
- Chrome DevTools – Performance tab → Record a page load → Look for the “LCP” marker
- Lighthouse – Built into Chrome, provides LCP score with optimization suggestions
- Web Vitals Extension – Chrome extension that shows real-time Core Web Vitals
- Google Search Console – Core Web Vitals report shows LCP across your entire site
What Causes Slow LCP?
1. Slow Server Response (TTFB)
If your server takes 2 seconds to respond, your LCP can’t possibly be under 2.5 seconds. TTFB is the foundation—fix it first.
2. Render-Blocking Resources
CSS and JavaScript in the <head> block the browser from painting anything until they load. Large stylesheets and synchronous scripts are common culprits.
3. Large, Unoptimized Images
A 3MB hero image will tank your LCP. Even on fast connections, large images create bottlenecks.
4. Client-Side Rendering
Single-page apps (React, Vue) that render content with JavaScript often have poor LCP because the browser has to download, parse, and execute JS before showing content.
5. Third-Party Scripts
Analytics, chat widgets, and ad scripts compete for bandwidth and processing time with your main content.
How to Improve LCP
Quick Wins
- Compress and resize images – Use WebP format, lazy-load below-fold images
- Preload the LCP image – Add
<link rel="preload" as="image" href="hero.webp">in your<head> - Inline critical CSS – Embed above-the-fold styles directly in HTML
- Remove unused JavaScript – Audit and delete scripts you don’t need
Advanced Optimizations
- Use a CDN – Serve static assets from edge servers close to users
- Implement server-side rendering (SSR) – Pre-render HTML on the server instead of in the browser
- Optimize web fonts – Use
font-display: swapand preload critical fonts - Defer non-critical scripts – Add
deferorasyncto script tags
LCP vs. Other Core Web Vitals
| Metric | Measures | Target |
|---|---|---|
| LCP | Loading speed | ≤ 2.5s |
| CLS | Visual stability | ≤ 0.1 |
| INP | Interactivity | ≤ 200ms |
LCP is often the hardest to optimize because it depends on server speed, image optimization, and render-blocking resources all working together.
FAQ
What is LCP in simple terms? LCP (Largest Contentful Paint) measures how fast the biggest piece of content on your page becomes visible. It’s Google’s way of measuring perceived load speed.
What is a good LCP score? Google considers 2.5 seconds or less as “Good.” Between 2.5-4 seconds “Needs Improvement,” and over 4 seconds is “Poor.”
Does LCP affect SEO? Yes. LCP is one of three Core Web Vitals that Google uses as a ranking factor. Pages with poor LCP may rank lower in search results.
How do I find my LCP element? Use Chrome DevTools: open the Performance tab, record a page load, and look for the “LCP” marker. It will highlight which element was measured.
Why is my LCP so slow? The most common causes are: slow server response (TTFB), unoptimized hero images, render-blocking CSS/JS, and heavy third-party scripts. Check these in order.
Explore in-depth guides related to lcp (largest contentful paint):
Mobile-First Design: Why Your Desktop-Optimized Site is Losing You Money
Over 60% of web traffic is mobile. If your buttons are too small and your pages are too slow, you are bleeding conversions. Here is how to fix it.
Headless WordPress vs. Traditional: A CEO’s Guide
Decoupling your frontend for extreme security, speed, and design freedom.
Related Concepts
Core Web Vitals (CWV)
A set of specific factors that Google considers important in a webpage's overall user experience.
CLS (Cumulative Layout Shift)
A Core Web Vital metric that measures the visual stability of a page.
TTFB (Time to First Byte)
The time it takes for a user's browser to receive the first byte of data from the web server. Learn what causes high TTFB and how to fix it.