Алгоритм выбора наихудшего взаимодействия

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

Web Vitals — это набор метрик, предназначенных для измерения качества пользовательского опыта на веб-страницах. Одной из ключевых задач является определение наихудшего взаимодействия пользователя с сайтом, что позволяет выявлять узкие места в производительности и оптимизировать интерфейс.

На практике наихудшее взаимодействие определяется по показателю Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS). Эти метрики оценивают визуальное наполнение страницы, отклик на действия пользователя и стабильность элементов интерфейса соответственно.

Сбор метрик

Web Vitals предоставляет официальный пакет web-vitals, который позволяет регистрировать метрики в реальном времени:

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

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

Каждая функция принимает callback, который получает объект метрики:

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

Определение наихудшего взаимодействия

Для выявления наихудшего взаимодействия требуется собрать все события FID и LCP, а затем выбрать максимальные значения:

  1. Сбор событий FID FID фиксирует задержку отклика на первый ввод пользователя:

    let worstFID = 0;

getFID(metric => {
  if (metric.value > worstFID) {
    worstFID = metric.value;
    console.log('Наихудший FID:', worstFID);
  }
});

    В этом коде происходит постоянное сравнение текущего события с предыдущим наихудшим.

  2. Сбор событий LCP LCP фиксирует время рендеринга наибольшего видимого элемента на экране:

    let worstLCP = 0;

getLCP(metric => {
  if (metric.value > worstLCP) {
    worstLCP = metric.value;
    console.log('Наихудший LCP:', worstLCP);
  }
});

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

  3. Сбор событий CLS CLS фиксирует смещения элементов страницы, влияющие на визуальную стабильность:

    let worstCLS = 0;

getCLS(metric => {
  if (metric.value > worstCLS) {
    worstCLS = metric.value;
    console.log('Наихудший CLS:', worstCLS);
  }
});

    CLS измеряется в баллах от 0 до бесконечности, где более высокие значения указывают на более заметные сдвиги.

Комбинирование метрик для оценки взаимодействия

Для комплексной оценки взаимодействия можно использовать взвешенную шкалу, учитывая важность каждой метрики:

function calculateInteractionScore(fid, lcp, cls) {
  return (fid * 0.4) + (lcp * 0.4) + (cls * 0.2);
}

let worstInteractionScore = 0;
let worstInteractionMetric = null;

function evaluateWorstInteraction(metric) {
  const score = calculateInteractionScore(
    metric.name === 'FID' ? metric.value : 0,
    metric.name === 'LCP' ? metric.value : 0,
    metric.name === 'CLS' ? metric.value : 0
  );

  if (score > worstInteractionScore) {
    worstInteractionScore = score;
    worstInteractionMetric = metric;
    console.log('Наихудшее взаимодействие:', worstInteractionMetric);
  }
}

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

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

  • FID измеряется только для реальных взаимодействий, поэтому для тестирования в локальной среде лучше использовать Total Blocking Time (TBT) как прокси.
  • LCP обновляется при появлении новых элементов на экране, поэтому важно отслеживать событие до закрытия страницы, чтобы зафиксировать максимальное значение.
  • CLS учитывает суммарные сдвиги, поэтому необходимо агрегировать все события до момента выгрузки страницы для корректного анализа.
  • Для аналитики рекомендуется отправлять данные на сервер в реальном времени или батчами, чтобы строить распределение наихудших взаимодействий среди пользователей.

Практическая структура хранения данных

Для оптимизации анализа можно хранить метрики в объекте:

const worstMetrics = {
  FID: {value: 0, id: ''},
  LCP: {value: 0, id: ''},
  CLS: {value: 0, id: ''}
};

function updateWorst(metric) {
  if (metric.value > worstMetrics[metric.name].value) {
    worstMetrics[metric.name] = {value: metric.value, id: metric.id};
    console.log(`Наихудший ${metric.name}:`, worstMetrics[metric.name]);
  }
}

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

Автоматизация отчетности

Для массового сбора данных на продуктивных страницах применяется автоматическая отправка событий на аналитический сервер:

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

getFID(sendMetricToServer);
getLCP(sendMetricToServer);
getCLS(sendMetricToServer);

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

Оглавление