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

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

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

zoom_in

Что такое 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-изображение не предзагружено (<link rel="preload">)
• CSS и JS, блокирующие рендеринг, задерживают первую отрисовку
• Изображения слишком большие: нет WebP/AVIF, нет srcset
• Элемент LCP рендерится через JS (React SSR не завершён к моменту LCP)

<!-- Prioritise the LCP image -->
<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
• Нет scheduler.yield() или setTimeout(0) для разбивки длинных задач
• Сторонние скрипты (чат, реклама, аналитика) занимают главный поток
• Анимации на JS вместо CSS transform/opacity

// Breaking up a Long Task with scheduler.yield()
async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    // Yield to the main thread every 50 items
    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
• Реклама без зарезервированного места (min-height у контейнера)

/* Reserve space for an ad slot */
.ad-container {
  min-height: 250px;
  width: 100%;
}

/* Animation without CLS: transform and opacity only */
.card:hover {
  transform: translateY(-4px);
  /* Wrong: margin-top: -4px — this shifts layout */
}

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

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

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

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

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

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

// web-vitals v4 — collect real CWV
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  // Send to GA4
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    metric_id: id,
    metric_delta: value,
  });
}

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

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

zoom_in

LCP

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

INP

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

CLS

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