LCP

Как работает

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

За хороший LCP Google принимает значение ≤ 2.5 секунды, «требует улучшения» — до 4 секунд, «плохо» — больше 4 секунд. Метрика считается по 75-му перцентилю реальных пользователей Chrome — данные приходят из CrUX.

Элементы, которые могут стать LCP-кандидатами: <img>, <video> (постер), фоновые изображения через CSS, крупные блоки текста внутри <p>, <h1>. Обычно на контентном сайте LCP — это hero-картинка или заголовок первого экрана.

<img src="hero.webp" width="1200" height="600" fetchpriority="high" alt="...">

Атрибут fetchpriority="high" подсказывает браузеру начать загрузку LCP-элемента раньше остальных ресурсов — заметно ускоряет метрику без изменения содержимого страницы.

Почему важно для SEO

LCP входит в тройку Core Web Vitals, которые Google использует как фактор ранжирования Page Experience. При равной релевантности страница с LCP 1.5 с обгоняет страницу с LCP 5 с в мобильной выдаче — Google подтверждал это на конференциях Search Central.

Помимо ранжирования, LCP напрямую влияет на поведение: по данным Google, если LCP превышает 4 секунды, показатель отказов растёт в среднем на 30-40%. Пользователь просто закрывает вкладку, не дождавшись контента, — и возвращается в выдачу за следующим результатом. Для Яндекса это сильный поведенческий сигнал, даже без прямой поддержки CWV как метрики.

Частые ошибки

• LCP-картинка не сжата: JPEG весом несколько мегабайт вместо WebP или AVIF на 200-300 КБ.
• У картинки нет атрибутов width и height — браузер не резервирует место, а после загрузки макет сдвигается (портится ещё и CLS).
• LCP-элемент подгружается ленивой загрузкой loading="lazy" — браузер откладывает его до последнего.
• Тяжёлый шрифт блокирует отрисовку текста, который является LCP-элементом.
• CDN отдаёт картинку без сжатия и без правильных заголовков кэширования.
• LCP-ресурс подключён через сторонний домен без preconnect — тратится время на DNS и TLS-хендшейк.

Как проверить

В Chrome DevTools вкладка Performance → запись загрузки страницы → блок Timings → строка LCP: браузер подсветит конкретный элемент и покажет время. PageSpeed Insights (pagespeed.web.dev) даёт LCP из полевых данных CrUX и разбор, какой ресурс задерживает метрику. Расширение Web Vitals для Chrome показывает LCP в реальном времени при переходе по страницам.

SEO Crawler запрашивает LCP из CrUX API для каждой обходимой страницы и подсвечивает URL с плохими значениями. В отчёте это часть блока «Производительность» — с указанием конкретных страниц, которые не проходят порог 2.5 с, и оценкой охваченного ими трафика.

Вывод

LCP — самая заметная и часто самая «чинибельная» метрика Core Web Vitals. Сжимайте LCP-картинку, добавляйте fetchpriority="high", резервируйте место через width и height, не вешайте на LCP-элемент lazy-loading — этих шагов хватает, чтобы уложиться в 2.5 секунды на большинстве сайтов.