Largest Contentful Paint (LCP): что это

Что именно измеряет LCP?

LCP фиксирует время загрузки главного видимого контента — чаще всего это:

• большое изображение (баннер, фото, иллюстрация);
• заголовок или блок текста;
• видео-превью;
• фон с изображением, если он задан через HTML (а не через CSS).

Важно, что учитывается только тот элемент, который действительно виден пользователю на экране, а не то, что находится “ниже прокрутки”.

Зачем нужен LCP?

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

Хороший показатель LCP:

• До 2.5 секунд — хороший результат;
• От 2.5 до 4 секунд — требует улучшения;
• Более 4 секунд — считается плохим.

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

1. Размер и формат изображений — тяжёлые изображения замедляют отображение.
2. Скорость работы сервера — медленный отклик влияет на загрузку элементов.
3. JavaScript и CSS — если они блокируют отрисовку, LCP ухудшается.
4. Клиентское подключение (интернет) — медленная сеть увеличивает время загрузки.
5. Асинхронная подгрузка — если главный элемент появляется с задержкой, это фиксируется как поздний LCP.

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

• Использовать современные форматы изображений (WebP, AVIF);
• Оптимизировать размеры графики и видео;
• Уменьшить время ответа сервера;
• Минимизировать блокирующий CSS и JavaScript;
• Загружать критические ресурсы как можно раньше (через <link rel=”preload”>);
• Применять lazy loading только к тем элементам, которые не участвуют в LCP.

Простой пример:

Допустим, пользователь открывает интернет-магазин. На первом экране сразу должен загрузиться заголовок «Летняя распродажа» и яркое изображение товара. Если они отображаются через 1.8 секунды — LCP хороший. Если только через 5 секунд — плохой, пользователь может закрыть страницу, не дождавшись загрузки.

Largest Contentful Paint — это показатель, который напрямую отражает ощущение “скорости сайта” с точки зрения обычного посетителя, а не только с технической стороны.