Largest Contentful Paint (LCP) — метрика, которая фиксирует момент, когда браузер отрисовал самый крупный контентный элемент страницы. Не фон, не пустые блоки, а реальный контент: текст, изображение, видео-постер.
Наряду с Cumulative Layout Shift и Interaction to Next Paint это один из трёх Core Web Vitals, которые Google учитывает при ранжировании.
Что считается хорошим LCP?
- ≤ 2.5 с — хорошо, цель для большинства сайтов
- 2.5–4 с — требует улучшений
- > 4 с — плохо, негативно влияет на SEO и UX
Что чаще всего становится LCP-элементом?
Либо крупный блок текста, либо hero-изображение. Изображения — тяжелее, грузятся позже, поэтому с ними больше мороки.
Как найти LCP-элемент?
Следующие инструменты покажут конкретный элемент с тайм-стампом:
- DebugBear (вкладка Overview в результатах теста)
- Google PageSpeed Insights
- Lighthouse
- Chrome DevTools (вкладка Performance)
Что тормозит LCP: основные причины
1. Медленный сервер (TTFB)
Пока браузер не получил HTML — ничего не рисуется. Проверь Time to First Byte: он должен быть ниже 800 мс. Если используешь WordPress, кэширующий плагин (например, WP Rocket) может существенно помочь.
2. Render-blocking ресурсы
CSS-файлы блокируют рендер по умолчанию — это нормально, но нужно держать их компактными. Несколько правил:
- Не используй
@importвнутри CSS: это создаёт цепочки последовательных запросов - JavaScript блокирует рендер, если подключён без
asyncилиdefer, или не вынесен в конец<body> - Parser-blocking запросы блокируют только контент ниже себя в HTML
- Если блокирующих ресурсов нет, а контент всё равно не появляется — проверь, не стоит ли у тебя anti-flicker сниппет (популярен в A/B-тестировщиках)
Запрос самого HTML-документа тоже всегда render-blocking — поэтому снижение TTFB напрямую улучшает LCP.
3. Тяжёлые LCP-изображения
Hero-картинки и баннеры весят много и грузятся после основного HTML. Стандартный чеклист:
- Используй современные форматы: WebP, AVIF
- Задай правильные размеры через
width/heightилиsrcset - Добавь
<link rel="preload">для критичного изображения - Не ленись про
loading="eager"для LCP-элемента (и никакогоlazyна него)
Общая схема оптимизации
- Определи, какой элемент является LCP
- Посмотри на таймлайн запросов: что стоит между стартом загрузки и его отрисовкой?
- Устрани узкие места по приоритету: сначала TTFB, потом render-blocking, потом сам ресурс
ЛCP — это не абстрактная цифра, а цепочка решений: сервер → парсинг HTML → загрузка ресурсов → рендер. Оптимизируй каждое звено — и утка 🦆 на твоём сайте будет появляться быстро.