Поле entries и связь с Performance API

Библиотека Web Vitals предоставляет метрики производительности веб-страниц, такие как Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS). Одним из ключевых элементов внутренней работы этой библиотеки является поле entries, которое хранит детализированную информацию о событиях производительности, получаемую через Performance API.

Основные свойства entries

Поле entries является массивом объектов PerformanceEntry, каждый из которых представляет собой событие производительности. Основные свойства объектов:

  • name — имя события. Для LCP это имя ресурса, который стал самым крупным видимым элементом. Для CLS — "layout-shift".

  • entryType — тип события, например:

    • "paint" для событий отрисовки (FCP, LCP)
    • "layout-shift" для смещений контента (CLS)
    • "resource" для загрузки ресурсов

  • startTime — момент начала события в миллисекундах относительно времени навигации (navigationStart).

  • duration — продолжительность события в миллисекундах. В некоторых типах (например, CLS) может быть всегда 0.

  • size, loadTime, renderTime — дополнительные свойства для LCP и других метрик, отражающие размер элемента или время рендеринга.

Взаимодействие с Performance API

Web Vitals использует стандартный PerformanceObserver, предоставляемый Performance API, для отслеживания изменений:

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log(entry.name, entry.entryType, entry.startTime);
  });
});

observer.observe({ type: 'largest-contentful-paint', buffered: true });
observer.observe({ type: 'layout-shift', buffered: true });

Параметр buffered: true гарантирует, что события, произошедшие до подключения наблюдателя, будут включены в массив entries. Это важно для метрик, которые могут произойти очень рано, например LCP и FCP.

Сортировка и фильтрация записей

Массив entries обычно отсортирован по startTime, но при необходимости можно использовать стандартные методы массива для фильтрации:

  • Выбор последних LCP-элементов:
const lcpEntries = entries
  .filter(e => e.entryType === 'largest-contentful-paint')
  .sort((a, b) => b.startTime - a.startTime);
const latestLCP = lcpEntries[0];
  • Фильтрация CLS по видимости: CLS учитывает только смещения, произошедшие на видимой части страницы (entry.hadRecentInput === false), что позволяет исключать смещения из-за взаимодействия пользователя.

Особенности разных метрик

  1. LCP (Largest Contentful Paint)

    • Поле entries хранит информацию о каждом крупном элементе, который потенциально мог стать LCP.
    • Событие считается LCP только в момент, когда элемент полностью виден и не перекрыт другим.
    • Свойство size отражает визуальный размер элемента, что позволяет определить его вклад в восприятие скорости загрузки.

  2. FID (First Input Delay)

    • Для FID массив entries содержит события типа "first-input".
    • Свойство processingStart и startTime позволяют рассчитать задержку между взаимодействием пользователя и началом обработки события.

  3. CLS (Cumulative Layout Shift)

    • Все события с типом "layout-shift" накапливаются в entries.
    • Для вычисления финального CLS библиотека суммирует impact fractions, исключая события, вызванные пользовательскими действиями (hadRecentInput).

Доступ к entries через Performance API напрямую

Помимо использования Web Vitals, массив entries доступен через глобальный объект performance:

const paintEntries = performance.getEntriesByType('paint');
paintEntries.forEach(entry => {
  console.log(entry.name, entry.startTime);
});

Для ресурсов и навигации можно использовать performance.getEntriesByType('resource') и performance.getEntriesByType('navigation'), что позволяет сочетать метрики Web Vitals с собственными инструментами мониторинга производительности.

Рекомендации по работе с entries

  • Подключать PerformanceObserver как можно раньше, чтобы не пропустить ранние события.
  • Использовать фильтры по entryType для избирательной обработки нужных метрик.
  • Хранить ссылки на последние события (entries[entries.length - 1]) для вычисления актуальных значений LCP, CLS и других показателей.
  • Учитывать, что не все метрики имеют duration, а некоторые (CLS) требуют дополнительной обработки, учитывающей видимость и пользовательские взаимодействия.

Поле entries является центральным мостом между Web Vitals и Performance API, позволяя получать подробные данные о каждом ключевом событии производительности и использовать их для анализа загрузки страницы, интерактивности и стабильности интерфейса.

Оглавление