Core Web Vitals: что это, как измерить и улучшить LCP, CLS, INP

Сводная таблица пороговых значений

Что такое Core Web Vitals

Core Web Vitals (CWV) — это набор метрик, которые Google считает ключевыми для пользовательского опыта на вебе. В мае 2021 года они стали официальным сигналом ранжирования в рамках обновления Page Experience. Это означает, что плохие показатели CWV могут напрямую снижать позиции страниц в поиске.

В отличие от лабораторных метрик (таких как Lighthouse-оценка), CWV основаны на реальных данных пользователей (Chrome User Experience Report, CrUX). Google собирает эти данные на протяжении 28 дней, поэтому изменения видны не мгновенно.

Три метрики CWV охватывают три фундаментальных аспекта загрузки страницы:

• LCP (Largest Contentful Paint) — скорость загрузки основного контента. Когда пользователь видит главный блок страницы?
• CLS (Cumulative Layout Shift) — визуальная стабильность. Смещаются ли элементы страницы в процессе загрузки?
• INP (Interaction to Next Paint) — отзывчивость интерфейса. Насколько быстро страница реагирует на действия пользователя?

Для ранжирования Google оценивает страницу как «хорошую», если 75-й перцентиль реальных посещений укладывается в пороговое значение «Хорошо» по всем трём метрикам одновременно.

LCP — Largest Contentful Paint

LCP фиксирует момент, когда в области просмотра отрисовывается самый крупный видимый элемент. Обычно это главное изображение, hero-блок, видео-постер или большой текстовый блок. Именно этот момент пользователь воспринимает как «страница загрузилась».

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

Основные причины плохого LCP

• ! Медленный TTFB сервера — если сервер отвечает дольше 600 мс, LCP будет плохим ещё до начала рендеринга. Решение: кеширование на уровне сервера, CDN, оптимизация БД.
• ! Render-blocking ресурсы — CSS и JS, загружаемые в <head> без defer/async, блокируют парсинг и откладывают LCP.
• ! Неоптимизированные изображения — JPEG/PNG без WebP/AVIF, отсутствие fetchpriority="high" на LCP-элементе, lazy-loading на главном изображении.

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

<!-- Ускорить LCP-изображение -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

<!-- Атрибуты на img-элементе -->
<img src="hero.webp" alt="..." fetchpriority="high"
     width="1200" height="630"
     decoding="async">

<!-- Перенести некритичный JS -->
<script src="analytics.js" defer></script>

CLS — Cumulative Layout Shift

CLS измеряет визуальную стабильность страницы: суммирует все неожиданные смещения видимых элементов за время загрузки. Когда кнопка, на которую вы собираетесь нажать, вдруг прыгает вниз из-за появившегося баннера — это именно CLS.

Метрика рассчитывается как сумма произведений impact fraction (доля экрана, занятого смещением) и distance fraction (расстояние смещения относительно высоты экрана). Значение 0 — идеал, показывает отсутствие сдвигов.

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

Причины плохого CLS

• ! Изображения без размеров — если у <img> не указаны width и height, браузер не резервирует место, и после загрузки картинки весь контент ниже прыгает.
• ! Динамические блоки без резервирования места — баннеры, чаты, cookie-уведомления, которые «появляются» после загрузки страницы и сдвигают контент.
• ! Шрифты с FOUT — Flash of Unstyled Text: когда системный шрифт заменяется веб-шрифтом с другим размером глифов, текст перескакивает.

Как исправить CLS

<!-- 1. Всегда указывать размеры изображений -->
<img src="photo.webp" width="800" height="450" alt="...">

<!-- 2. Зарезервировать место для баннера через CSS -->
.ad-slot { min-height: 90px; }

<!-- 3. Использовать font-display: optional для веб-шрифтов -->
@font-face {
  font-display: optional; /* не ждёт загрузки, без FOUT */
}

INP — Interaction to Next Paint

В марте 2024 года INP официально заменил FID (First Input Delay) в составе Core Web Vitals. Разница принципиальная: FID измерял только задержку первого взаимодействия, а INP оценивает все взаимодействия за время сессии (клики, нажатия клавиш, тапы) и берёт наихудший результат на уровне 98-го перцентиля.

INP фиксирует время от момента взаимодействия до следующего визуального обновления экрана. Если интерфейс «завис» после нажатия кнопки — это INP-проблема.

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

Причины плохого INP

• ! Тяжёлые обработчики событий — синхронные вычисления в click/input-хендлерах блокируют главный поток и задерживают отрисовку.
• ! Сторонние скрипты — чаты, аналитика, виджеты рекомендаций часто выполняют длинные задачи (Long Tasks >50 мс), которые блокируют реакцию на ввод.
• ! Лишние DOM-операции — принудительный reflow при чтении геометрии элемента сразу после изменения стилей (layout thrashing).

Как улучшить INP

// Разбить длинную задачу на микрозадачи через scheduler.yield()
async function handleClick() {
  doFirstPart();
  await scheduler.yield(); // отдать управление браузеру
  doSecondPart();
}

// Отложить сторонние скрипты до idle
addEventListener('load', () => {
  requestIdleCallback(() => loadChatWidget());
});

Как измерить Core Web Vitals

Существует принципиальное различие между лабораторными данными (ваш тест прямо сейчас) и полевыми данными (реальные пользователи за 28 дней). Для ранжирования Google использует только полевые данные из CrUX. Лабораторные инструменты — для отладки.