Largest Contentful Paint (LCP)

Метрика Core Web Vitals, измеряющая время загрузки самого крупного видимого элемента страницы. Напрямую влияет на ранжирование в Google.

Кратко

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

Что такое Largest Contentful Paint

LCP — ключевая метрика Core Web Vitals, которая Google использует как сигнал ранжирования с 2021 года. Она измеряет, сколько времени проходит от начала загрузки страницы до полной отрисовки самого крупного видимого элемента в области экрана пользователя.

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

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

РезультатВремя LCPЧто делать
Хорошо≤ 2,5 секПоддерживать, не деградировать при обновлениях
Требует улучшения2,5–4 секОптимизировать приоритет загрузки hero-элемента
Плохо> 4 секКритично: комплексная оптимизация изображений, TTFB, рендера
Google оценивает LCP по полевым данным (реальные пользователи из Chrome UX Report), а не лабораторным. Лаборатория (Lighthouse) полезна для диагностики, но ранжирование зависит от CrUX.

Какие элементы учитываются как LCP

  • Изображения <img> и <image> внутри SVG
  • Фоновые изображения через background-image: url(...) в CSS
  • Видео с атрибутом poster — браузер использует превью-кадр
  • Блоки текста — если они самые крупные в viewport: <p>, <h1>, <div> с текстом
Браузер постоянно обновляет «кандидата на LCP» по мере загрузки страницы. Финальное значение LCP фиксируется, когда пользователь начинает взаимодействовать со страницей (прокрутка, клик, ввод).

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

Шаг 1Оптимизировать hero-изображение

Использовать WebP/AVIF, добавить fetchpriority="high" на LCP-элемент, убрать loading="lazy" с первого экрана.

Шаг 2Снизить TTFB сервера

Оптимизировать ответ сервера, включить CDN, настроить кэширование. TTFB > 800 мс делает хороший LCP невозможным.

Шаг 3Устранить блокировку рендера

Перенести некритичные CSS и JS в конец документа или использовать атрибуты defer / async. Встроить критичный CSS инлайн.

Шаг 4Предзагрузить ресурс LCP

Добавить <link rel="preload" as="image"> для LCP-изображения или <link rel="preload" as="font"> если LCP — текст в кастомном шрифте.

Частые вопросы

Да. LCP — часть Core Web Vitals, которые Google учитывает как сигнал ранжирования с июня 2021 года. Особенно критично для мобильного поиска.
Google PageSpeed Insights (полевые данные + Lighthouse), отчёт Core Web Vitals в Google Search Console, Chrome DevTools (вкладка Performance) или WebPageTest.
Нет. FCP (First Contentful Paint) фиксирует момент появления любого первого контента. LCP — время отрисовки самого крупного элемента, что ближе к восприятию «страница загрузилась».
В большинстве случаев — hero-изображение в шапке страницы или первый крупный заголовок H1. Можно увидеть в Lighthouse: раздел «Largest Contentful Paint element».
Лабораторные тесты (Lighthouse) запускают страницу в контролируемых условиях без кэша. Полевые данные (CrUX) — это реальные устройства, сети и геолокации пользователей, часто медленнее лабораторных.
Прямые контакты

Обсудим ваш проект?

Расскажите о целях и сайте — предложу формат работы и следующий шаг.