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

Core Web Vitals — три метрики, которыми поисковики оценивают, насколько сайт удобен по скорости и стабильности. Они влияют и на позиции, и на конверсию: медленная, дёргающаяся страница теряет посетителей ещё до того, как они дочитают оффер. Разберём LCP, INP и CLS — и что из этого чинить первым.

Три метрики и целевые значения

• LCP (Largest Contentful Paint) — когда отрисовался самый крупный элемент экрана. Цель: < 2,5 с.
• INP (Interaction to Next Paint) — задержка отклика на действия пользователя. Цель: < 200 мс. Заменил старый FID и спрашивает строже.
• CLS (Cumulative Layout Shift) — насколько «прыгает» вёрстка при загрузке. Цель: < 0,1.

Значения смотрят по 75-му перцентилю живых пользователей: хорошо должно быть у большинства, а не в идеальном лабораторном тесте.

LCP — ускоряем главный элемент

Обычно крупнейший элемент — это баннер героя, большое фото или заголовок первого экрана. Что замедляет LCP и как чинить:

• Тяжёлая картинка героя — пережать в WebP/AVIF, задать размеры, добавить fetchpriority="high".
• Высокий TTFB — серверный кэш и CDN, чтобы документ приходил быстрее.
• Шрифт блокирует текст — font-display: swap и preload основного шрифта.

INP — отзывчивость на действия

INP мерит, как быстро страница реагирует на клики и ввод. Виноват почти всегда тяжёлый JavaScript, который занимает главный поток:

• Разбейте длинные задачи, отложите некритичный JS (defer, динамический импорт).
• Уберите лишние сторонние скрипты — аналитику, чаты и A/B-виджеты грузите позже.
• Не вешайте тяжёлые обработчики на каждое движение мыши и скролл.

CLS — останавливаем прыгающую вёрстку

Layout прыгает, когда браузер не знает размеры элементов заранее и до-рисовывает их на ходу:

• Задавайте width и height (или aspect-ratio) картинкам и видео.
• Резервируйте место под баннеры и вставки, чтобы контент не скакал вниз.
• Подключайте шрифты так, чтобы подмена не сдвигала текст.

Что чинить первым

1. Сначала измерьте по живым данным. PageSpeed Insights (блок «Данные о реальных пользователях») и отчёты Яндекс Метрики важнее лабораторной оценки.
2. Возьмите метрику, что в красной зоне у большинства. Обычно это LCP — он и заметнее всего пользователю.
3. CLS — самый дешёвый быстрый выигрыш: часто хватает проставить размеры картинкам.
4. INP — самый трудоёмкий: требует разбираться с JS, оставьте на потом, если он в жёлтой зоне.

Инструменты: PageSpeed Insights и Search Console (динамика по группам страниц), Яндекс Метрика, DevTools → Performance для разбора конкретной задержки.

Вывод

Хорошие Core Web Vitals — это и место в выдаче, и меньше отказов: страница открывается быстро, отвечает мгновенно и не прыгает под пальцем. Двигайтесь по данным: измерьте, возьмите худшую метрику, начните с дешёвых побед по LCP и CLS. Если нужен предметный план и руки под задачу, оптимизируем скорость вашего сайта — от диагностики до внедрения CDN и кэша.