LCP (Largest Contentful Paint): What It Is and How to Improve It

What is LCP

LCP (Largest Contentful Paint) is a Core Web Vitals metric that measures the time from the start of a page load until the largest visible element in the viewport has been fully rendered.

LCP reflects the user's subjective perception of page load speed: when the page's main content appears—an image, heading, or block of text—the user feels that the page has loaded.

What can be an LCP element:

• <img> tags
• <image> inside <svg>
• CSS background images with url()
• Text blocks (<p>, <h1>, <div>)
• Video posters (<video poster>)

LCP thresholds

Google uses the 75th percentile of real users (CrUX field data over 28 days).

Common causes of poor LCP

1. Slow server (TTFB): the server takes a long time to respond before loading begins
2. Render-blocking JavaScript: scripts in <head> delay rendering
3. Large images: unoptimized images without compression
4. No CDN: resources are loaded from a distant server
5. LCP resources are not prioritized: the browser starts loading the LCP image too late

How to improve LCP

1. Preload the LCP image

<!-- Добавьте в head — ускоряет обнаружение LCP-ресурса -->
<link rel="preload" as="image" href="/hero-image.webp" fetchpriority="high" />

2. Optimize images

<!-- WebP формат + правильные размеры -->
<picture>
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Главный баннер" width="1200" height="630"
       fetchpriority="high" />
</picture>

3. Improve server speed (TTFB)

# Nginx: включить HTTP/2 и кеширование
listen 443 ssl http2;

# Кеш динамических страниц
fastcgi_cache_valid 200 1h;

4. Eliminate render-blocking resources

<!-- Плохо: блокирует рендеринг -->
<script src="analytics.js"></script>

<!-- Хорошо: не блокирует -->
<script src="analytics.js" defer></script>
<script src="widget.js" async></script>

5. Use a CDN

Cloudflare, Fastly, and Amazon CloudFront deliver static assets from a node closest to the user. This reduces TTFB by 50-70% for users who are far away.

6. Inline critical CSS

<style>
/* Стили для первого экрана — нет блокировки загрузки -->
.hero { background: #1a1a2e; height: 100vh; }
.hero img { width: 100%; object-fit: cover; }
</style>

Measuring LCP

• Google Search Console → Core Web Vitals (real-world data)
• PageSpeed Insights — shows the LCP element highlighted in a screenshot
• Chrome DevTools → Performance → press Ctrl+Shift+P → Show LCP
• web-vitals.js library for measuring in code:

import {onLCP} from 'web-vitals';
onLCP(metric => console.log(metric));

Check LCP on reChecker

Use Web Vitals to analyze the metrics. The tool will show:

• Current LCP value in seconds
• Rating (good/needs improvement/poor)
• Recommendations for improvement
• Other Core Web Vitals metrics

FAQ

Why does LCP differ between lab tests and real-world data? Lab tests (Lighthouse) run on a standard device over a controlled network. Real-world data includes all users: slow devices, weak internet connections, and different locations. Real-world data matters for SEO (75th percentile).

Which is better as an LCP element: an image or text? The browser automatically determines the LCP element—it is the largest visible element. You don't choose it. But you can optimize the expected LCP element (usually the hero image or main heading).

Why did LCP change after an A/B test? A/B testing that changes the hero image or main heading directly affects LCP. A heavier image in one variant means worse LCP. Take this into account when evaluating A/B test results.