Как улучшить LCP: ускоряем отрисовку главного контента
Практика3 минРедакция Innovialabs
Коротко
Найдите LCP-элемент, определите, какая из четырех фаз занимает больше всего времени, и устраните ее: ускорьте ответ сервера, уберите блокирующие ресурсы, дайте главному изображению высокий приоритет и не откладывайте его загрузку.
Коротко: что такое LCP и как его улучшить
LCP (Largest Contentful Paint) — время, за которое браузер отрисовывает самый крупный видимый элемент на первом экране: обычно это главное изображение, баннер или крупный заголовок. По рекомендациям Google, хороший результат — до 2,5 секунды для большинства посещений.
Улучшать LCP нужно не «вообще», а точечно: сначала найти элемент, затем понять, на каком этапе теряется время.
Шаг 1. Найдите LCP-элемент
- PageSpeed Insights показывает LCP-элемент и полевые данные реальных пользователей, если трафика достаточно.
- Chrome DevTools → Performance: запишите загрузку, и на дорожке таймингов появится отметка LCP с ссылкой на элемент.
- Отчет Core Web Vitals в Search Console показывает группы страниц с проблемами.
Проверяйте мобильную версию: на ней LCP-элемент часто другой, а сеть и процессор медленнее.
Шаг 2. Разложите LCP на фазы
| Фаза | Что происходит | Типичная причина задержки |
|---|---|---|
| TTFB | Ожидание первого байта HTML | Медленный сервер, нет кеша, далекий хостинг |
| Задержка загрузки ресурса | От TTFB до начала загрузки картинки | Изображение обнаруживается поздно: через CSS или JS |
| Длительность загрузки | Скачивание самого файла | Тяжелое изображение, неподходящий формат |
| Задержка отрисовки | От загрузки до показа | Блокирующие CSS/JS, шрифты, гидратация |
Лечите ту фазу, которая занимает больше всего времени.
Ускорьте ответ сервера
- Кешируйте HTML: статическая генерация или кеш на уровне сервера и CDN.
- Размещайте сервер или CDN ближе к аудитории.
- Уберите лишние редиректы: каждый добавляет сетевой круг.
- Оптимизируйте медленные запросы к базе на критичных страницах.
Уберите блокирующие ресурсы
- Подключайте скрипты с
deferилиasync, если им не нужно выполняться до отрисовки. - Встраивайте критический CSS для первого экрана, остальное загружайте позже.
- Удалите неиспользуемые библиотеки и сторонние виджеты на первом экране.
- Не прячьте главный контент за JavaScript: если заголовок или изображение появляются только после выполнения скрипта, LCP растет.
Дайте приоритет главному изображению
Самая частая ошибка — loading="lazy" на картинке первого экрана. Ленивая загрузка нужна для изображений ниже, а для LCP-элемента — наоборот, высокий приоритет:
<img src="/hero.avif" width="1200" height="600"
fetchpriority="high" alt="Описание">
Если изображение задано в CSS как фон, браузер узнает о нем поздно. Сделайте его обычным <img> или добавьте preload:
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
Также:
- используйте современные форматы WebP или AVIF;
- отдавайте размер под экран через
srcsetиsizes; - не применяйте анимацию появления, которая скрывает элемент до окончания скрипта.
Настройте шрифты
Если LCP-элемент — текст, его задерживает загрузка веб-шрифта.
- Используйте
font-display: swap, чтобы текст сразу показывался системным шрифтом. - Делайте preload только для одного-двух ключевых начертаний.
- Размещайте шрифты на своем домене и подключайте только нужные наборы символов.
Как проверять результат
Лабораторные тесты показывают эффект сразу, но оценка Google строится на полевых данных реальных пользователей за последние недели. Поэтому после изменений сравнивайте лабораторные замеры, а улучшение в Search Console ожидайте с задержкой.