Core Web Vitals: LCP, INP и CLS

Обновлено в 2025 году · ~8 минут чтения

Core Web Vitals — это набор из трёх метрик, которыми Google измеряет реальный пользовательский опыт на странице: скорость загрузки основного контента, отзывчивость на действия и визуальную стабильность. Эти метрики собираются по реальным пользователям (field data) и влияют как на удобство, так и на ранжирование.

Три метрики и их пороги

Для каждой метрики есть три зоны: хорошо, нужно улучшить и плохо. Ориентироваться принято на 75-й перцентиль — то есть показатель должен быть «хорошим» минимум у 75% посещений.

Метрика	Хорошо	Плохо
LCP	≤ 2.5 с	> 4.0 с
INP	≤ 200 мс	> 500 мс
CLS	≤ 0.1	> 0.25

LCP — Largest Contentful Paint

Показывает, за какое время отрисовывается самый крупный видимый элемент (обычно главное изображение или заголовок). По сути — момент, когда пользователю кажется, что страница «загрузилась».

Как улучшить

Оптимизируйте ответ сервера (TTFB): кэширование, CDN, быстрый бэкенд.
Предзагружайте ключевой ресурс: <link rel="preload"> для LCP-картинки или шрифта.
Не прячьте главное изображение за JavaScript — отдавайте его в HTML.
Сжимайте изображения и используйте современные форматы (AVIF, WebP).

INP — Interaction to Next Paint

В 2024 году INP заменил старую метрику FID. Он измеряет задержку между действием пользователя (клик, тап, ввод) и видимым откликом интерфейса, причём по всем взаимодействиям за сессию, а не только по первому.

Как улучшить

Разбивайте длинные задачи JavaScript (long tasks) на части, отдавайте управление браузеру.
Откладывайте некритичный код: defer, динамический импорт, requestIdleCallback.
Уменьшайте объём гидратации в SPA/SSR-приложениях.
Избегайте тяжёлых синхронных обработчиков событий.

CLS — Cumulative Layout Shift

Оценивает визуальную стабильность: насколько элементы «прыгают» во время загрузки. Раздражающий сдвиг — это когда вы целитесь в кнопку, а контент уезжает.

Как улучшить

Задавайте размеры медиа: атрибуты width/height или aspect-ratio.
Резервируйте место под рекламу и встраиваемые блоки заранее.
Подключайте шрифты с font-display: optional/swap, чтобы избежать перекомпоновки.
Не вставляйте контент над уже видимым, кроме как в ответ на действие пользователя.

Чем измерять

Лабораторно — Lighthouse и WebPageTest. По реальным пользователям — Chrome User Experience Report (CrUX) и PageSpeed Insights, а в продакшене удобно собирать метрики библиотекой web-vitals и отправлять в свою аналитику.

← Все статьи