Core Web Vitals: LCP, INP и CLS без мифов

Что на самом деле измеряют три метрики Google, почему лабораторные цифры расходятся с полевыми и какие исправления дают заметный прирост.

Производительность · Опубликовано: 18 августа 2026 г. · Обновлено: 26 августа 2026 г. · 3 мин чтения · Анна Ковалёва

Core Web Vitals — это три числа, за которыми Google следит на реальных пользователях. Их часто путают с «оценкой Lighthouse», хотя это разные вещи: Lighthouse показывает лабораторный прогон в стерильных условиях, а Vitals собираются из поля, у людей с медленным 4G и телефонами трёхлетней давности.

LCP — когда пользователь видит главное

Largest Contentful Paint фиксирует момент отрисовки самого крупного элемента в области просмотра: обычно это баннер, обложка статьи или заголовок H1. Порог — 2,5 секунды на 75-м перцентиле.

Типичные причины медленного LCP, в порядке частоты:

1. Картинка героя грузится не первой. Помогает fetchpriority="high" на LCP-изображении и preload для шрифта заголовка.
2. Медленный ответ сервера. Если TTFB больше 600 мс, оптимизировать фронтенд бессмысленно — сначала кэш и база.
3. Блокирующий CSS. Один @import внутри внешнего файла добавляет целый круг сетевого обмена.
4. Клиентский рендеринг. Если LCP-элемент появляется только после гидратации, к нему добавляется время загрузки и парсинга JS.

INP — цена интерактивности

Interaction to Next Paint заменил FID в 2024 году и оказался куда строже. INP берёт не первое взаимодействие, а практически худшее за сессию: от нажатия до следующей отрисовки. Порог — 200 мс.

Главный виновник — длинные задачи в основном потоке. Обработчик, который синхронно пересчитывает корзину, фильтрует список из 5 000 элементов или дёргает getBoundingClientRect в цикле, легко занимает поток на 400 мс. Лечится тремя приёмами: разбить работу через scheduler.yield(), снять с критического пути аналитику и сторонние скрипты, а тяжёлые вычисления вынести в Web Worker.

CLS — вёрстка, которая не прыгает

Cumulative Layout Shift суммирует незапланированные сдвиги контента. Порог — 0,1. Причины почти всегда одни и те же:

• изображения и iframe без width/height или aspect-ratio;
• баннеры и cookie-панели, которые вставляются в поток после загрузки;
• веб-шрифты без font-display: optional или без метрик fallback-шрифта.

Лаборатория против поля

Лабораторный прогон детерминирован и хорош для регрессий в CI. Полевые данные (CrUX, ваш собственный RUM) показывают реальность, но с задержкой в 28 дней. Рабочая схема — измерять оба источника и расследовать только те лабораторные регрессии, которые подтверждаются полем.

Порядок работ, который окупается

Сначала измерьте распределение, а не среднее: p75 и p95 по типам страниц. Затем найдите один шаблон с худшими показателями — обычно это карточка товара или страница поиска — и почините его целиком. Правки, размазанные по всему сайту, почти никогда не сдвигают p75.

И проверяйте результат на устройстве, а не на своём ноутбуке: разница между MacBook и бюджетным Android по INP достигает пяти раз.