Core Web Vitals 2026: LCP, INP и CLS — полный чек-лист перед запуском
INP заменил FID в марте 2024. В 2026 году только 63% мобильных сайтов проходят LCP и 62% — INP. Разбираем пороги, типичные ошибки и конкретные исправления для каждой метрики.
В марте 2024 Google заменил First Input Delay (FID) на Interaction to Next Paint (INP) — и многие сайты, которые «проходили» CWV раньше, теперь в «Needs Improvement». По данным 2026 года, только 63% мобильных страниц проходят LCP и 62% — INP. Это значит, что у трети сайтов есть конкретный сигнал к оптимизации.
- Core Web Vitals
- Три метрики Google, измеряющие реальный пользовательский опыт: скорость загрузки (LCP), отзывчивость (INP) и визуальную стабильность (CLS). Оцениваются по данным реальных пользователей на 75-м перцентиле.
Пороговые значения 2026: таблица
| Метрика | Хорошо | Требует улучшения | Плохо | Что измеряет |
|---|---|---|---|---|
| LCP | ≤ 2.5 с | 2.5–4.0 с | > 4.0 с | Время отрисовки крупнейшего видимого элемента |
| INP | ≤ 200 мс | 200–500 мс | > 500 мс | Задержка худшего взаимодействия за сессию |
| CLS | ≤ 0.1 | 0.1–0.25 | > 0.25 | Совокупный сдвиг макета при загрузке |
| TTFB (диагн.) | ≤ 800 мс | 800 мс–1.8 с | > 1.8 с | Время ответа сервера (диагностическая метрика) |
| FCP (диагн.) | ≤ 1.8 с | 1.8–3.0 с | > 3.0 с | Первая отрисовка любого контента DOM |
LCP: время отрисовки главного элемента
LCP (Largest Contentful Paint) — время до отрисовки крупнейшего видимого элемента: обычно hero-изображение, заголовок или видео. Именно с LCP нужно начинать оптимизацию, потому что он напрямую зависит от TTFB сервера.
- 1
Проверьте TTFB
Если TTFB >800 мс — проблема на сервере (хостинг, CDN, кэш). Никакая фронтенд-оптимизация не поможет, пока сервер медленно отвечает.
- 2
Найдите LCP-элемент
Откройте PageSpeed Insights, в разделе Diagnostics найдите 'LCP element'. Обычно это hero-изображение первого экрана.
- 3
Предзагрузите LCP-изображение
Добавьте <link rel="preload" as="image"> в <head> для hero-изображения. Не используйте lazy loading на LCP-элементе — это критическая ошибка.
- 4
Оптимизируйте формат
Используйте WebP или AVIF вместо JPEG/PNG. AVIF даёт 40–60% экономию размера при том же качестве. Задайте width/height явно.
- 5
Настройте CDN
Статика должна отдаваться с CDN-ноды ближайшей к пользователю. Cloudflare Free tier достаточен для большинства сайтов.
<!-- Правильная преднагрузка LCP-изображения -->
<link
rel="preload"
as="image"
href="/hero.webp"
imagesizes="100vw"
imagesrcset="/hero-480.webp 480w, /hero-1200.webp 1200w"
/>
<!-- Само изображение: никакого lazy loading -->
<img
src="/hero.webp"
alt="Описание"
width="1200"
height="750"
loading="eager"
fetchpriority="high"
decoding="async"
/>INP: отзывчивость на взаимодействие
INP (Interaction to Next Paint) — новый стандарт с марта 2024. В отличие от FID, он измеряет не первое взаимодействие, а худшее за всю сессию. Это важно: форма, которая зависает при вводе — убивает INP, даже если первый клик был мгновенным.
- Разбивайте длинные задачи (>50 мс) через yield с помощью scheduler.yield() или setTimeout
- Переносите тяжёлые вычисления в Web Workers
- Минимизируйте JavaScript в критическом пути: code splitting, lazy import
- Используйте React 18+ с concurrent features — они уменьшают INP на интерактивных страницах
- Не блокируйте main thread сторонними скриптами (аналитика, чаты) — загружайте их async
CLS: визуальная стабильность
CLS (Cumulative Layout Shift) — сумма неожиданных сдвигов макета при загрузке. Типичная причина плохого CLS: изображения без указанных размеров, шрифты без font-display, рекламные блоки без зарезервированного пространства.
Как зафиксировать CLS
- width/height на всех изображениях или aspect-ratio в CSS
- font-display: optional или swap с метрическим фоллбэком
- Зарезервированное место для рекламных блоков (min-height)
- Избегать вставки контента выше fold после загрузки
Типичные источники CLS
- Изображения без width/height — сдвигают контент при загрузке
- Шрифты без font-display — FOUT и CLS при смене фонта
- Динамический контент (баннеры, уведомления) над fold
- Встроенные iframe без явной высоты
/* Резервирование места для изображений */
.hero-image {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
/* Шрифты: метрический фоллбэк убирает CLS при swap */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: optional; /* Лучший вариант для CLS */
}Чек-лист перед запуском сайта
| Проверка | Метрика | Инструмент |
|---|---|---|
| TTFB < 800 мс | LCP | PageSpeed Insights |
| LCP-элемент preloaded, без lazy | LCP | DevTools > Performance |
| Изображения в WebP/AVIF | LCP | ImageOptim / Squoosh |
| width/height на всех img | CLS | HTML-аудит |
| font-display: optional/swap | CLS | CSS-аудит |
| Нет длинных задач >50 мс при кликах | INP | DevTools > Performance > Interactions |
| Сторонние скрипты загружаются async | INP | Network waterfall |
| CDN настроен для статики | LCP | WebPageTest |
| Проверка на реальном Android (не эмуляторе) | INP, CLS | Chrome DevTools Remote |
63%
Мобильных страниц проходят LCP «хорошо»
62%
Мобильных страниц проходят INP «хорошо»
7%
Потеря конверсии при +1 с задержки LCP
“Измеряйте CWV на реальных пользователях, а не на своём MacBook с оптоволокном.”
Итог
Core Web Vitals — не магическая кнопка SEO, но реальный сигнал качества пользовательского опыта. Сайт, который загружается за 1.5 секунды и мгновенно отвечает на клик, не просто лучше ранжируется — он конвертирует лучше. Каждая секунда задержки LCP стоит 7% конверсии. Начните с аудита TTFB и LCP-элемента — это даёт 80% эффекта при 20% усилий.
Частые вопросы
- Чем отличается INP от старого FID?
- FID (First Input Delay) измерял только задержку первого взаимодействия на странице. INP (Interaction to Next Paint) измеряет худшую задержку за всё время сессии. Это важно: страница может быстро реагировать на первый клик, но тормозить на третьем — FID это не показывал, INP показывает.
- Lighthouse показывает 95, но в Search Console — 'Requires improvement'. Почему?
- Lighthouse — лабораторные данные на вашей машине. CrUX — реальные пользователи с разными девайсами и соединениями. Оценка в Search Console основана на CrUX на 75-м перцентиле. 75% реальных посетителей должны получить 'хорошо' — не один тест на MacBook с оптоволокном.
- Влияют ли CWV на позиции в Google?
- Да, но Google явно говорит: релевантность важнее Page Experience. CWV — тай-брейкер при равном качестве контента. Инвестируйте в CWV, когда контент и ссылочная масса уже отработаны.
- С чего начать оптимизацию?
- Шаг 1: проверить TTFB в PageSpeed Insights. Если >800 мс — исправлять сервер (хостинг, CDN, кэш) до любой фронтенд-оптимизации. Шаг 2: найти LCP-элемент (обычно hero-изображение) и убедиться, что он preload'ится. Шаг 3: проверить CLS — зарезервировать размеры всех изображений через width/height или aspect-ratio.
Читайте также
Источники
Статья была полезной?
Команда Code Sys Lab
Веб-студия
Строим сайты с PageSpeed 95+ с первого дня. Разбираем CWV не по статьям, а по реальным аудитам клиентских проектов.
// Блог
Ещё статьи
Next.js vs WordPress в 2026: честное сравнение для бизнеса
WordPress держит 43% всего интернета, Next.js бьёт по PageSpeed и безопасности. Разбираем, когда платить больше за Next.js оправдано, а когда WordPress — правильный выбор.
Сколько стоит разработка сайта в 2026: разбор цен по форматам
Цены выросли на 30–50% за три года. Разбираем честные диапазоны по лендингам, корпоративным сайтам, магазинам и веб-приложениям — с объяснением, из чего складывается бюджет.
Лендинг или корпоративный сайт: как выбрать под задачу
Лендинги конвертируют 6.6% против 2.35% у корпоративных сайтов — но это не значит, что лендинг всегда лучше. Разбираем, когда что работает и почему неправильный выбор стоит заявок.