Largest Contentful Paint (LCP)
Метрика Core Web Vitals, измеряющая время загрузки самого крупного видимого элемента страницы. Напрямую влияет на ранжирование в Google.
LCP (Largest Contentful Paint) — это время от начала загрузки страницы до момента, когда самый крупный элемент в видимой области (изображение, видео или блок текста) полностью отрисован в браузере. Чем ниже LCP, тем быстрее пользователь видит основной контент.
Что такое Largest Contentful Paint
LCP — ключевая метрика Core Web Vitals, которая Google использует как сигнал ранжирования с 2021 года. Она измеряет, сколько времени проходит от начала загрузки страницы до полной отрисовки самого крупного видимого элемента в области экрана пользователя.
LCP отражает воспринимаемую скорость: когда главный контент появляется быстро, пользователь воспринимает страницу как быструю, даже если загрузка ещё не завершена полностью.
Пороговые значения LCP
| Результат | Время LCP | Что делать |
|---|---|---|
| Хорошо | ≤ 2,5 сек | Поддерживать, не деградировать при обновлениях |
| Требует улучшения | 2,5–4 сек | Оптимизировать приоритет загрузки hero-элемента |
| Плохо | > 4 сек | Критично: комплексная оптимизация изображений, TTFB, рендера |
Какие элементы учитываются как LCP
- Изображения
<img>и<image>внутри SVG - Фоновые изображения через
background-image: url(...)в CSS - Видео с атрибутом
poster— браузер использует превью-кадр - Блоки текста — если они самые крупные в viewport:
<p>,<h1>,<div>с текстом
Как улучшить LCP
Использовать WebP/AVIF, добавить fetchpriority="high" на LCP-элемент, убрать loading="lazy" с первого экрана.
Оптимизировать ответ сервера, включить CDN, настроить кэширование. TTFB > 800 мс делает хороший LCP невозможным.
Перенести некритичные CSS и JS в конец документа или использовать атрибуты defer / async. Встроить критичный CSS инлайн.
Добавить <link rel="preload" as="image"> для LCP-изображения или <link rel="preload" as="font"> если LCP — текст в кастомном шрифте.
Частые вопросы
Обсудим ваш проект?
Расскажите о целях и сайте — предложу формат работы и следующий шаг.