Core Web Vitals интернет-магазина: что измерять и как читать отчёты
LCP, INP и CLS, полевые и лабораторные данные, проверка шаблонов и устройств. Как поставить разработчику проверяемую задачу по скорости.
Core Web Vitals — показатели того, как быстро появляется основной контент, насколько отзывчивы действия и не сдвигается ли страница неожиданно. Для магазина они помогают отличить медленное главное фото от задержки фильтра или прыгающей кнопки покупки. Общая оценка скорости не объясняет, какая из этих проблем мешает посетителю.
Начинайте с реального опыта и конкретного шаблона страницы. Категория может быстро открываться, но тормозить при выборе фильтра; карточка — показывать текст сразу и долго ждать главное изображение.
Что означают LCP, INP и CLS
LCP, Largest Contentful Paint, измеряет время появления крупнейшего подходящего элемента в видимой области. На карточке им часто становится главное фото, но это нужно проверить в инструменте: иногда крупнейшим оказывается текст или баннер.
INP, Interaction to Next Paint, описывает задержку отклика на взаимодействия. Посетитель нажимает размер или фильтр, а интерфейс отвечает с опозданием. Это другой симптом, даже если начальная загрузка выглядит быстрой.
CLS, Cumulative Layout Shift, характеризует неожиданные сдвиги макета. Например, после появления блока доставки кнопка уезжает из-под пальца. Показатель безразмерный; уменьшение размера файлов само по себе не гарантирует его улучшение.
| Показатель | Хорошее значение | Где искать причину в магазине |
|---|---|---|
| LCP | Не более 2,5 с | Сервер, обнаружение и загрузка главного ресурса, его отрисовка |
| INP | Не более 200 мс | Долгая работа JavaScript при выборе варианта, фильтра или корзины |
| CLS | Не более 0,1 | Фото без зарезервированного места, поздние баннеры и вставки |
Ориентиры применяют к 75-му процентилю посещений, с разделением мобильных и настольных устройств. Если LCP на этой границе равен 2,5 с, не менее трёх четвертей измеренных посещений укладываются в неё. Среднее арифметическое не заменяет эту оценку.
Почему два отчёта показывают разное
Полевые данные собираются у реальных пользователей с разными устройствами, сетями и действиями. Лабораторный тест воспроизводит ограниченные условия и помогает найти причину. Оба вида нужны, но отвечают на разные вопросы.
В PageSpeed Insights различайте блок реального опыта и диагностический запуск Lighthouse. Полевые данные CrUX используют скользящее окно в 28 дней; после исправления они не обновятся целиком за один запуск. Кроме того, при нехватке данных инструмент может показать сведения по всему origin, то есть сайту с данным протоколом и доменом, вместо конкретного URL.
Проверьте подпись охвата прежде, чем сравнивать цифры. Нельзя объявить карточку исправленной по хорошему результату домена или принять отсутствие полевых данных за отсутствие проблемы. Для небольшого магазина лабораторные замеры и тесты реальных действий остаются полезны, но не становятся полевой статистикой.
Лабораторный показатель блокировки основного потока помогает искать причины задержек, однако не равен INP. Обычный запуск без ваших взаимодействий не воспроизводит полный путь выбора товара.
Как составить выборку страниц
Разделите магазин на шаблоны: главная, категории, отобранные фильтры, карточки, корзина. Внутри карточек добавьте обычный товар, много фотографий и варианты. Выберите реальные страницы с трафиком и типичными проблемами, а не только самую лёгкую.
Для каждой строки запишите устройство, URL, источник данных, охват URL или сайта, дату и симптом. Если пользователь жалуется на выбор размера, дополните замер начальной загрузки записью взаимодействия. Когда приватная корзина не имеет публичных полевых данных, её всё равно нужно проверять как пользовательский маршрут.
Учебный разбор трёх симптомов
Представим магазин светильников. Числа условные и нужны для выбора следующего действия, а не описания реального проекта.
| Наблюдение | Что проверить первым | Почему |
|---|---|---|
| Мобильный LCP карточки 4,2 с, картинка появляется последней | Этапы LCP и запрос главного фото | Узкое место может быть до скачивания, а не в весе |
| Выбор цвета даёт задержку 420 мс | Запись взаимодействия и длинные задачи | Начальный LCP не объясняет отклик кнопки |
| CLS категории 0,18 после баннера | Место, отведённое под баннер | Поздняя вставка меняет положение товаров |
В первой строке нельзя сразу поручить «сжать все картинки»: фото могло запрашиваться только после выполнения скрипта. Во второй стоит сравнить карточку с виджетом и без него в тестовой среде. В третьей проверяют резервирование места, а не назначают картинке меньший формат.
Сценарий меняется, если LCP уже хороший, а проблема возникает только после действия. Тогда работа с начальным фото не отвечает наблюдаемой жалобе.
Как поставить и принять задачу
Формулируйте задание через воспроизведение: «на этой мобильной карточке при выборе цвета интерфейс отвечает после длинной задачи; проверить обработчик и зависимые виджеты». Приложите условия сети, состояние кеша, запись и ожидаемое действие. Разработчик сможет проверить ту же причину, а не угадывать смысл просьбы «довести балл до ста».
После исправления повторите лабораторный маршрут в сопоставимых условиях, проверьте функции магазина и затем наблюдайте полевые данные. Ускорение одного шаблона не доказывает улучшение всех страниц.
Подробную диагностику начальной загрузки продолжает разбор ускорения карточки товара. Работа с файлами и версиями фото вынесена в оптимизацию изображений. Хорошие Core Web Vitals помогают качеству использования, но не гарантируют поисковые позиции или рост заказов.