Что такое LCP (Largest Contentful Paint) и что показывает эта метрика?

LCP (Largest Contentful Paint) — это метрика производительности, которая измеряет время от начала загрузки страницы до момента, когда самый крупный видимый элемент в области просмотра (viewport) полностью отрисован. Она отвечает на вопрос: «Когда пользователь увидел основной контент страницы?» Это одна из трёх метрик Core Web Vitals наряду с INP и CLS.

Что именно измеряется

Браузер отслеживает кандидатов на роль LCP-элемента: <img>, <image> внутри SVG, <video> (постер), элементы с background-image, а также блочные элементы с текстом (например, <h1>, <p>). Победителем становится самый крупный по площади элемент, видимый в момент отрисовки. Время фиксируется, когда этот элемент полностью отрисован.

Пороговые значения

• Хорошо: LCP ≤ 2.5 с
• Требует улучшения: 2.5–4.0 с
• Плохо: > 4.0 с

Как измерить

В браузере можно использовать PerformanceObserver:

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  console.log('LCP:', last.startTime, last.element);
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });

Также LCP виден в Chrome DevTools (Performance), Lighthouse, PageSpeed Insights и в отчётах CrUX.

Что влияет на LCP

• Время ответа сервера (TTFB)
• Время загрузки ресурсов (изображений, шрифтов, CSS)
• Время блокировки рендеринга (render-blocking CSS/JS)
• Время выполнения JavaScript на главном потоке

Как улучшить

• Оптимизировать изображения: WebP/AVIF, правильные размеры, fetchpriority="high" для LCP-картинки
• Использовать preload для критичных ресурсов
• Убрать render-blocking ресурсы, инлайнить критический CSS
• Ускорить TTFB: CDN, кэширование, оптимизация бэкенда
• Отложить некритичный JS (defer, async, code splitting)

LCP применяется при оптимизации скорости загрузки сайтов, в SEO-аудитах и при разработке фронтенда, ориентированного на пользовательский опыт. Метрика напрямую коррелирует с восприятием скорости и конверсией.

Итог: LCP стоит применять как ключевой ориентир при оптимизации загрузки страницы — он показывает, когда пользователь видит основной контент, и напрямую влияет на UX и позиции в поиске.