LCP: как ускорить отрисовку главного элемента страницы

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

Пороги

Google считает LCP хорошим, если он не превышает 2,5 секунды, и плохим, если превышает 4 секунды. Оценка идёт по реальным данным посетителей, а не по одному замеру. Эти полевые данные собирает раздел Core Web Vitals в Search Console, а для отдельной страницы их показывает PageSpeed Insights.

Как найти элемент LCP

• В PageSpeed Insights и Lighthouse в диагностике указан элемент, который засчитан как LCP
• В инструментах разработчика Chrome на вкладке производительности элемент LCP отмечен на шкале загрузки
• На разных устройствах элемент может быть разным: на телефоне это часто заголовок или другая картинка

Сначала определите элемент, потом ускоряйте именно его.

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

Время LCP можно разложить на четыре части:

1. Ответ сервера — сколько ждёт браузер до первого байта страницы
2. Задержка начала загрузки ресурса — сколько проходит, пока браузер узнает о главной картинке
3. Загрузка самого ресурса
4. Задержка отрисовки — когда ресурс загружен, но браузер ещё не может его показать из-за скриптов или стилей

Оптимизация эффективна, когда вы находите, какая часть самая длинная.

Сервер

• Кеширование страниц на сервере или в CDN
• Быстрый хостинг: для аудитории в Узбекистане важно, где расположен сервер
• Меньше тяжёлых запросов к базе данных на каждую загрузку
• Сжатие ответа

Главное изображение

• Современный формат и сжатие: WebP или AVIF вместо тяжёлого PNG
• Размер под экран: не отдавать картинку шириной в несколько тысяч пикселей на телефон, использовать атрибуты srcset и sizes
• Не включать отложенную загрузку для главной картинки
• Указать высокий приоритет атрибутом fetchpriority со значением high
• Если картинка задана фоном в CSS, браузер узнаёт о ней поздно — лучше обычный тег img или предзагрузка

Блокирующие ресурсы

Стили и скрипты в начале страницы задерживают отрисовку. Что помогает:

• Критические стили для первого экрана — прямо в странице, остальные — позже
• Скрипты с атрибутами defer или async
• Удаление неиспользуемых библиотек, слайдеров и виджетов на первом экране
• Отложенная загрузка чатов, счётчиков и пикселей

Шрифты

Если LCP — текстовый блок, его задерживают веб-шрифты. Используйте свойство font-display со значением swap, подключайте только нужные начертания и наборы символов, предзагружайте основной шрифт.

Слайдеры и анимации

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

Типичный пример

Главная страница сайта застройщика в Ташкенте открывается большим фото жилого комплекса во весь экран. Фото загружается фоном через CSS, весит несколько мегабайт и подключено к слайдеру. Браузер узнаёт о картинке только после загрузки стилей и скриптов слайдера. Замена на тег img с адаптивными размерами в WebP, высокий приоритет загрузки и показ первого слайда без скрипта обычно сокращают LCP сильнее, чем любые другие правки на этой странице.

Порядок работ

1. Найти страницы с плохим LCP в Search Console
2. Сгруппировать их по шаблону: главная, карточки, статьи
3. Определить элемент LCP для каждого шаблона
4. Разложить время на части и найти самую длинную
5. Исправить и измерить в лаборатории
6. Дождаться обновления полевых данных — они накапливаются постепенно