Largest Contentful Paint

Largest Contentful Paint (LCP) — ключевая метрика производительности веб-страниц, которая измеряет время, необходимое для отображения наибольшего видимого элемента контента в области просмотра пользователя. LCP является частью Core Web Vitals и напрямую влияет на восприятие скорости загрузки страницы.

LCP фиксирует момент, когда основной контент страницы становится визуально доступным, что делает её полезной для оценки пользовательского опыта, в отличие от метрик, учитывающих только загрузку DOM или ресурсы.

Что учитывается в LCP

LCP измеряет визуальное появление:

Изображений: и CSS background images, загружаемые через url().
Текста: блоки
,
-
,
,
с текстовым содержимым.

Видео-элементов: с постером.

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

Элементы, которые не видны пользователю (например, скрытые через display: none или находящиеся за пределами экрана), в расчёт не берутся.

Алгоритм вычисления LCP

Определение видимой области (viewport): LCP фиксируется только для элементов, которые полностью или частично видны пользователю.
Выбор кандидатов: библиотека Lighthouse анализирует все элементы DOM, которые могут считаться крупным контентом.
Вычисление размера элемента: оценивается площадь элемента (в пикселях). Элемент с наибольшей площадью среди видимых считается кандидатом LCP.
Отслеживание времени рендеринга: фиксируется момент, когда выбранный элемент полностью загружен и отрисован браузером.
Финальное значение LCP: это время в миллисекундах с начала навигации до рендеринга наибольшего видимого контента.

Оптимизация LCP

1. Оптимизация изображений

Использовать современные форматы: WebP, AVIF, JPEG 2000.
Подбирать размеры изображений в соответствии с разрешением экрана.
Применять lazy-loading для элементов вне видимой области.
Предварительная загрузка () критических изображений.

2. Оптимизация шрифтов

Минимизировать использование внешних шрифтов.
Применять font-display: swap для уменьшения задержки рендеринга текста.
Предварительно загружать ключевые шрифты.

3. Оптимизация рендеринга и CSS

Минимизировать критический CSS.
Использовать inline CSS для элементов, отображаемых в верхней части страницы.
Избегать блокирующих рендеринг скриптов в верхней части страницы.

4. Оптимизация загрузки ресурсов

Использовать HTTP/2 для ускоренной загрузки ресурсов.
Объединять мелкие ресурсы (CSS, JS) в один файл, если это ускоряет загрузку.
Минимизировать время ответа сервера, так как задержка серверной отдачи напрямую влияет на LCP.

Измерение LCP с помощью Lighthouse

Lighthouse предоставляет инструменты для анализа LCP:

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

Влияние LCP на пользовательский опыт

LCP < 2.5 секунд — страница загружается быстро.
LCP 2.5–4 секунд — страница загружается умеренно.
LCP > 4 секунд — страница загружается медленно, негативно влияет на удержание пользователей и SEO.

Высокий LCP часто связан с крупными изображениями, тяжелыми шрифтами или блокирующими скриптами. Улучшение этой метрики напрямую повышает ощущение скорости загрузки и взаимодействия с сайтом.

Практические советы при работе с LCP в Lighthouse

Определять LCP-элемент на каждой важной странице и проверять его размеры.
Разбивать крупные изображения на более мелкие или использовать прогрессивные форматы.
Минимизировать критический путь рендеринга, сокращая CSS и JS в начале страницы.
Слежение за LCP в динамических приложениях: изменения DOM могут влиять на LCP, поэтому важно повторное измерение после рендеринга контента.