Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) - это метрика Core Web Vitals, которая измеряет время от начала навигации до завершения отрисовки самого крупного видимого элемента в области просмотра. Это основной показатель Google для определения того, "когда страница ощущается загруженной для пользователя".
Largest Contentful Paint (LCP) - это метрика Core Web Vitals, которая измеряет время от начала навигации до завершения отрисовки самого крупного видимого элемента в области просмотра. Это основной показатель Google для определения того, "когда страница ощущается загруженной для пользователя".
Почему это важно
LCP - одна из трёх метрик Core Web Vitals и подтверждённый сигнал ранжирования Google. Пороги Google: хорошо - не более 2,5 с, требует улучшения - 2,5-4,0 с, плохо - более 4,0 с. Страницы в зоне "хорошо" демонстрируют измеримо более низкий показатель отказов и более высокую конверсию, а несоответствие LCP в 75-м перцентиле может снижать позиции по конкурентным запросам.
Что считается "самым крупным элементом"
LCP отслеживает самый крупный элемент, отрисованный в видимой области просмотра. К подходящим кандидатам относятся <img>, кадры-постеры <video>, фоновые изображения, загружаемые через CSS url(), и блочные текстовые узлы. "Самый крупный" элемент может меняться во время загрузки - LCP использует тот элемент, который в итоге окажется самым крупным.
Распространённые причины медленного LCP
Медленный ответ сервера (TTFB): если HTML доставляется за 1,5 с, LCP не может быть менее 2,5 с.
Ресурсы, блокирующие отрисовку: синхронные CSS и JS в head задерживают первую отрисовку.
Неоптимизированные изображения: главное изображение часто является элементом LCP. Слишком большие, несжатые или поздно загружаемые изображения - причина большинства проблем с LCP.
Рендеринг на стороне клиента: SPA-фреймворки, которые рендерят в JS после гидратации, отодвигают LCP далеко за порог "хорошо".
Ленивая загрузка элемента LCP: добавление loading="lazy" к главному изображению - распространённая ошибка, оно задерживает тот самый элемент, который измеряет LCP.
Как улучшить LCP
Предзагружайте главное изображение: <link rel="preload" as="image" href="..."> даёт браузеру фору.
Используйте современные форматы изображений: WebP и AVIF сокращают объём на 30-50% по сравнению с JPEG.
Добавьте fetchpriority="high" к главному изображению, чтобы оно опережало другие ресурсы.
Раздавайте через CDN, чтобы сократить TTFB для удалённых пользователей.
Встраивайте критический CSS и откладывайте остальное.
Используйте SSR или статическую генерацию вместо рендеринга на стороне клиента для страниц с большим объёмом контента.
Активно кэшируйте на границе сети для повторных посетителей.
Измерение LCP
Полевые данные: Chrome UX Report (CrUX), отчёт Core Web Vitals в Google Search Console, PageSpeed Insights - они отражают реальных пользователей.
Лабораторные данные: Lighthouse, WebPageTest, панель Performance в Chrome DevTools - воспроизводимые, но синтетические.
Google ранжирует по 75-му перцентилю полевых данных, поэтому одних синтетических тестов недостаточно.
Источники: