LCP (Largest Contentful Paint): что это и как улучшить

LCP — метрика Core Web Vitals, измеряющая время загрузки крупнейшего видимого элемента страницы. Норма: до 2.5 секунды. Прямой фактор ранжирования Google.

Что такое LCP

LCP (Largest Contentful Paint) — метрика Core Web Vitals, которая измеряет время от начала загрузки страницы до момента когда самый крупный видимый элемент в области просмотра (viewport) полностью отрендерен.

LCP отражает субъективное восприятие пользователем скорости загрузки: когда появился основной контент страницы — изображение, заголовок, блок текста — пользователь чувствует что страница загружена.

Что может быть LCP-элементом:

<img> теги
<image> внутри <svg>
Фоновые изображения CSS с url()
Блоки текста (<p>, <h1>, <div>)
Видео-постеры (<video poster>)

Пороговые значения LCP

| Значение | Оценка | Действие | |----------|--------|---------| | до 2.5 секунды | Хорошо | Цель для каждой страницы | | 2.5 — 4.0 секунды | Требует улучшения | Работайте над оптимизацией | | более 4.0 секунды | Плохо | Срочная оптимизация |

Google использует 75-й перцентиль от реальных пользователей (полевые данные CrUX за 28 дней).

Частые причины плохого LCP

Медленный сервер (TTFB): сервер долго отвечает до начала загрузки
Блокирующий JavaScript: скрипты в <head> задерживают рендеринг
Большие изображения: неоптимизированные картинки без сжатия
Отсутствие CDN: ресурсы загружаются с далёкого сервера
Неприоритизированные LCP-ресурсы: браузер поздно начинает загрузку LCP-изображения

Как улучшить LCP

1. Preload для LCP-изображения

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

2. Оптимизация изображений

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

3. Ускорение сервера (TTFB)

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

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

4. Устранение render-blocking ресурсов

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

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

5. Использование CDN

Cloudflare, Fastly, Amazon CloudFront — доставка статики с ближайшего к пользователю узла. Снижает TTFB на 50-70% для удалённых пользователей.

6. Встроенный критический CSS

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

Измерение LCP

Google Search Console → Основные веб-показатели (реальные данные)
PageSpeed Insights — покажет LCP элемент с выделением на скриншоте
Chrome DevTools → Performance → нажмите Ctrl+Shift+P → Show LCP
web-vitals.js библиотека для измерения в коде:

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

Проверка LCP на reChecker

Используйте Web Vitals для анализа показателей. Инструмент покажет:

Текущее значение LCP в секундах
Оценку (хорошо/требует улучшения/плохо)
Рекомендации по улучшению
Другие метрики Core Web Vitals

FAQ

Почему LCP отличается в лаборатории и реальных данных? Лабораторные тесты (Lighthouse) запускаются на стандартном устройстве в контролируемой сети. Реальные данные включают всех пользователей: медленные устройства, слабый интернет, геолокацию. Для SEO важны реальные данные (75-й перцентиль).

Картинка или текст — что лучше как LCP-элемент? LCP-элемент определяет браузер автоматически — это самый крупный видимый элемент. Вы не выбираете его. Но можете оптимизировать предполагаемый LCP-элемент (обычно hero-изображение или главный заголовок).

LCP изменился после A/B теста — почему? A/B тестирование с изменением hero-изображения или главного заголовка напрямую влияет на LCP. Более тяжёлое изображение в одном варианте = хуже LCP. Учитывайте это при оценке A/B результатов.