CrUX Vis: как Google показывает, что чувствуют ваши пользователи на самом деле

Лабораторные и полевые данные

Lighthouse и WebPageTest измеряют скорость сайта в контролируемых условиях: одно устройство, одна сеть, один прогон. Это удобно при разработке, но реальные посетители открывают сайт с медленных телефонов, через мобильную сеть, с десятком вкладок в фоне. Поэтому сайт может получать высокую оценку Lighthouse и при этом казаться медленным пользователям.

Полевые данные о реальных посещениях собирает Chrome User Experience Report (CrUX) — отчёт Google на основе анонимизированной статистики пользователей Chrome, согласившихся её отправлять. CrUX Vis — бесплатный инструмент для просмотра этих данных в виде графиков.

Что такое CrUX Vis

По документации Chrome, CrUX Vis — это панель, которая показывает еженедельные исторические данные из CrUX History API. Главное:

Данные есть не у всех сайтов и страниц: нужна достаточная посещаемость. Для отдельного URL данных часто нет, даже если для сайта в целом они есть.

Какие метрики показывает

Основные — Core Web Vitals:

INP стал основной метрикой отзывчивости 12 марта 2024 года и заменил FID. Если в старых отчётах или статьях встречается FID, это устаревшая метрика.

Кроме того, CrUX Vis показывает вспомогательные метрики загрузки — FCP, TTFB, RTT, а также метрики рекламы. Оценка ведётся по 75-му процентилю: метрика считается хорошей, если в норму укладываются не меньше 75 % посещений.

Как читать графики

1. Введите адрес сайта или страницы и выберите тип устройств. Начинайте с телефонов: у большинства сайтов именно там метрики хуже.
2. Смотрите не на одно значение, а на тренд за 40 недель. Резкое ухудшение обычно совпадает с выкладкой: новый скрипт аналитики, виджет, тяжёлое изображение на первом экране.
3. Сравнивайте долю «хороших», «требующих улучшения» и «плохих» посещений. Среднее значение может выглядеть прилично, пока четверть посетителей получает плохой опыт.
4. Учитывайте задержку: данные собираются по 28-дневным периодам, поэтому эффект исправления проявляется в CrUX только через несколько недель.

Что делать с плохими метриками

• LCP. Уменьшить время ответа сервера (TTFB), оптимизировать и правильно размечать главное изображение (современный формат, нужный размер, без отложенной загрузки для первого экрана), убрать блокирующие CSS и скрипты.
• INP. Разбивать долгие задачи JavaScript, убирать тяжёлые обработчики событий, откладывать сторонние скрипты (чаты, виджеты, аналитику), не выполнять лишнюю работу при каждом нажатии.
• CLS. Задавать размеры изображениям и встраиваемым блокам, резервировать место под рекламу и баннеры, не вставлять контент над уже отрисованным.

Другие источники тех же данных

Для автоматизации — например, чтобы после каждой выкладки сравнивать метрики с прошлыми неделями, — используют CrUX History API: он отдаёт те же данные, что показывает CrUX Vis, в формате JSON.

Пример запроса (нужен ключ API из Google Cloud):

curl -s "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"origin": "https://example.com", "formFactor": "PHONE", "metrics": ["largest_contentful_paint", "interaction_to_next_paint", "cumulative_layout_shift"]}'

Ограничения

• Только Chrome. Посетители Safari и Firefox в данные не попадают.
• Нужна посещаемость. У нового или небольшого сайта данных может не быть совсем.
• Нет данных в реальном времени. Для мгновенной реакции на ухудшения нужен собственный сбор метрик на сайте (RUM), например библиотека web-vitals.

Итог

CrUX Vis — самый быстрый способ увидеть, как сайт работает у реальных посетителей и как это менялось за последние месяцы. Лабораторные тесты помогают найти причину, а полевые данные из CrUX показывают, почувствовали ли пользователи результат.

Полезные ссылки: документация CrUX Vis, Core Web Vitals.