Core Web Vitals: что это такое и как их починить

Core Web Vitals — три метрики, которыми поисковые системы измеряют, насколько сайтом комфортно пользоваться. Они влияют на ранжирование, но гораздо важнее их влияние на поведение: страница, которая тормозит и прыгает, теряет посетителей независимо от позиций.

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

Largest Contentful Paint показывает, за сколько отрисовался самый крупный элемент первого экрана: обычно баннер, заголовок или фото товара. Норма — до 2,5 секунды у 75% пользователей. Типичные причины плохого LCP: тяжёлое изображение без оптимизации, медленный ответ сервера (TTFB выше 600 мс), блокирующие CSS и шрифты. Что чинить в первую очередь: сжать и перевести героическое изображение в WebP, добавить preload для него, включить серверное кэширование. На типовом сайте это даёт минус 1–2 секунды.

INP — насколько сайт откликается на действия

Interaction to Next Paint измеряет задержку между кликом и видимой реакцией. Норма — до 200 мс. Плохой INP почти всегда означает, что главный поток занят JavaScript: аналитика, чат-виджеты, тяжёлые обработчики. Лечится отложенной загрузкой сторонних скриптов, разбиением длинных задач и удалением того, чем никто не пользуется. Подробное объяснение метрики есть на web.dev.

CLS — почему кнопка убегает из-под пальца

Cumulative Layout Shift измеряет смещения контента после начала отрисовки. Норма — ниже 0,1. Причины предсказуемы: изображения и iframe без указанных размеров, баннеры, которые вставляются сверху после загрузки, шрифты, меняющие высоту строки. Исправляется атрибутами width и height на всех медиа, зарезервированным местом под динамические блоки и font-display: swap с подходящим фолбэком.

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

• Лабораторные тесты (PageSpeed, Lighthouse) — для поиска причин и проверки гипотез
• Полевые данные (CrUX, Метрика) — для оценки реального положения дел и для ранжирования
• Ориентируйтесь на 75-й перцентиль, а не на среднее: среднее прячет проблемы у половины аудитории
• Замеряйте мобильные и десктопные отдельно — разница обычно двукратная

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

Мы обычно идём так: сначала изображения и шрифты (день работы, самый большой эффект на LCP и CLS), затем сторонние скрипты (полдня, эффект на INP), затем сервер и кэширование, и только потом — оптимизация бандла и рефакторинг. Обратный порядок — частая ошибка команд, которым интереснее заниматься кодом, чем картинками. Общая логика приоритизации описана в материале про скорость и продажи.

Чего Core Web Vitals не делают

Они не вытащат в топ страницу, которая не отвечает на запрос. Это фактор второго порядка: при прочих равных быстрый сайт выигрывает у медленного, но релевантность важнее. Если позиций нет вообще, сначала смотрите на причины из разбора про топ Яндекса, а метрики оптимизируйте параллельно.

Как держать метрики в норме дальше

• Проверять полевые данные раз в месяц — деградация приходит незаметно, с новым виджетом
• Ввести правило: любое новое изображение проходит через сжатие до загрузки
• Согласовывать подключение любого стороннего скрипта — каждый стоит десятки миллисекунд INP
• Замерять метрики до и после каждого релиза, а не раз в полгода

Если разбираться с метриками некому, это типовая задача для регулярного сопровождения — как мы её ведём, описано в разделе поддержки, а измерить текущее состояние можно самостоятельно в PageSpeed Insights.