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.