webVitalsAttribution

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

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

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

next.config.js

module.exports = {
  experimental: {
    webVitalsAttribution: ['CLS', 'LCP'],
  },
}

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