webVitalsAttribution

При отладке проблем, связанных с Web Vitals, часто бывает полезно определить источник проблемы. Например, в случае Cumulative Layout Shift (CLS) мы можем захотеть узнать, какой элемент первым сместился при самом большом изменении макета. Или в случае Largest Contentful Paint (LCP) мы можем захотеть идентифицировать элемент, соответствующий LCP для страницы. Если элемент LCP является изображением, знание URL-адреса ресурса изображения может помочь нам найти актив, который нужно оптимизировать.

Определение главного фактора, влияющего на показатель Web Vitals, также известного как атрибуция, позволяет получить более детальную информацию, такую как записи PerformanceEventTiming, PerformanceNavigationTiming и PerformanceResourceTiming.

В Next.js атрибуция по умолчанию отключена, но её можно включить для каждого метрики, указав следующее в next.config.js:

experimental: {
  webVitalsAttribution: ['CLS', 'LCP']
}

Допустимые значения атрибуции — это все метрики web-vitals, указанные в типе NextWebVitalsMetric.