Что такое LCP?
LCP (Largest Contentful Paint) — это время отрисовки самого крупного элемента в первом экране страницы: большого изображения, заголовка, баннера или видео-обложки. Именно этот элемент человек считает «основным содержимым», поэтому LCP считается главной метрикой скорости загрузки в Core Web Vitals.
Логика метрики проста: сайт может отрисовывать мелкие детали быстро, но пока не появился главный блок, страница ощущается незагруженной. LCP фиксирует момент, когда посетитель видит ключевой контент.
Какой LCP считается хорошим?
- до 2,5 секунды: хорошо, целевой ориентир Google;
- 2,5–4 секунды: требует улучшения;
- более 4 секунд: плохо.
Где смотреть: PageSpeed Insights (полевые данные из Chrome UX Report и лабораторный замер), GTmetrix, Lighthouse. Смотрите, какой именно элемент браузер посчитал крупнейшим: он указан в отчёте.
Что задерживает LCP?
- медленный TTFB: пока не пришёл HTML, крупному элементу нечего загрузить;
- тяжёлые изображения первого экрана: несжатые JPEG, PNG вместо WebP, картинки без нужного размера;
- картинка крупного элемента, заданная фоном в CSS: браузер узнаёт о ней позже всех;
- шрифты: если крупнейший элемент задан текстом, загрузка шрифта задерживает отрисовку;
- скрипты, которые вставляют контент в страницу после загрузки.
Как улучшить LCP?
- ускорить первый шаг: кэширование и CDN снижают и TTFB, и LCP;
- оптимизировать изображение крупного элемента: сжать, перевести в WebP, задать точные размеры;
- предзагрузить его (preload), если это картинка или шрифт первого экрана: браузер начнёт загрузку сразу, не дожидаясь разбора страницы;
- не применять lazy-loading к картинкам первого экрана: отложенная загрузка нужна изображениям ниже, а не крупнейшему элементу;
- уменьшить вложенность: чем проще разметка первого экрана, тем раньше браузер видит крупный элемент.
Связь LCP с другими показателями
LCP завершает цепочку загрузки: за временем ответа сервера следует время до отрисовки, и только потом появляется основной контент. Вместе со стабильностью (CLS) и отзывчивостью (INP) он образует Core Web Vitals; влияние на отказы прямое: пустой или долга собирающийся первый экран теряет посетителей.
Итоги
LCP отвечает, когда посетитель видит главный элемент страницы. Ориентир — 2,5 секунды. Работают над ним по цепочке: TTFB, сжатие и формат крупного изображения, preload шрифтов и картинок первого экрана. Смотрите не только цифру, но и сам элемент: часто улучшение сводится к одной картинке.