newUX: new User Experience

LCP: что это такое и как ускорить появление контента

admin 2 мин чтения

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

Что такое LCP

Largest Contentful Paint, или LCP, измеряет время до отрисовки самого крупного элемента в первом экране. Обычно это заголовок, большое изображение или видео-превью. Хорошим считается результат меньше 2,5 секунды.

Метрика отвечает на простой вопрос: когда клиент наконец увидел то, за чем пришёл. До этого момента он смотрит на пустой экран или на частично загруженную страницу.

Как измерить

Откройте сайт на телефоне через мобильный интернет и засеките, когда появляется основной блок. Для точных цифр используйте PageSpeed Insights: сервис показывает LCP отдельно для мобильных и десктопа. Сравнивайте не только главную, но и страницы услуг и статей.

Что влияет на LCP

  • Изображения. Большие картинки без сжатия и без современных форматов грузятся дольше всего.
  • Сервер. Медленный ответ хостинга сдвигает всё остальное.
  • Шрифты и стили. Если они блокируют отрисовку, контент ждёт их загрузки.
  • Лишние скрипты. Тяжёлый JavaScript откладывает появление видимого контента.

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

  1. Сожмите главное изображение и переведите его в WebP или AVIF.
  2. Задайте картинке явные размеры, чтобы браузер мог её зарезервировать.
  3. Не откладывайте загрузку главного изображения: пусть оно грузится в первую очередь.
  4. Уберите блокирующие скрипты из шапки или отложите их.
  5. Проверьте ответ сервера: иногда помогает кэш или более быстрый тариф.

Пошаговый список общих мер есть в статье "Как ускорить загрузку сайта".

Как это связано с остальными метриками

LCP отвечает за появление контента, INP за отзывчивость на действия, CLS за стабильность вёрстки. Вместе они описывают, насколько удобно клиенту на странице. Общий разбор в статье "Core Web Vitals простыми словами".

Итог

LCP показывает, когда клиент увидел главное. Чаще всего его тормозят изображения и скрипты, и оба пункта решаются без разработчика. Начните с главной картинки и проверьте результат в PageSpeed Insights.

← Все статьи