Core Web Vitals: LCP, INP и CLS — что это и как улучшить
Core Web Vitals — набор из трёх метрик, которыми Google измеряет удобство страницы для посетителя: скорость загрузки, отзывчивость и визуальную стабильность. Разбираем, что означает каждая, какие значения считаются хорошими и что конкретно чинить, если метрика в красной зоне.
Три метрики и их пороги
Каждая метрика отвечает за свой этап знакомства человека со страницей: успела ли она показаться, реагирует ли на нажатия и не прыгает ли содержимое под пальцем.
| Метрика | Что измеряет | Хорошо | Плохо |
|---|---|---|---|
| LCP Largest Contentful Paint |
Время отрисовки самого крупного элемента экрана — обычно баннера или заголовка | до 2,5 с | больше 4 с |
| INP Interaction to Next Paint |
Задержку отклика на действия посетителя за весь визит | до 200 мс | больше 500 мс |
| CLS Cumulative Layout Shift |
Насколько содержимое смещается во время загрузки | до 0,1 | больше 0,25 |
Промежуток между «хорошо» и «плохо» — зона, требующая улучшения. Оценка ставится не по среднему значению, а по 75-му перцентилю: чтобы страница прошла проверку, хорошие показатели должны быть у трёх четвертей визитов. Поэтому быстрый ноутбук разработчика ничего не доказывает — решают телефоны посетителей на медленных сетях.
Метрика First Input Delay ушла из набора в марте 2024 года, её место занял INP. Разница принципиальная: FID оценивал задержку только первого нажатия, INP смотрит на все взаимодействия за визит и потому строже. Если вы работаете по старой инструкции с FID — она устарела.
Где посмотреть свои значения
Данные бывают двух видов, и путать их не стоит. Лабораторные получают синтетическим прогоном страницы в браузере при заданных условиях — так работает PageSpeed Insights в режиме анализа и вкладка Lighthouse в инструментах разработчика. Они удобны для отладки, потому что сразу показывают, какой именно элемент тормозит.
Полевые данные собираются с реальных посетителей Chrome и хранятся в отчёте CrUX. Их видно в верхней части того же PageSpeed Insights и в Search Console в разделе Core Web Vitals. Именно эти цифры участвуют в оценке страницы, поэтому итог сверяйте по ним, а не по лабораторному прогону.
Как улучшить каждую метрику
LCP. Начните с времени ответа сервера: если TTFB составляет секунду, уложиться в 2,5 секунды уже невозможно. Дальше — работа с главным изображением экрана: современный формат вроде WebP, правильный размер под устройство, загрузка без ожидания скриптов и предзагрузка через preload. Уберите из критического пути блокирующие CSS и JS, подключите кэширование и CDN.
INP. Метрика упирается в JavaScript: пока главный поток занят длинной задачей, страница не отвечает на нажатия. Разбивайте тяжёлые вычисления на части, откладывайте всё некритичное, выносите расчёты в Web Worker. Отдельная частая причина — обилие сторонних скриптов: виджеты чатов, счётчики и рекламные вставки суммарно съедают отзывчивость сильнее собственного кода сайта.
CLS. Смещения возникают, когда браузер не знает размеров элемента заранее. Указывайте ширину и высоту у картинок и фреймов, резервируйте место под баннеры и блоки, подгружаемые скриптами, подключайте шрифты с font-display: swap и не вставляйте новые элементы над уже прочитанным текстом.
Core Web Vitals — фактор ранжирования Google, но слабый: он помогает выбрать между страницами сопоставимого качества и не поднимает слабой контент. У Яндекса собственные метрики удобства, и набор Google в них не входит. Оптимизируйте скорость ради конверсии и отказов, а рост позиций считайте приятным дополнением.
Почему метрики уезжают обратно
Разовая оптимизация не держится. Маркетологи добавляют новый пиксель, редакторы заливают тяжёлое изображение в баннер, хостинг незаметно замедляется под нагрузкой — и через два месяца зелёные показатели снова жёлтые. Полевые данные показывают это с задержкой в недели, потому что копятся по окну наблюдений.
Раньше всего деградацию выдаёт время ответа сервера — базовый вклад в LCP, который можно измерять постоянно и внешним инструментом.
Как следить за Core Web Vitals автоматически
Единственный способ не дать метрикам тихо уехать — замерять их регулярно, а не когда вспомнили. В Пруфене для этого есть отдельная проверка «Скорость страницы»: по расписанию она прогоняет страницу через Google PageSpeed и складывает результаты в историю.
Каждый замер — лабораторный прогон Lighthouse: балл Performance от 0 до 100, LCP, CLS и TBT (INP в лаборатории измерить нельзя — его роль играет Total Blocking Time), а также FCP, Speed Index, TTFB и рекомендации Google с оценкой выигрыша в секундах и килобайтах. Мобильная и десктопная версии проверяются отдельно: Google замеряет их по разным профилям сети и процессора, поэтому сравнивать эти оценки между собой нельзя.
Главное отличие от разового прогона — порог и уведомления. Вы задаёте минимальный Performance score, например 50: как только замер опускается ниже, открывается инцидент и уходит уведомление — на Email, в Telegram, Макс или звонком. Есть и отдельное уведомление о заметной просадке балла без пробития порога — тот случай, когда новый виджет чата съел десять баллов, но формально «ещё терпимо». А по истории замеров видно, после какого дня балл просел, и легко сопоставить это с релизом или новым скриптом.
Интервал — от 12 часов до недели, один замер стоит 4 ₽. Типовой конфигурации — мобильный и десктопный замер главной страницы раз в день — достаточно, чтобы деградация не копилась неделями незаметно.
Пруфен следит за скоростью с двух сторон: время ответа измеряется при каждой проверке доступности — с интервалом от 2 минут из 13 точек, включая 11 в России, — а проверка «Скорость страницы» по расписанию замеряет балл PageSpeed и Core Web Vitals и предупреждает о просадке. Есть и комплексная SEO-проверка страницы. Бесплатно доступны 5 проверок без ограничения по времени.
Частые вопросы
Почему PageSpeed Insights показывает 95 баллов, а метрики красные? Балл — это лабораторный прогон в идеальных условиях, а красная зона берётся из полевых данных живых посетителей. Расхождение как раз и означает, что у реальных людей телефоны и сети медленнее вашего тестового окружения.
Обязательно ли добиваться зелёной зоны по всем трём? Нет. Разумнее вытащить самую провальную метрику до приемлемых значений, чем полировать ту, что уже в норме. Идеальные цифры не окупают недели работы, если контент и предложение слабее, чем у конкурентов.
Сколько ждать после исправлений? В лабораторном прогоне результат виден сразу, в полевых данных — обычно несколько недель: отчёт CrUX усредняет показатели по скользящему окну наблюдений.
Влияет ли хостинг на Core Web Vitals? Влияет через LCP: медленный или перегруженный сервер задаёт высокий TTFB, поверх которого никакая оптимизация картинок не спасёт. Если сайт стабильно отвечает дольше секунды, начинать нужно с инфраструктуры.
Чем регулярная проверка отличается от разового прогона PageSpeed Insights? Ядро одно — Lighthouse, и цифры сопоставимы. Разница в том, что разовый прогон показывает состояние «сейчас», а проверка по расписанию хранит историю замеров и сама сообщает, когда балл упал ниже порога, — момент деградации не приходится ловить вручную.