Реальные пользовательские метрики

Реальные пользовательские метрики (RUM, Real User Metrics) фиксируют фактическое поведение пользователей на сайте, в отличие от лабораторных инструментов, которые моделируют загрузку страницы. В контексте Lighthouse и JavaScript RUM позволяет измерять такие показатели, как First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и First Input Delay (FID) на устройствах и в сетевых условиях реальных посетителей. Эти метрики отражают реальное восприятие скорости и отзывчивости страницы.

Интеграция Lighthouse с RUM

Lighthouse предоставляет возможность генерации отчетов на основе RUM через Chrome User Experience Report (CrUX). Для подключения требуется включить доступ к данным CrUX и настроить Lighthouse с опцией --preset=experimental или через API, используя lighthouse({...}) с соответствующими параметрами.

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runLighthouse(url) {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {output: 'json', port: chrome.port, preset: 'experimental'};
  const runnerResult = await lighthouse(url, options);
  console.log(runnerResult.lhr.audits['largest-contentful-paint'].displayValue);
  await chrome.kill();
}

runLighthouse('https://example.com');

В этом примере LCP извлекается напрямую из отчета Lighthouse, полученного с настройкой, поддерживающей RUM.

Основные метрики и их интерпретация

1. First Contentful Paint (FCP) Отражает время до отображения первого содержимого страницы, которое воспринимается пользователем. В JavaScript можно отслеживать FCP через PerformanceObserver:

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntriesByName('first-contentful-paint');
  entries.forEach(entry => console.log('FCP:', entry.startTime));
});
observer.observe({type: 'paint', buffered: true});

2. Largest Contentful Paint (LCP) Определяет момент, когда на странице отображается основной визуальный элемент. Важен для оценки восприятия загрузки страницы. LCP фиксируется аналогично FCP, но с типом 'largest-contentful-paint'.

3. Cumulative Layout Shift (CLS) Измеряет суммарное смещение элементов, происходящее после начала загрузки страницы. CLS важен для понимания стабильности интерфейса:

let clsValue = 0;
const clsObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) clsValue += entry.value;
  }
});
clsObserver.observe({type: 'layout-shift', buffered: true});

4. First Input Delay (FID) Фиксирует задержку между первой интеракцией пользователя и реакцией страницы. FID важен для измерения отзывчивости интерфейса:

const fidObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => console.log('FID:', entry.processingStart - entry.startTime));
});
fidObserver.observe({type: 'first-input', buffered: true});

Сбор и агрегация данных

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

function sendRUMMetric(name, value) {
  fetch('/analytics', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({metric: name, value, timestamp: Date.now()})
  });
}

new PerformanceObserver(list => {
  list.getEntries().forEach(entry => sendRUMMetric(entry.name, entry.startTime));
}).observe({type: 'paint', buffered: true});

Использование данных RUM в оптимизации

Реальные пользовательские метрики помогают приоритизировать оптимизацию элементов страницы. Если LCP на мобильных устройствах значительно выше, чем в лабораторных условиях, стоит анализировать критический путь рендеринга, оптимизировать ресурсы и внедрять lazy-loading для тяжелых элементов. CLS анализируется для уменьшения непредсказуемых сдвигов контента. FID требует минимизации блокирующих скриптов и оптимизации работы основного потока браузера.

Преимущества интеграции RUM с Lighthouse

  • Получение объективных данных о пользовательском опыте на реальных устройствах.
  • Возможность сравнивать лабораторные показатели с реальными и выявлять расхождения.
  • Автоматизация сбора и анализа метрик с помощью Lighthouse API.
  • Возможность генерации отчетов и дашбордов, которые отражают реальные условия пользователей.

RUM в сочетании с Lighthouse позволяет не просто оценивать теоретическую производительность страницы, но и принимать решения на основе фактического поведения пользователей, что делает оптимизацию максимально целенаправленной и эффективной.

Оглавление