LCP: как оптимизировать Largest Contentful Paint

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

zoom_in

Что такое LCP и почему это важно

LCP измеряет время от начала навигации до момента, когда самый крупный элемент контента (текст или изображение) появляется в области просмотра. По этому порогу Google считает загрузку «завершённой» с точки зрения пользовательского опыта.

В отличие от FCP (First Contentful Paint), который срабатывает на первом пикселе, LCP отслеживает именно значимый контент. Страница может показать спиннер на 0,3 с, но если главное изображение появится на 5 с, LCP будет 5 с.

Какие элементы браузер считает кандидатами на LCP

Браузер отслеживает не все элементы. Он смотрит на определённые типы и в момент завершения загрузки выбирает самый большой по площади в области просмотра.

Элементы <img>

Обычные изображения. Самый частый кандидат на LCP на большинстве страниц. Время — момент, когда декодированное изображение появляется в области просмотра.

<image> внутри SVG

Изображения внутри элементов SVG. Для LCP их считают так же, как обычные img.

CSS background-image

Фоновые изображения через CSS. Важный нюанс: браузер не начинает загружать background-image, пока не построен CSSOM. Это одна из главных причин задержки LCP.

Текстовые блоки

<p>, <h1>–<h6>, <div> и другие элементы с текстовым содержимым. Если текстовый блок больше любого изображения, он становится LCP.

<video> с poster

Кадр-заставка видеоэлемента (атрибут poster). Если видео занимает большую часть экрана, постер должен загружаться как можно быстрее.

Из чего складывается время LCP

Google делит LCP на 4 составляющие. Чтобы правильно поставить диагноз и расставить приоритеты в оптимизации, нужно понимать каждую из них.

Правило: сначала займитесь составляющей с самой большой долей. Если из 5 секунд LCP 3 приходятся на TTFB, оптимизация изображений почти ничего не даст. Сначала исправьте время ответа сервера.

Основные причины медленного LCP

90% плохих оценок LCP имеют одни и те же корневые причины. Диагностика занимает 15 минут в DevTools или PageSpeed Insights.

Как оптимизировать LCP: пошаговый план

Оптимизация LCP — не один приём, а набор связанных улучшений. Работайте по порядку, начиная с самых эффективных.

Шаг 1: снизьте TTFB до 200–400 мс

TTFB — фундамент. Если сервер медленный, все остальные оптимизации упираются в этот потолок.

1. Настройте HTTP-кэширование: Cache-Control: max-age=31536000 для статики, s-maxage для CDN-прокси.
2. Включите сжатие: Brotli (предпочтительно) или gzip для HTML, CSS и JS. Brotli даёт файлы на 15–25% меньше, чем gzip.
3. Подключите CDN: Cloudflare, Fastly, BunnyCDN. Для статичных сайтов кэширование на периферии сети снижает TTFB до 20–50 мс.
4. Оптимизируйте базу данных: индексы по часто запрашиваемым полям, кэширование запросов через Redis или Memcached.
5. Используйте HTTP/2 или HTTP/3: несколько запросов идут по одному соединению без head-of-line blocking.

Шаг 2: оптимизируйте изображение LCP

Если элемент LCP — изображение (баннер, фото товара), эта группа мер окупается лучше всего.

• Переведите изображения в современные форматы: WebP (экономия 25–35% против JPEG) или AVIF (40–55% против JPEG). Используйте <picture> с запасным вариантом.
• Добавьте fetchpriority="high" к изображению LCP — браузер загрузит его с наивысшим приоритетом.
• Уберите loading="lazy" с элемента LCP. Ленивая загрузка нужна только для изображений ниже первого экрана.
• Добавьте <link rel="preload" as="image"> в <head> для изображения LCP — браузер начнёт загрузку до разбора body.
• Задайте атрибуты width и height, чтобы не допустить CLS. Браузер резервирует место до загрузки изображения.
• Настройте srcset и sizes для адаптивной загрузки: на мобильных грузится изображение 400 px вместо 1600 px.

Шаг 3: уберите ресурсы, блокирующие отрисовку

Каждый ресурс, блокирующий отрисовку, добавляет задержку LCP. Цель — ноль блокирующих ресурсов в критическом пути (critical path).

Шаг 4: оптимизируйте шрифты (если LCP — текст)

Если элемент LCP — текстовый блок (заголовок, лид), причина часто в задержке отрисовки шрифта.

1. Добавьте font-display: swap или optional в @font-face. Браузер сразу покажет системный шрифт и заменит его нужным после загрузки.
2. Используйте <link rel="preload" as="font" type="font/woff2" crossorigin> для критичных шрифтов в <head>.
3. Ограничьте набор символов: сабсеттинг (subsetting), чтобы грузить только нужные глифы (латиница, кириллица).
4. Хостите шрифты у себя вместо Google Fonts: так убирается лишний DNS-запрос и соединение.
5. Задайте size-adjust, ascent-override и descent-override в @font-face, чтобы уменьшить CLS при подмене шрифта.

Шаг 5: SSR/SSG для JavaScript-фреймворков

Если сайт работает на React, Vue или Next.js без SSR, LCP будет высоким по умолчанию: браузер должен скачать JavaScript, выполнить его и только потом отрисовать контент.

Server-Side Rendering (SSR)

HTML формируется на сервере для каждого запроса. Браузер получает готовый HTML, разбирает его, и элемент LCP появляется, не дожидаясь JS. Лучший вариант для динамического контента.

Static Site Generation (SSG)

HTML формируется на этапе сборки. Сервер отдаёт готовый файл — максимальная скорость TTFB и LCP. Идеально для блогов, лендингов и неперсонализированных страниц.

Incremental Static Regeneration (ISR)

SSG с периодической регенерацией (Next.js). Совмещает скорость статичных файлов со свежестью данных. Оптимально для большинства контента CMS.

Streaming SSR

Сервер начинает отправлять HTML до того, как рендеринг завершён, и браузер постепенно показывает контент. React 18 и Next.js 13+ поддерживают это из коробки.

Шаг 6: CSS background-image как элемент LCP

Если элемент LCP использует CSS background-image, браузер не может начать его загрузку, пока не построен CSSOM. Это одна из самых коварных причин медленного LCP.

• Замените CSS background-image на <img fetchpriority="high"> — браузер найдёт его уже при разборе HTML.
• Если замена невозможна, используйте <link rel="preload" as="image">, чтобы запустить загрузку вручную.
• Для адаптивных фонов используйте imagesrcset и imagesizes в теге preload.
• Вынесите CSS с фоновым изображением LCP в inline-тег <style>: это убирает один сетевой запрос.

Инструменты для измерения и диагностики LCP

Точный диагноз важнее слепой оптимизации. Используйте оба типа инструментов: Lab (синтетические тесты) и Field (реальные пользователи).

Как диагностировать LCP в Chrome DevTools

DevTools — самый точный инструмент, чтобы понять, что именно тормозит LCP на конкретной странице.

1. Откройте DevTools → Performance, нажмите Record, перезагрузите страницу и остановите запись.
2. В Timings найдите маркер LCP: он показывает точное время и элемент.
3. Изучите водопад: найдите ресурс элемента LCP и проверьте, когда началась его загрузка относительно TTFB.
4. Ищите красные полосы — это ресурсы, блокирующие отрисовку. Они идут прямо перед LCP.
5. Вкладка Network → фильтр по типу Image: найдите изображение LCP и проверьте его приоритет (должен быть High).
6. Вкладка Coverage показывает неиспользуемые CSS и JS. Большой объём неиспользуемого кода = задержка LCP.

Частые вопросы