Core Web Vitals: LCP, INP и CLS — что это и как улучшить
5 мин чтения Обновлено:
Core Web Vitals: LCP, INP и CLS — что это и как улучшить

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-му перцентилю: чтобы страница прошла проверку, хорошие показатели должны быть у трёх четвертей визитов. Поэтому быстрый ноутбук разработчика ничего не доказывает — решают телефоны посетителей на медленных сетях.

Что случилось с FID

Метрика 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, и цифры сопоставимы. Разница в том, что разовый прогон показывает состояние «сейчас», а проверка по расписанию хранит историю замеров и сама сообщает, когда балл упал ниже порога, — момент деградации не приходится ловить вручную.

Была ли статья полезна?

Начните мониторинг прямо сейчас

Бесплатный тариф — до 5 проверок. 150 ₽ на баланс при регистрации.

Создать аккаунт