Связь между собственным RUM и CrUX

Основные концепции RUM и CrUX

RUM (Real User Monitoring) представляет собой методику измерения производительности сайта непосредственно в браузерах реальных пользователей. RUM позволяет получать точные данные о том, как страница загружается, реагирует и становится интерактивной в различных условиях сети, устройствах и географических регионах.

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

Показатели Web Vitals в RUM и CrUX

Core Web Vitals — это ключевые метрики, на которых строится измерение пользовательского опыта:

  • LCP (Largest Contentful Paint) — измеряет время рендеринга самого большого видимого блока контента.
  • FID (First Input Delay) — задержка между первой интеракцией пользователя и реакцией страницы.
  • CLS (Cumulative Layout Shift) — кумулятивное смещение контента при загрузке.

В RUM эти метрики собираются на уровне конкретного пользователя, что позволяет учитывать индивидуальные условия, такие как скорость сети и производительность устройства. В CrUX метрики представлены в виде процентных распределений и категорий («Good», «Needs Improvement», «Poor»), что отражает усреднённое поведение аудитории.

Настройка собственного RUM с Web Vitals

Для интеграции Web Vitals в собственный RUM используется официальный пакет web-vitals:

import {getLCP, getFID, getCLS} from 'web-vitals';

getLCP(metric => {
  sendToAnalytics('LCP', metric.value);
});

getFID(metric => {
  sendToAnalytics('FID', metric.value);
});

getCLS(metric => {
  sendToAnalytics('CLS', metric.value);
});

Ключевые моменты:

  • Метрики должны отправляться асинхронно, чтобы не блокировать основной поток страницы.
  • Важно учитывать браузеры и устройства, так как производительность может сильно различаться.
  • RUM позволяет детализировать данные по сессиям, страницам и географии пользователя.

Сравнение данных RUM и CrUX

RUM и CrUX дополняют друг друга:

  • Granularity (Детализация): RUM предоставляет метрики на уровне отдельного пользователя, CrUX — на уровне агрегированных сегментов.
  • Timeframe (Временные рамки): RUM позволяет видеть данные в реальном времени или за последние сессии, CrUX — за более длительные периоды (например, 28 дней).
  • Segmentation (Сегментация): В RUM можно сегментировать данные по устройствам, сетям и страницам, а CrUX сегментирует только по крупным категориям устройств и сетей.

Использование этих данных совместно позволяет:

  • Проверять соответствие собственного RUM глобальным трендам.
  • Обнаруживать аномалии и выявлять сегменты пользователей с плохой производительностью.
  • Оптимизировать страницы с учётом глобальных и локальных данных одновременно.

Интеграция CrUX с собственными данными

CrUX предоставляет API для выгрузки агрегированных данных:

fetch('https://chromeuxreport.googleapis.com/v1/records:queryRecord', {
  method: 'POST',
  body: JSON.stringify({
    url: 'https://example.com',
    formFactor: 'PHONE'
  })
})
  .then(response => response.json())
  .then(data => console.log(data.record.metrics.LARGEST_CONTENTFUL_PAINT));

Сравнивая эти значения с RUM-метриками:

  • Можно выявить несоответствия между поведением отдельного пользователя и трендом аудитории.
  • Понять, какие изменения реально улучшат глобальный опыт, а какие будут локальными улучшениями.

Практические рекомендации

  1. Синхронизация метрик: Использовать одинаковые единицы измерения и временные рамки при сравнении RUM и CrUX.
  2. Анализ распределений: RUM может показывать медиану и перцентили для каждого пользователя, CrUX предоставляет 75-й и 95-й перцентили, что важно для оценки худшего сценария.
  3. Отслеживание изменений: После оптимизаций сравнивать RUM и CrUX, чтобы убедиться, что улучшения видны и глобально.
  4. Агрегация и визуализация: Для крупных сайтов строить дашборды, где показатели RUM и CrUX отображаются одновременно, чтобы быстро выявлять отклонения.

Выводы для оптимизации

Связка собственного RUM и CrUX позволяет:

  • Получать точные данные о производительности на уровне отдельных пользователей.
  • Контролировать глобальные тренды и соответствие стандартам Web Vitals.
  • Делать обоснованные решения по оптимизации UX на основе сочетания локальных и агрегированных данных.

Эффективная интеграция этих двух источников обеспечивает всестороннее понимание производительности и пользовательского опыта.

Оглавление