Интеграция CrUX данных

CrUX (Chrome User Experience Report) представляет собой набор данных о реальном пользовательском опыте сайтов, собранных в масштабах всего Интернета. Эти данные включают метрики производительности, интерактивности и визуальной стабильности, полученные на устройствах пользователей Chrome. В контексте Lighthouse использование CrUX позволяет анализировать реальный опыт посетителей сайта, а не только результаты синтетического тестирования.

Основные метрики CrUX

Lighthouse использует CrUX для расчета показателей, которые непосредственно влияют на пользовательский опыт:

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

Эти метрики получают значения не из локальных измерений, а из CrUX API, что позволяет формировать рекомендации на основе реального поведения пользователей.

Подключение CrUX данных к Lighthouse

Для интеграции CrUX необходимо использовать официальный API:

import fetch from 'node-fetch';

const url = 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY';

const body = {
  "url": "https://example.com",
  "formFactor": "PHONE"
};

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(body)
})
  .then(res => res.json())
  .then(data => console.log(data.record.metrics));

Объяснение ключевых моментов:

  • formFactor — параметр, указывающий тип устройства (PHONE, DESKTOP, TABLET). Метрики зависят от устройства.
  • url — адрес страницы, для которой требуется получить данные.
  • record.metrics — объект с реальными значениями FID, LCP, CLS и другими метриками.

Использование CrUX данных внутри Lighthouse

Lighthouse предоставляет возможность объединить синтетические тесты с CrUX метриками. Для этого применяются следующие шаги:

  1. Включение CrUX аудитории в конфигурации:
const lighthouseConfig = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'accessibility'],
    useCruxData: true
  }
};
  1. Получение CrUX данных для отчета:

Lighthouse автоматически добавляет данные в секцию “Field Data”, где отображаются реальные показатели с пользователях, включая медиану и перцентили.

  1. Сравнение синтетических и полевых данных:
  • Синтетические метрики формируются при запуске Lighthouse на локальной машине или CI.
  • CrUX метрики отражают реальные условия пользователей, включая сетевые задержки и производительность устройств.

Работа с перцентилями CrUX

CrUX предоставляет метрики с распределением по перцентилям:

  • p75 — значение, меньше которого находится 75% пользователей. Обычно используется как основной показатель.
  • median — медиана выборки пользователей.
  • histogram — распределение показателей по диапазонам (fast, moderate, slow).

Пример обработки p75 для LCP:

const lcpP75 = data.record.metrics.lcp.p75;
if (lcpP75 <= 2500) {
  console.log('LCP в норме');
} else {
  console.log('LCP требует оптимизации');
}

Использование p75 позволяет идентифицировать опыт большинства пользователей, что является более реалистичным индикатором производительности, чем отдельные измерения.

Автоматизация обновления CrUX данных

Для интеграции в CI/CD рекомендуется:

  1. Создать скрипт на Node.js, который получает CrUX метрики для всех критических страниц.
  2. Сохранять результаты в формате JSON.
  3. Автоматически включать их в Lighthouse отчеты для последующего анализа.

Пример:

import fs from 'fs';

async function fetchCrux(url) {
  const res = await fetch('https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({url, formFactor: 'PHONE'})
  });
  const data = await res.json();
  fs.writeFileSync(`crux-${url.replace(/https?:\/\//, '')}.json`, JSON.stringify(data, null, 2));
}

Ограничения и особенности

  • Данные CrUX обновляются ежемесячно, поэтому мгновенные изменения производительности сайта могут не сразу отражаться.
  • Метрики доступны только для страниц с достаточным трафиком. Если запросить данные для мало посещаемой страницы, API вернёт пустой объект.
  • Lighthouse предоставляет комбинированные отчеты с “Lab Data” и “Field Data”, где CrUX выступает источником полевых данных.

Практические советы по интеграции

  • Использовать CrUX для определения реальных узких мест, а синтетические тесты — для диагностики.
  • Автоматизировать сбор данных для всех ключевых страниц, чтобы отслеживать динамику производительности.
  • Сравнивать p75 с целевыми показателями (например, LCP ≤ 2.5 секунд, FID ≤ 100 мс, CLS ≤ 0.1).

Эта методика позволяет создавать глубокие отчеты, учитывающие реальные условия пользователей, что значительно повышает точность оценки производительности и UX сайта.

Оглавление