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 часов: посмотрим ситуацию, скажем что даст результат, дадим смету.
