Largest Contentful Paint (LCP)

Время загрузки самого большого видимого элемента на странице. Ключевая метрика Core Web Vitals для скорости загрузки.

Скорость загрузки контента

LCP измеряет, сколько времени требуется для отрисовки самого большого элемента в видимой области (viewport). Обычно это hero-изображение, заголовок или блок текста.

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

Оценка

Время

Статус

Хорошо

< 2.5 сек

✓ Good

Требует улучшения

2.5 - 4.0 сек

⚠ Needs Improvement

Плохо

> 4.0 сек

✗ Poor

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

• <img> — изображения
• <video> — видео (poster image)
• background-image — фоновые изображения через CSS
• Блоки текста — <p>, <h1>, <div> с текстом

Как улучшить LCP:

1. Оптимизация изображений — WebP/AVIF, сжатие, правильные размеры
2. Preload критичных ресурсов — <link rel="preload"> для hero-изображения
3. Уменьшение TTFB — быстрый сервер, CDN
4. Удаление блокирующих ресурсов — defer/async для JS, критичный CSS inline
5. Server-Side Rendering — SSR/SSG вместо CSR

Частые проблемы:

• Огромное hero-изображение (5MB+) без оптимизации
• Lazy loading на изображении above-the-fold
• Медленный TTFB (shared хостинг, далёкий сервер)
• Блокирующий CSS/JS перед LCP-элементом