MM.Digital · Сопровождение · Диагностика · Кейсы · Журнал
Core Web Vitals без погони за сотней: LCP, INP и CLS
Что измеряют Core Web Vitals, где брать полевые данные и в каком порядке исправлять LCP, INP и CLS.
Оценка 100 в PageSpeed — приятная картинка, но не цель бизнеса. Начинаем с того, что чувствует реальный посетитель: когда появляется главное, как быстро страница отвечает на действие и не уезжает ли кнопка из-под пальца.
Три показателя, три разных поломки
LCP — загрузка.
Когда в области просмотра появился самый крупный значимый элемент: обычно заголовок, изображение или большой текстовый блок.
INP — отзывчивость.
Сколько времени проходит между действием человека и следующим визуальным обновлением страницы.
CLS — стабильность.
Насколько сильно элементы неожиданно смещаются во время загрузки.
Полевые данные — реальность.
Собираются на посещениях пользователей и зависят от устройств, сети и конкретных страниц.
INP заменил FID в наборе Core Web Vitals в 2024 году. Разница существенная: FID смотрел в основном на задержку первого взаимодействия, а INP оценивает отзывчивость на протяжении визита. Тяжёлый фильтр каталога или форма, которая подвисает на третьем шаге, теперь не прячутся за быстрым первым кликом.
Сначала сценарий, потом число
Открываем отчёт и видим красную группу URL. Первое искушение — поручить разработчику «сделать зелёным». Но одинаковый показатель может иметь разную цену. Задержка в статье раздражает; такая же задержка при добавлении товара в корзину теряет деньги.
Поэтому перед техническим разбором отмечаем важные действия: открытие меню, выбор варианта товара, применение фильтра, расчёт, отправку формы. Затем связываем проблему со страницей и устройством. На мобильном слабый процессор часто показывает то, что мощный ноутбук скрывает.
Где брать данные
Полевые данные
Chrome UX Report отражает опыт реальных пользователей Chrome, если для страницы или группы URL хватает данных. Они доступны в PageSpeed Insights и отчёте Core Web Vitals в Search Console. Это скользящее окно, поэтому исправление не станет зелёным на следующий день.
Лабораторная проверка
Lighthouse и панель Performance помогают воспроизвести проблему и увидеть причину: долгую задачу JavaScript, блокирующий ресурс, лишний шрифт или изображение без размеров. Лаборатория отвечает на вопрос «почему», а поле — «как часто это происходит у посетителей».
Важная оговоркаЕсли у небольшой страницы нет полевых данных, это не означает, что она быстрая или медленная. Данных просто недостаточно. Тогда опираемся на собственный мониторинг и лабораторные замеры на реалистичном устройстве.
Что обычно портит LCP
- Главное изображение загружается поздно или спрятано за CSS-фоном.
- Сервер долго формирует HTML, а кеширование не настроено.
- Шрифты и стили блокируют показ первого экрана.
- Крупный элемент появляется только после выполнения клиентского JavaScript.
Начинаем с цепочки запроса: сервер, HTML, ресурс LCP, декодирование, отрисовка. Иногда сжатие картинки даёт меньше, чем раннее обнаружение ресурса или отказ от лишнего клиентского рендера.
Что обычно портит INP
Главный подозреваемый — длинная задача в основном потоке. Пока браузер считает, сортирует большой массив или запускает несколько виджетов, он не может сразу показать реакцию на нажатие. Полезно разделять работу на части, откладывать необязательное и не перерисовывать половину приложения ради одной галочки.
У формы есть простой тест: после нажатия человек должен мгновенно понять, что действие принято. Даже если сетевой ответ придёт позже, кнопка может перейти в состояние загрузки, а поле — сохранить введённое.
Что обычно портит CLS
Чаще всего виноваты изображения и встраиваемые блоки без зарезервированных размеров, поздний баннер над контентом и подмена шрифта с другой метрикой. Задаём размеры заранее, показываем уведомления поверх или в предусмотренном месте и осторожно меняем содержимое над текущей областью просмотра.
Порядок работ без суеты
- Выбрать критичные шаблоны и действия, а не проверять только главную.
- Снять полевые показатели по устройствам и группам URL.
- Воспроизвести худший сценарий в лаборатории.
- Исправить одну причину и записать изменение.
- Проверить, не сломались ли функция, доступность и аналитика.
- Наблюдать полевые данные и бизнес-события после выпуска.
Источники и инструменты
Обсудить задачу