Core Web Vitals в 2026: INP, LCP, CLS — что мерить и как чинить

Что такое Core Web Vitals

Core Web Vitals (CWV) — три метрики Google для оценки пользовательского опыта на сайте. Влияют на ранжирование в Google (официально подтверждено) и в Яндексе (частично — через ИКС).

Три метрики:

1. LCP (Largest Contentful Paint) — скорость загрузки самого крупного блока на экране
2. INP (Interaction to Next Paint) — отзывчивость интерфейса при клике/тапе
3. CLS (Cumulative Layout Shift) — стабильность вёрстки при загрузке

С марта 2024 года INP заменил FID (First Input Delay) — это критичное обновление, которое многие SEO-шники до сих пор не учли.

LCP — главная метрика загрузки

Норма: < 2.5 сек. Плохо: > 4.0 сек.

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

Главные причины плохого LCP:

• Незаоптимизированные изображения (без WebP, без lazy load)
• Render-blocking JavaScript
• Медленный TTFB (время ответа сервера > 600 мс)
• Шрифты без font-display: swap
• Нет CDN

Как чинить:

1. Изображения: WebP формат, размер < 200 КБ для hero, явные width/height
2. Шрифты: «font-display: swap» + preload критических
3. JS: defer/async для не-критичных скриптов
4. TTFB: кеширование, CDN, оптимизация бэкенда
5. CSS: критический CSS встроен, остальное defer

INP — метрика отзывчивости (заменила FID в 2024)

Норма: < 200 мс. Плохо: > 500 мс.

INP меряет, сколько времени проходит между кликом/тапом пользователя и визуальной реакцией интерфейса на это действие. Это «насколько шустро отзывается сайт».

Чем INP отличается от старого FID:

• FID мерил только первое взаимодействие
• INP меряет все взаимодействия за сессию (берёт 98-й перцентиль)
• INP строже — выявляет тормоза, которые FID игнорировал

Главные причины плохого INP:

• Тяжёлые event handlers (большие JS-функции на клик)
• Долгие main thread задачи (long tasks > 50 мс)
• Третий-party скрипты (Google Analytics, GTM, Я.Метрика, чаты)
• Большие React/Vue ре-рендеры

Как чинить:

1. Разбить тяжёлые JS-задачи на куски через requestIdleCallback
2. Web Workers для тяжёлых вычислений
3. Лениво загружать третий-party скрипты (особенно чаты и виджеты)
4. Оптимизировать React: memo, useCallback, виртуализация списков
5. Убрать ненужные слушатели событий

CLS — стабильность вёрстки

Норма: < 0.1. Плохо: > 0.25.

CLS меряет, насколько «прыгает» содержимое при загрузке. Когда вы пытаетесь нажать кнопку, а контент сдвинулся и вы попали по баннеру — это плохой CLS.

Главные причины плохого CLS:

• Изображения без width/height (резервируется место поздно)
• Шрифты, которые меняют размер после загрузки (FOUT/FOIT)
• Реклама/баннеры, появляющиеся в потоке контента
• Динамический контент, вставляющийся сверху

Как чинить:

1. Все изображения должны иметь явные width/height
2. Резервировать место под рекламу через CSS aspect-ratio
3. font-display: optional или preload критичных шрифтов
4. Не вставлять контент сверху уже загруженного

Где мерить

Lab-данные (синтетические тесты)

• PageSpeed Insights (pagespeed.web.dev) — главный инструмент
• Lighthouse в Chrome DevTools — для разработки
• WebPageTest — продвинутый анализ

Field-данные (реальные пользователи)

• CrUX Dashboard (cruxapi.com) — данные из реального Chrome
• Google Search Console → Core Web Vitals — данные по вашему сайту
• Я.Метрика → Качество страниц — местный аналог

Важно: Google ранжирует на основе field-данных, не lab. Сайт может иметь Lighthouse 95, но плохой CWV в реальности — и наоборот.

Норма по нишам

Из публичных бенчмарков (рунет, май 2026):

| Тип сайта | Норма LCP | Норма INP | Норма CLS | |---|---|---|---| | E-commerce | <2.0 сек | <150 мс | <0.05 | | Медиа/блоги | <2.5 сек | <200 мс | <0.1 | | SaaS / B2B | <3.0 сек | <300 мс | <0.1 | | Корпоративные | <3.5 сек | <300 мс | <0.15 |

Чек-лист

• [ ] Замерить текущие CWV через PageSpeed Insights
• [ ] Field-данные из Google Search Console
• [ ] Изображения: WebP + width/height + lazy
• [ ] Шрифты: font-display + preload
• [ ] JS: defer + разбивка тяжёлых задач
• [ ] Третий-party: ленивая загрузка
• [ ] Стабильная вёрстка: места под рекламу/баннеры

Итог

Core Web Vitals — обязательный гигиенический минимум SEO в 2026. Без них даже идеальный контент не получит максимума органики. INP, который заменил FID — основная зона работы для большинства сайтов.

Прогнать бесплатный SEO-аудит с проверкой CWV →