LCP
LCP (Largest Contentful Paint) — метрика Core Web Vitals: время отрисовки самого большого элемента. Бенчмарк ≤2.5с. Как оптимизировать.
LCP (Largest Contentful Paint) — одна из трёх метрик Core Web Vitals. Фиксирует момент, когда в области видимости браузера отрисовался самый крупный элемент страницы: hero-изображение, обложка статьи, крупный заголовок или постер видео.
Определение
LCP измеряет время от начала навигации до отображения LCP candidate — элемента с максимальной пиксельной площадью в области просмотра. Браузер выбирает кандидата автоматически. На страницах QRkoder LCP candidate — hero-баннер генератора или обложка статьи блога.
LCP не равен FCP (First Contentful Paint): FCP — первый любой пиксель, LCP — самый крупный финальный элемент. Именно LCP коррелирует с реальным ощущением «страница загрузилась» и входит в Page Experience Signals Google.
Бенчмарки и измерение
- Good: ≤ 2,5 с — страница воспринимается быстрой.
- Needs Improvement: 2,5–4,0 с — влияет на конверсию и ранжирование.
- Poor: > 4,0 с — Google снижает позиции в мобильной выдаче.
Инструменты измерения: PageSpeed Insights — лабораторный и полевой LCP с именем LCP-элемента; Google Search Console → «Core Web Vitals» — агрегированные данные за 28 дней; Chrome DevTools → Performance → метка LCP на таймлайне; web-vitals.js — сбор реальных данных прямо в браузере пользователя.
Как оптимизировать LCP
- Preload + fetchpriority. В
<head>:<link rel="preload" as="image" href="hero.webp" fetchpriority="high">. На теге изображения:fetchpriority="high" loading="eager"— убратьloading="lazy". - Форматы AVIF/WebP. AVIF на 40–50% легче JPEG. Для hero-баннера разница между JPEG 180 KB и AVIF 90 KB — это 0,3–0,5 с LCP на мобильном.
- CDN. TTFB выше 600 мс почти гарантирует LCP > 2,5 с. CDN сокращает TTFB до 50–200 мс.
- Устранение render-blocking. Критический CSS — инлайн, некритический — через
rel="preload"+ onload. JS — атрибутdeferилиasync. - SSR/SSG. LCP-элемент должен быть в HTML первого ответа, а не подгружаться клиентским JS. Это же улучшает canonical URL страницы — поисковик получает финальный HTML сразу. Разметка Schema.org для Article и BreadcrumbList также помогает поисковику правильно оценить приоритет страницы.
Частые вопросы
Почему LCP важнее FCP для ранжирования?
FCP — первый пиксель на экране: логотип, спиннер или заголовок. Пользователь видит активность, но страница ещё не готова. LCP — момент, когда главный контент (hero-изображение, крупный заголовок) стал виден. Google включил LCP в Page Experience Signals, потому что его корреляция с отказами и временем на сайте оказалась выше. Пример: FCP 0,8 с при LCP 4,5 с — страница всё равно в «Poor» и просядет в позициях.
Как определить, какой элемент является LCP candidate?
Браузер выбирает элемент с максимальной пиксельной площадью в области видимости. Кандидаты: <img>, изображение в SVG, CSS background-image, <video poster>, крупный текстовый блок. Откройте Chrome DevTools → Performance, запишите загрузку — метка «LCP» на таймлайне подсветит конкретный DOM-элемент. PageSpeed Insights называет его в блоке «Largest Contentful Paint element».
Влияет ли LCP на позиции в Яндексе?
Яндекс не использует Core Web Vitals как прямой сигнал ранжирования. Однако медленный LCP увеличивает отказы и сокращает время на сайте — а это Яндекс учитывает как поведенческие факторы. Оптимизируя LCP, вы автоматически улучшаете эти метрики для обоих поисковиков. Практически: страница с LCP 4+ секунды теряет посетителей до взаимодействия независимо от поисковика.
Что делать, если LCP — текстовый блок, а не изображение?
Для текстового LCP candidate preload и fetchpriority не применимы — браузер не грузит шрифт как ресурс изображения. Фокус на: TTFB (кэш, CDN); render-blocking CSS и JS (убрать синхронный JS из head, inline critical CSS); шрифты — font-display: swap + <link rel="preconnect"> для CDN шрифтов. При TTFB < 200 мс и отсутствии render-blocking текстовый LCP обычно укладывается в 1,5–2 с.
Можно ли проверить LCP без Google Search Console?
Да. PageSpeed Insights даёт лабораторный LCP (Lighthouse) и полевые данные из CrUX — если у страницы достаточно реального трафика за 28 дней. Chrome DevTools → Performance показывает точный кадр с меткой LCP. Библиотека web-vitals.js позволяет собирать LCP прямо от пользователей и отправлять в GA4 или собственный эндпоинт — это реальное распределение по устройствам, а не лабораторный снимок.