LCP (Largest Contentful Paint)

Что такое LCP и откуда он взялся

LCP (Largest Contentful Paint) появился в 2020 году как часть набора Core Web Vitals от Google, который заменил устаревшие метрики вроде времени полной загрузки DOM. Разработчики заметили, что пользователи судят о скорости сайта по тому, как быстро они видят полезный контент, а не по техническим показателям загрузки. LCP фиксирует момент, когда в зоне видимости появляется самый большой элемент — это может быть крупное изображение, видео, блок с текстом или фон, загружаемый через CSS. В отличие от First Contentful Paint (FCP), который ловит первый кусочек контента, LCP ориентируется на «главный» элемент, который определяет восприятие страницы.

Как работает LCP и почему он важен для SEO

Браузер считывает каждый элемент в видимой области и записывает время его отрисовки. LCP — это время появления элемента с максимальной площадью на экране. Если элемент меняется (например, изображение подгружается после текста), метрика обновляется до финального значения. Для SEO LCP критичен: Google использует его как сигнал ранжирования в мобильном поиске. Медленный LCP увеличивает показатель отказов — пользователи закрывают страницу, если она не отображается за 2-3 секунды. Разработчики выделяют четыре основные причины плохого LCP: медленный ответ сервера, блокирующий рендеринг JavaScript и CSS, большие изображения без атрибутов размеров и неоптимизированные шрифты.

Практический пример: как работает LCP на реальном сайте

Представьте интернет-магазин с главной страницей, где в hero-блоке стоит фотография товара. Пока браузер загружает HTML, сервер отвечает за 1 секунду. Затем браузер парсит HTML и сталкивается с CSS-файлом, который блокирует отрисовку — это занимает еще 0,5 секунды. После этого начинается загрузка изображения, вес которого 2 МБ. При медленном интернете на мобильном устройстве картинка появится только через 4 секунды. Итого LCP = 1 + 0,5 + 4 = 5,5 секунды, что является плохим результатом. Если оптимизировать картинку (сжать до 300 КБ) и добавить атрибуты width и height, браузер зарезервирует место под изображение, и LCP снизится до 2 секунд, даже если сама картинка загрузится чуть позже.

Типичная ошибка: путать LCP с временем полной загрузки

Многие разработчики ошибочно считают, что достаточно ускорить загрузку всех ресурсов страницы, чтобы LCP стал хорошим. Но LCP — это не общее время загрузки. Он фиксируется раньше, чем загрузятся второстепенные скрипты, аналитика, шрифты или футер. Поэтому часто бывает так: сайт полностью грузится 6 секунд, но LCP при этом составляет 2,1 секунды — и Google считает страницу быстрой. И наоборот, если фоновая картинка в hero-блоке грузится медленно, а остальной контент появляется мгновенно, LCP будет большим, хотя страница визуально почти готова. Вторая распространенная ошибка — игнорировать отложенную загрузку изображений (lazy loading) для главного элемента. Если применить lazy loading к картинке в hero-блоке, браузер не начнет её загружать, пока не увидит её в зоне видимости, что может задержать LCP. Правило простое: все, что находится в верхней части страницы, должно загружаться без отложенной загрузки.