Симуляция метрических событий вручную

Web Vitals предоставляют метрики, позволяющие измерять качество пользовательского опыта на веб-страницах. Иногда возникает необходимость симулировать события вручную для тестирования или локальной отладки, особенно если реальные пользовательские действия сложно воспроизвести.

Подключение библиотеки и базовая инициализация

Для работы с Web Vitals используется официальная библиотека web-vitals. Основные функции метрик (getCLS, getFID, getLCP, getFCP, getTTFB) принимают callback, который вызывается при вычислении метрики.

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

function reportMetric(metric) {
  console.log(`${metric.name}: ${metric.value}`);
}

getCLS(reportMetric);
getFID(reportMetric);
getLCP(reportMetric);
getFCP(reportMetric);
getTTFB(reportMetric);

В стандартных условиях эти функции отслеживают реальные события, например layout shift или first input. Для симуляции требуется создавать объекты метрик вручную.

Формат объекта метрики

Каждая метрика Web Vitals имеет типичный формат:

{
  name: 'CLS' | 'FID' | 'LCP' | 'FCP' | 'TTFB',
  value: number,
  delta: number,
  id: string
}

name — название метрики, идентифицирующее тип события.
value — текущее значение метрики, которое будет передано в callback.
delta — изменение значения по сравнению с предыдущим замером.
id — уникальный идентификатор события, используемый для связывания нескольких замеров одной метрики.

Симуляция события CLS (Cumulative Layout Shift)

CLS отражает смещение элементов страницы. Для ручной симуляции можно создать объект с параметрами:

function simulateCLS(value) {
  const metric = {
    name: 'CLS',
    value: value,
    delta: value,
    id: 'v1-cls-simulated'
  };
  reportMetric(metric);
}

simulateCLS(0.15);
simulateCLS(0.30);

Важно: CLS может накапливаться, поэтому delta используется для передачи изменения с момента предыдущего события. В реальной среде delta часто меньше value, при симуляции можно задавать delta = value для единичного события.

Симуляция события FID (First Input Delay)

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

function simulateFID(value) {
  const metric = {
    name: 'FID',
    value: value,
    delta: value,
    id: 'v1-fid-simulated'
  };
  reportMetric(metric);
}

simulateFID(45); // задержка в миллисекундах
simulateFID(120);

Такой подход позволяет тестировать обработку метрик в аналитических системах без необходимости реально кликать или вводить текст на странице.

Симуляция LCP (Largest Contentful Paint)

LCP фиксирует время загрузки крупного элемента контента. Для симуляции вручную достаточно создать объект метрики с таймингом в миллисекундах:

function simulateLCP(value) {
  const metric = {
    name: 'LCP',
    value: value,
    delta: value,
    id: 'v1-lcp-simulated'
  };
  reportMetric(metric);
}

simulateLCP(1200);
simulateLCP(2500);

Симуляция LCP полезна для тестирования адаптивного измерения времени загрузки больших изображений или блоков текста.

Симуляция FCP (First Contentful Paint) и TTFB (Time to First Byte)

FCP и TTFB также могут быть симулированы через ручное создание метрик:

function simulateFCP(value) {
  const metric = {
    name: 'FCP',
    value: value,
    delta: value,
    id: 'v1-fcp-simulated'
  };
  reportMetric(metric);
}

function simulateTTFB(value) {
  const metric = {
    name: 'TTFB',
    value: value,
    delta: value,
    id: 'v1-ttfb-simulated'
  };
  reportMetric(metric);
}

simulateFCP(800);
simulateTTFB(200);

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

Интеграция с аналитикой

Симулированные метрики можно направлять в любую систему аналитики так же, как реальные. Главное — сохранить структуру объекта метрики. Например, отправка на сервер:

function sendMetricToServer(metric) {
  fetch('/analytics', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metric)
  });
}

simulateCLS(0.12);
simulateFID(50);
simulateLCP(1500);
simulateFCP(900);
simulateTTFB(250);