Core Web Vitals: полное руководство 2026

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

Три метрики применяются к каждому URL отдельно — хорошие показатели главной страницы не помогут карточкам товаров. Данные Google берёт из Chrome UX Report (реальные пользователи), а не из лабораторных тестов.

Что такое Core Web Vitals

История: от FID к INP

Google ввёл Core Web Vitals в 2020 году с тремя метриками: LCP, FID (First Input Delay) и CLS. FID измерял задержку первого нажатия — это ценная метрика, но она охватывала лишь часть интерактивности страницы.

LCP — Largest Contentful Paint

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

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

• Медленный TTFB (сервер, CDN, отсутствие кеширования) — до 40% времени LCP
• Изображение не приоритизировано: нет fetchpriority="high" на hero-img
• Hero-изображение не предзагружено (<link rel="preload">)
• Render-blocking CSS/JS задерживает первую отрисовку
• Изображение слишком большое: нет WebP/AVIF, нет srcset
• LCP-элемент находится за JS-рендером (React SSR не завершён к моменту LCP)

<!-- Приоритизация LCP-изображения -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<img
  src="/hero.webp"
  alt="Hero"
  fetchpriority="high"
  loading="eager"
  decoding="async"
  width="1280"
  height="720"
/>

INP — Interaction to Next Paint

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

Что ломает INP

• Long Tasks > 50 мс блокируют главный поток — браузер не успевает обработать ввод
• Тяжёлые обработчики событий: синхронный setState в React, массовый DOM update
• Нет scheduler.yield() или setTimeout(0) для разбивки длинных задач
• Сторонние скрипты (чат, реклама, аналитика) занимают main thread
• Анимации через JS вместо CSS transform/opacity

// Разбивка Long Task через scheduler.yield()
async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    // Уступаем main thread каждые 50 элементов
    if (i % 50 === 0) {
      await scheduler.yield();
    }
  }
}

CLS — Cumulative Layout Shift

CLS — безразмерная метрика, описывающая суммарный неожиданный сдвиг элементов страницы. Формула: impact fraction × distance fraction. Сдвиг нажатой кнопки не считается — только то, что сместилось без действия пользователя.

Частые источники CLS

• Изображения без атрибутов width и height — браузер не знает размер до загрузки
• Веб-шрифты без font-display: optional или swap — FOUT сдвигает текст
• Динамически вставляемые баннеры, cookie-уведомления сверху страницы
• CSS-анимации, меняющие top/left/margin вместо transform
• Ads без зарезервированного места (min-height на контейнер)

/* Резервируем место под рекламный блок */
.ad-container {
  min-height: 250px;
  width: 100%;
}

/* Анимация без CLS: только transform/opacity */
.card:hover {
  transform: translateY(-4px);
  /* Нельзя: margin-top: -4px — это сдвиг разметки */
}

Влияние на ранжирование

Google подтвердил: CWV — один из сигналов Page Experience, который участвует в ранжировании. Но это tiebreaker, а не основной фактор. Страница с отличным контентом, но плохим CWV обгонит страницу с хорошим CWV, но слабым контентом.

Важнее косвенный эффект: быстрые страницы снижают отказы, увеличивают глубину сессии и конверсию. Бизнес-кейс CWV сильнее SEO-кейса. Amazon посчитал: +100 мс к LCP = -1% выручки.

Как измерять CWV

Существуют два типа данных: лабораторные (симуляция — Lighthouse, WebPageTest) и полевые (реальные пользователи — CrUX, GSC). Google ранжирует по полевым данным. Лаборатория — для диагностики.

Инструменты диагностики

// web-vitals v4 — сбор реальных CWV
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  // Отправка в GA4
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    metric_id: id,
    metric_delta: value,
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Чеклист оптимизации

LCP

• Добавить fetchpriority="high" и убрать loading="lazy" с hero-изображения
• Добавить <link rel="preload" as="image"> для hero в <head>
• Конвертировать изображения в WebP или AVIF, настроить srcset
• Снизить TTFB до ≤ 800 мс: CDN, кеширование, Edge SSR
• Убрать render-blocking скрипты из <head> (async/defer/module)
• Настроить Cache-Control: max-age=31536000 для статических ресурсов

INP

• Профилировать Long Tasks в Chrome DevTools → Performance → Main Thread
• Разбить задачи > 50 мс через scheduler.yield() или setTimeout(0)
• Дебаунсировать обработчики input / scroll (16–100 мс)
• Оптимизировать React: useMemo, useCallback, React.memo, виртуализация списков
• Перенести сторонние скрипты в Web Worker или загружать после LCP
• CSS-анимации только через transform и opacity

CLS

• Указать width и height на всех <img> — браузер зарезервирует место
• Использовать aspect-ratio для контейнеров с неизвестными размерами
• Настроить font-display: optional для критичных шрифтов
• Зарезервировать min-height для рекламных блоков и динамического контента
• Размещать уведомления (cookie, баннеры) снизу, не сверху страницы
• Проверить FOUT: шрифты без fallback сдвигают текст при подгрузке