Core Web Vitals и конверсия сайта
Что измеряют LCP, INP и CLS, чем полевые данные отличаются от лабораторных, как искать причину и не выдавать корреляцию за рост продаж.
Главное за 30 секунд
Core Web Vitals описывают загрузку, отзывчивость и визуальную стабильность. Они важны для пользовательского опыта, но сами по себе не гарантируют рост конверсии. Сначала измеряйте реальные данные по шаблонам, затем исправляйте причины и проверяйте бизнес-эффект отдельно.
Три текущие метрики
- LCP: время появления крупнейшего видимого элемента; рекомендуемый порог — до 2,5 секунды.
- INP: задержка реакции интерфейса на взаимодействия; рекомендуемый порог — до 200 мс.
- CLS: суммарная визуальная нестабильность; рекомендуемый порог — не выше 0,1.
- Оценка ведётся по 75-му перцентилю и отдельно для мобильных и десктопных загрузок.
Полевые и лабораторные данные
Полевые данные отражают реальные устройства, сети и пользователей за период. Лабораторный тест воспроизводит заданные условия и помогает отлаживать конкретную страницу. Они отвечают на разные вопросы и могут не совпадать.
Для нового или малопосещаемого URL полевой выборки может не быть. Используйте шаблонную группу, собственный RUM и лабораторную диагностику, не выдавая тестовый балл за опыт всей аудитории.
Диагностика LCP
- Медленный сервер и поздний первый байт.
- Главное изображение обнаруживается только после JavaScript.
- Слишком тяжёлый файл или неподходящий формат.
- Блокирующие CSS, шрифты и сторонние скрипты.
- Lazy loading применён к элементу первого экрана.
Диагностика INP
Ищите длинные задачи JavaScript, тяжёлые обработчики, массовый рендер и сторонние виджеты. Разделяйте работу, сокращайте объём кода на старте и давайте браузеру возможность обновить интерфейс после действия.
Один быстрый клик в лаборатории не описывает всю сессию: INP учитывает взаимодействия на протяжении посещения.
Диагностика CLS
- Указывайте размеры изображений, видео и рекламных блоков.
- Резервируйте место под динамический контент.
- Не вставляйте баннер над уже видимым текстом.
- Контролируйте замену шрифтов и высоту строк.
- Анимируйте transform и opacity вместо свойств, меняющих раскладку.
Связь с конверсией
Медленный или прыгающий интерфейс может мешать пользователю, но одновременно с оптимизацией часто меняются дизайн, трафик и оффер. Поэтому рост конверсии после релиза не доказывает, что его вызвала одна метрика.
Фиксируйте изменения, сравнивайте одинаковые сегменты и по возможности проводите контролируемый эксперимент. Рядом с Web Vitals смотрите ошибки, завершение формы и бизнес-конверсию.
Рабочий цикл
После исправления добавьте performance budget в сборку: ограничение веса JavaScript, изображений или критического CSS. Это не заменит полевые данные, но остановит очевидный регресс до публикации и сделает скорость постоянным требованием, а не разовой кампанией.
- Собрать полевые данные по типам страниц и устройствам.
- Выбрать шаблон с наибольшим трафиком и проблемой.
- Найти конкретную причину лабораторными инструментами.
- Исправить и проверить регрессии функций и SEO.
- Наблюдать полевые метрики и конверсию после достаточного периода.
Первичные источники и документация
Следующий шаг
Если хотите применить схему к своему проекту, проведите аудит производительности ключевых шаблонов. Сначала зафиксируем исходные данные и критерии готовности, затем оценим объём работ.
Посчитайте стоимость под вашу задачу
Ориентир. Финальная смета — после брифа по задачам.
Бесплатная диагностика за 24–48 часов: посмотрим ситуацию, скажем что даст результат, дадим смету.
