Largest Contentful Paint (LCP): как снизить

Largest Contentful Paint (LCP) — это момент, когда в видимой части экрана появляется самый крупный элемент страницы. Обычно это фото героя, крупный заголовок или постер видео. До этой отметки посетитель ещё не видит главное. LCP входит в Core Web Vitals. Хороший результат — до 2,5 секунды у 75% визитов. От 2,5 до 4 секунд метрика средняя, дольше 4 секунд — слабая.

Снизить LCP значит сократить время до этого крупного элемента, а не до всей страницы целиком. Картинки ниже первого экрана на цифру почти не влияют. Сначала смотрят, что именно браузер признал самым крупным, и ускоряют только его. Первая отрисовка разобрана отдельно: First Contentful Paint (FCP): как ускорить. Отзывчивость после появления контента — в материале Total Blocking Time (TBT): как снизить. Общая скорость сайта — в статье как ускорить загрузку сайта.

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

Время до крупного элемента делится на четыре отрезка. Их видно в PageSpeed Insights и в панели Performance.

• 01Ответ сервера. Время от перехода по адресу до первого байта HTML. Пока документа нет, рисовать нечего.
• 02Задержка перед загрузкой ресурса. Документ уже пришёл, а браузер ещё не начал качать картинку или шрифт самого крупного элемента. Часто файл спрятан в скрипте или в стилях и обнаруживается слишком поздно.
• 03Скачивание ресурса. Сколько длится загрузка самого файла: тяжёлое фото тянет этот отрезок.
• 04Задержка отрисовки. Файл уже на месте, но элемент не попадает на экран: его держит чужой скрипт, стили или шрифт, который скрывает текст.

Для цели в 2,5 секунды ориентир такой. Около 40% времени уходит на ответ сервера, около 40% — на скачивание файла. Две задержки, до старта загрузки и до отрисовки, держат короче 10% каждая. Это доли, а не жёсткий норматив: если вся цифра уже ниже 2,5 секунды, пропорции не важны. Если же пауза до старта загрузки съедает секунду, уложиться в хорошую зону почти невозможно, даже с лёгкой картинкой.

Что обычно становится самым крупным элементом

На телефоне и на компьютере это часто разные блоки. Широкий баннер на десктопе на узком экране уходит вниз, и самым крупным становится заголовок. Поэтому замер смотрят в двух версиях.

• 01Фото или иллюстрация первого экрана.
• 02Крупный текстовый блок, чаще заголовок.
• 03Постер видео, если ролик стоит в первом экране.
• 04Картинка из фона блока. Браузер учитывает и её, но находит позже, чем обычный тег изображения.

Как снизить LCP

Цель одна: самый крупный элемент первого экрана должен оказаться в HTML сразу, а его файл — начать качаться без паузы. Ниже — что сделать по шагам.

1. Найдите элемент. В PageSpeed Insights открывают блок LCP и смотрят, какой узел он назвал. Это и есть единственная цель правки. Ускорять галерею внизу страницы, пока героем числится баннер, бесполезно.

2. Ускорьте ответ сервера. Кэш готового HTML, короткий маршрут без цепочки редиректов, один переход на https. Если первый байт документа приходит через две секунды, LCP уже не может быть хорошим: на картинку времени не остаётся.

3. Положите элемент в документ, а не вставляйте скриптом. Заголовок и картинка героя приходят в HTML. Если баннер рисуется после выполнения бандла, браузер узнает адрес файла слишком поздно. Весь этот простой попадает в задержку перед загрузкой.

4. Не прячьте героя ленивой загрузкой. У картинки первого экрана нет loading="lazy". Ленивая загрузка нужна кадрам ниже сгиба. Герою ставят fetchpriority="high" и при необходимости предзагрузку этого одного файла. Предзагружать пачку картинок не нужно: они отнимут канал у той, что должна появиться первой.

5. Сделайте файл лёгким. Героя отдают в современном формате, в размере экрана, а не в исходнике на несколько тысяч пикселей. Для разных ширин — свой файл. Скачивание и есть тот отрезок, который сжимается вместе с весом.

6. Не держите отрисовку. Стили и скрипты, без которых первый экран не собрать, оставляют короткими. Чат, метрика и виджеты этому элементу не нужны. Если самый крупный элемент — текст, на странице один файл шрифта, предзагрузка и показ букв сразу, без скрытия до скачивания. Пока шрифт прячет заголовок, LCP стоит, хотя HTML уже на месте.

7. Достаньте картинку из фона. Адрес в CSS браузер видит только после разбора стилей. Тот же кадр в теге изображения обнаруживается из HTML сразу. Если фон менять нельзя, этот адрес предзагружают отдельно, тем же файлом, который реально стоит на первом экране.

8. Не отдавайте первый экран слайдеру. Слайдер часто показывает пустую рамку, пока не выполнится скрипт, или считает самым крупным не первый слайд, а соседний, который посетитель ещё не видит. Первый кадр кладут в HTML как обычную картинку. Листание подключают после отрисовки.

Как проверить, что стало быстрее

Цифру смотрят в PageSpeed Insights, отдельно для телефона и компьютера. После каждой правки сравнивают LCP и четыре отрезка: ответ сервера, пауза до загрузки файла, само скачивание, пауза до отрисовки. Если выросла только одна доля, правят её, а не всё подряд.

Полевую цифру смотрят в Core Web Vitals по 75-му перцентилю. Лабораторный замер падает сразу. Поле обновляется по мере новых визитов, поэтому несколько дней расхождение нормально. Страницу проверяют с тем героем, который видит живой посетитель: другой баннер для рекламы и теста даёт другую цифру.

Какой результат считать нормальным

Ориентир — до 2,5 секунды у большинства визитов с телефона. Статья и страница услуги укладываются в эту границу, когда заголовок и одна картинка приходят в HTML, а файл героя не тяжёлый и не помечен ленивой загрузкой. Каталог и главная с широким баннером держатся там же, если баннер отдан в размере экрана и не ждёт скрипт слайдера. Если ответ сервера сам по себе длиннее двух секунд, сначала сокращают его: сжатие картинки эту дыру не закроет.