Импорт из web-vitals/attribution

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

Основные возможности `web-vitals/attribution`

Модуль предоставляет инструменты для:

Определения источника метрики: какие скрипты, взаимодействия пользователя или изменения DOM повлияли на метрику.
Составления детализированных отчётов для аналитики производительности.
Отслеживания производительности отдельных компонентов страницы, а не только глобальной страницы в целом.
Интеграции с системами A/B тестирования и мониторинга, чтобы понимать влияние конкретных изменений интерфейса на Web Vitals.

Импорт и базовое использование

Подключение модуля осуществляется через стандартный синтаксис ES Modules:

import { getLCP, getFID, getCLS } from 'web-vitals';
import { onLCP, onFID, onCLS } from 'web-vitals/attribution';

Здесь:

getLCP, getFID, getCLS — функции из основного пакета web-vitals.
onLCP, onFID, onCLS — функции из модуля attribution, которые позволяют получать дополнительные атрибуты метрик.

Подробный пример с атрибуцией

onLCP((metric) => {
  console.log('LCP с атрибуцией:', metric);
  console.log('Источник:', metric.attribution?.source);
  console.log('Элемент DOM:', metric.attribution?.node);
});

onFID((metric) => {
  console.log('FID с атрибуцией:', metric);
  console.log('Источник:', metric.attribution?.sourceEvent);
});

onCLS((metric) => {
  console.log('CLS с атрибуцией:', metric);
  metric.entries.forEach(entry => {
    console.log('Смещение:', entry.value, 'Элемент:', entry.node);
  });
});

Разбор структуры объекта метрики с атрибуцией:

metric.value — численное значение метрики (например, время в миллисекундах).
metric.attribution — объект с информацией о происхождении метрики:
- source — тип источника ('user-interaction', 'layout-shift', 'script' и т.д.).
- node — элемент DOM, который вызвал событие.
- sourceEvent — объект события, если метрика связана с взаимодействием пользователя.
Для CLS используется массив entries, каждый элемент которого представляет отдельное смещение и DOM-узел, к которому оно относится.

Практические сценарии использования

Оптимизация ключевых элементов страницы

Используя metric.attribution.node, можно определить, какой блок на странице чаще всего вызывает LCP или CLS, и оптимизировать именно его.
Анализ влияния сторонних скриптов

Если метрика связана с внешними скриптами, metric.attribution.source покажет, какой именно скрипт генерирует задержку или смещение макета.
Связь с событиями пользователя

Для FID metric.attribution.sourceEvent позволяет сопоставлять задержку с конкретным кликом, касанием или нажатием клавиши, что помогает выявить проблемные интерактивные элементы.
Мониторинг и аналитика

Сбор атрибутивных данных позволяет создавать более точные отчёты для DevOps и команд по продукту, где отдельные метрики можно фильтровать по источникам, узлам DOM и типам взаимодействий.

Дополнительные методы и свойства

metric.attribution.time — время события, которое привело к метрике.
metric.attribution.id — уникальный идентификатор элемента или события для последующего анализа.
metric.attribution.eventType — тип DOM-события ('click', 'input', 'scroll').

Эти свойства позволяют строить детализированную карту производительности страницы, связывая значения Web Vitals с конкретными элементами и событиями.