Core Web Vitals — это три метрики, которыми Google (и во многом Яндекс) измеряет реальный пользовательский опыт загрузки страницы. Это не синтетический балл из аудита, а агрегированные данные из браузеров реальных посетителей. Разберём каждую метрику и конкретные шаги, которые на неё влияют.
LCP — Largest Contentful Paint
LCP измеряет, через сколько секунд после начала загрузки отрисовывается самый крупный видимый элемент — обычно это герой-изображение, заголовок или блок с текстом. Норма — до 2,5 секунд.
Что чаще всего ломает LCP:
- изображение героя без
priority/preload — браузер обнаруживает его слишком поздно, уже после разбора остального CSS/JS; - шрифты, блокирующие рендер текста (нет
font-display: swapили предзагрузки шрифта); - медленный ответ сервера (TTFB) — если сервер отвечает 800 мс, LCP физически не может уложиться в 2,5 секунды.
Практическое решение: для главного изображения экрана явно указывайте приоритетную загрузку (в Next.js — атрибут priority у next/image), а для шрифтов — font-display: swap и предзагрузку критичных начертаний.
INP — Interaction to Next Paint
INP заменил устаревший FID и измеряет отзывчивость интерфейса на протяжении всего визита, а не только на первый клик. Норма — до 200 мс. Метрика фиксирует самое медленное значимое взаимодействие: клик по кнопке, открытие меню, ввод текста в поле.
Главная причина плохого INP — тяжёлый JavaScript, который блокирует главный поток во время взаимодействия. Решения:
- разбивать длинные задачи на части (code splitting, ленивая загрузка некритичных компонентов);
- избегать синхронных тяжёлых вычислений в обработчиках кликов — выносить их в
requestIdleCallbackили дебounсить; - уменьшать объём стороннего JS — виджеты чатов, аналитика и трекеры пикселей нередко дают больший вклад в INP, чем весь остальной сайт.
CLS — Cumulative Layout Shift
CLS измеряет, насколько сильно «прыгает» вёрстка во время загрузки — например, когда текст сдвигается вниз после того, как подгрузилась реклама или изображение без заданных размеров. Норма — до 0,1.
Решается почти всегда одним и тем же способом: явно резервировать место под элементы, которые появляются асинхронно — задавать width/height (или aspect-ratio) для изображений и видео заранее, а не после загрузки, и резервировать высоту под баннеры и виджеты до их фактической подгрузки.
Как измерять правильно
Лабораторные инструменты (Lighthouse, PageSpeed Insights в режиме симуляции) дают воспроизводимый, но не всегда репрезентативный результат. Для реальной картины смотрите полевые данные — отчёт Core Web Vitals в Google Search Console или CrUX-дашборд, где агрегированы данные реальных посетителей за 28 дней. Именно эти цифры влияют на ранжирование, а не разовый замер на одном устройстве.
Итог
Core Web Vitals — это не разовая оптимизация, а следствие архитектурных решений: как загружаются шрифты и изображения, сколько стороннего JS подключено, как сервер отвечает на первый запрос. Если хотите получить конкретный список технических исправлений под ваш сайт — закажите аудит производительности.