BigQuery и работа с CrUX напрямую

Web Vitals — это набор метрик, разработанных Google для измерения качества пользовательского опыта на веб-странице. Основные показатели включают Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS). Каждая метрика отражает конкретный аспект взаимодействия пользователя с сайтом:

  • LCP измеряет время до полной загрузки основного содержимого страницы. Рекомендуемое значение — менее 2,5 секунд.
  • FID фиксирует задержку между взаимодействием пользователя (клик, скролл, ввод текста) и реакцией браузера. Оптимальный показатель — меньше 100 мс.
  • CLS оценивает стабильность визуального контента страницы при загрузке. Плохим считается CLS > 0,1.

Дополнительно существуют Total Blocking Time (TBT) и Interaction to Next Paint (INP), которые помогают более детально анализировать интерактивность и отзывчивость интерфейса.

Подключение Web Vitals в проект на JavaScript

Для работы с Web Vitals в клиентском коде используется официальная библиотека web-vitals. Установка через npm:

npm install web-vitals

Импортирование необходимых функций в Jav * aScript:

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

Функции принимают колбэк, в который передается объект метрики:

getLCP(metric => {
  console.log('LCP:', metric.value);
});

getFID(metric => {
  console.log('FID:', metric.value);
});

getCLS(metric => {
  console.log('CLS:', metric.value);
});

Каждая метрика возвращает объект вида:

{
  name: 'LCP',        // имя метрики
  value: 2450.3,      // численное значение в миллисекундах
  delta: 0,           // изменение значения с момента предыдущей записи
  id: 'v1-123456'     // уникальный идентификатор измерения
}

Сбор данных Web Vitals для анализа в BigQuery через CrUX

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

Настройка BigQuery для работы с CrUX

  1. Создание проекта в Google Cloud Необходимо иметь проект с включенной биллинг-учетной записью.

  2. Подключение публичного набора данных CrUX Google предоставляет открытый датасет chrome-ux-report.all.* с ежедневными или ежемесячными сводками. Пример SQL-запроса:

SEL ECT
  origin,
  FIRST_CONTENTFUL_PAINT_BUCKET,
  LARGEST_CONTENTFUL_PAINT_BUCKET,
  CUMULATIVE_LAYOUT_SHIFT_BUCKET
FR OM
  `chrome-ux-report.all.2026_03`
WH ERE
  origin = 'https://example.com';

Здесь используется bucketed representation, где показатели агрегированы по диапазонам для упрощения анализа.

Прямое взаимодействие с CrUX API через JavaScript

Помимо BigQuery, можно обращаться к CrUX через REST API. Основные шаги:

  1. Формирование URL запроса:
https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=API_KEY
  1. Формирование POST-запроса с указанием origin и метрик:
const payload = {
  "origin": "https://example.com",
  "metrics": ["largest_contentful_paint", "first_input_delay", "cumulative_layout_shift"]
};

fetch('https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(payload)
})
.then(response => response.json())
.then(data => {
  console.log(data.record.metrics);
});

Ответ содержит сводные данные по каждому показателю, включая медиану, 75-й процентиль и распределение по категориям.

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

Комбинирование реальных данных пользователей с клиентским измерением Web Vitals позволяет:

  • Отслеживать показатели в реальном времени для конкретной аудитории.
  • Сопоставлять данные CrUX с показателями собственного сервера.
  • Строить дашборды, выявлять узкие места производительности и оптимизировать страницу.

Пример архитектуры:

  1. Клиентский скрипт собирает LCP, FID, CLS.
  2. Данные отправляются на сервер через API.
  3. Сервер сохраняет их в BigQuery.
  4. Параллельно агрегируются CrUX данные для того же домена.
  5. SQL-запрос объединяет обе выборки для анализа трендов и отклонений.

Рекомендации по практическому использованию

  • Использовать коллбеки Web Vitals для отправки данных на сервер только после полной загрузки страницы.
  • Учитывать, что CrUX предоставляет агрегированные данные, поэтому разница с пользовательскими измерениями возможна.
  • При построении дашбордов применять percentile-анализ, так как медианные показатели могут скрывать крайние задержки.
  • Для сайтов с высокой динамикой контента стоит дополнительно отслеживать INP и TBT, которые дают более точную картину интерактивности.

Эта схема позволяет построить комплексную систему мониторинга производительности, где Web Vitals измеряются на стороне клиента, а CrUX и BigQuery дают широкую картину поведения пользователей, объединяя индивидуальные и агрегированные данные.

Оглавление