Core Web Vitals прямо влияют на ранжирование и косвенно — на конверсию. Каждые 100 мс задержки LCP стоят 1–3% конверсии в e-commerce. Разберём, что измерять, и какие техники в 2026 году дают наибольший эффект.
Что измерять
Три ключевые метрики:
- LCP (Largest Contentful Paint) — должен быть < 2.5 с на 75-м перцентиле.
- INP (Interaction to Next Paint) — заменил FID, должен быть < 200 мс.
- CLS (Cumulative Layout Shift) — < 0.1.
Источники данных: PageSpeed Insights, Search Console (поле «Основные интернет-показатели»), Yandex Metrika (Веб-витали), Lighthouse в DevTools. Доверять стоит полевым данным (CrUX), а не лабораторным — лабораторные показывают потенциал, полевые показывают реальность.
Чек-лист по LCP
LCP обычно ломают тяжёлая первая картинка, медленный TTFB и блокирующий рендер CSS/JS.
- Hero-изображение — AVIF или WebP, с
<link rel="preload">иfetchpriority="high". - Шрифты —
font-display: swap, локальный self-host, subsetting по используемым символам. - TTFB — кэш на nginx или CDN, SSG/ISR в Next.js, ленивая загрузка тяжёлых API.
- Критический CSS — инлайнить выше fold, остальное — асинхронно.
Чек-лист по INP
INP измеряет, насколько быстро страница реагирует на любой клик/тап. Ломают его тяжёлые обработчики, синхронный код в реакции на события, неоптимальный hydration.
- Разнесите тяжёлую логику через
requestIdleCallbackилиscheduler.postTask. - В React используйте
useTransitionдля некритичных обновлений. - Минимизируйте размер JS-бандла — code-splitting по маршрутам, динамический импорт модальных окон и виджетов.
- Сторонние скрипты (чаты, аналитика) грузите после полного интерактива через Partytown или вручную с задержкой.
Чек-лист по CLS
CLS — самая «дешёвая» метрика: фиксы редко занимают больше дня.
- На каждом
<img>и<video>— атрибутыwidthиheightилиaspect-ratioв CSS. - Резервируйте место под рекламу, баннеры согласия и поздно загружаемые виджеты.
- Не вставляйте контент сверху уже отрендеренного — только снизу.
- Шрифты с
font-display: swapмогут сдвигать текст — используйтеsize-adjustили fallback-фонты с подобранными метриками.
Что особенно работает в 2026
- Next.js App Router с streaming и partial prerendering — убирает ожидание медленных запросов из критического пути.
- Image CDN (Yandex Cloud CDN, Selectel CDN, Cloudflare) — раздаёт картинки с близких к пользователю узлов.
- HTTP/3 на nginx — снижает RTT на мобильных сетях.
- Brotli для статики — сжатие на 15–25% лучше gzip.
Что измерить через неделю
После каждой оптимизации сравнивайте p75 по полевым данным минимум через 7 дней. CrUX обновляется с задержкой. Лабораторные тесты показывают только направление.
Что в сухом остатке
LCP лечится оптимизацией картинок и кэшированием. INP — снижением JS на главном потоке и грамотным разделением кода. CLS — резервированием места под динамический контент. Все три метрики — это про отказ от лишних килобайтов, а не про магические настройки. Хороший проект на Next.js + nginx + CDN держит p75 < 2 с без героических усилий.
Частые вопросы
Какие метрики Core Web Vitals важны в 2026 году?
Три ключевые. LCP (Largest Contentful Paint) — должен быть менее 2.5 с на 75-м перцентиле. INP (Interaction to Next Paint) — заменил FID, должен быть менее 200 мс. CLS (Cumulative Layout Shift) — менее 0.1. Источники данных: PageSpeed Insights, Search Console (поле «Основные интернет-показатели»), Yandex Metrika (Веб-витали), Lighthouse в DevTools. Доверять стоит полевым данным (CrUX), а не лабораторным — лабораторные показывают потенциал, полевые показывают реальность.
Как улучшить LCP на сайте?
LCP обычно ломают тяжёлая первая картинка, медленный TTFB и блокирующий рендер CSS/JS. Hero-изображение — AVIF или WebP, с link rel="preload" и fetchpriority="high". Шрифты — font-display: swap, локальный self-host, subsetting по используемым символам. TTFB — кэш на nginx или CDN, SSG/ISR в Next.js, ленивая загрузка тяжёлых API. Критический CSS — инлайнить выше fold, остальное асинхронно. Каждые 100 мс задержки LCP стоят 1–3% конверсии в e-commerce.
Как улучшить INP на сайте?
INP измеряет, насколько быстро страница реагирует на любой клик/тап. Ломают его тяжёлые обработчики, синхронный код в реакции на события, неоптимальный hydration. Разнесите тяжёлую логику через requestIdleCallback или scheduler.postTask. В React используйте useTransition для некритичных обновлений. Минимизируйте размер JS-бандла — code-splitting по маршрутам, динамический импорт модальных окон и виджетов. Сторонние скрипты (чаты, аналитика) грузите после полного интерактива через Partytown или вручную с задержкой.
Как уменьшить CLS на сайте?
CLS — самая «дешёвая» метрика: фиксы редко занимают больше дня. На каждом img и video — атрибуты width и height или aspect-ratio в CSS. Резервируйте место под рекламу, баннеры согласия и поздно загружаемые виджеты. Не вставляйте контент сверху уже отрендеренного — только снизу. Шрифты с font-display: swap могут сдвигать текст — используйте size-adjust или fallback-фонты с подобранными метриками. Один день работы ловит большинство проблем CLS.
Какие технологии в 2026 особенно помогают с производительностью?
Next.js App Router со streaming и partial prerendering — убирает ожидание медленных запросов из критического пути. Image CDN (Yandex Cloud CDN, Selectel CDN, Cloudflare) — раздаёт картинки с близких к пользователю узлов. HTTP/3 на nginx — снижает RTT на мобильных сетях. Brotli для статики — сжатие на 15–25% лучше gzip. Эти четыре технологии вместе могут дать 30–50% улучшения по всем трём метрикам без изменения кода приложения.
Когда измерять результаты оптимизации Core Web Vitals?
После каждой оптимизации сравнивайте p75 по полевым данным минимум через 7 дней. CrUX обновляется с задержкой и нужно собрать достаточный объём посещений на 75-м перцентиле. Лабораторные тесты (Lighthouse, PageSpeed) показывают только направление и идеальные условия. Полевые данные (Search Console, Yandex Metrika с Веб-витали) показывают реальные результаты пользователей на разных устройствах и в разных сетях. Оптимизировать без полевого замера — это оптимизировать на удачу.