webVitalsAttribution

Web Vitals に関連する問題をデバッグする際、問題の原因を特定できると役立ちます。 たとえば、Cumulative Layout Shift（CLS）の場合、最も大きなレイアウトシフトが発生したときにシフトした最初の要素を知りたいかもしれません。 また、Largest Contentful Paint（LCP）の場合、ページの LCP に対応する要素を特定したいことがあります。 LCP 要素が画像である場合、画像リソースの URL を知ることで、最適化が必要なアセットを見つけることができます。

Web Vitals スコアの最大の原因を特定すること、すなわち attribution により、 PerformanceEventTiming、PerformanceNavigationTiming、および PerformanceResourceTiming のエントリのような、より詳細な情報を得ることができます。

Next.js ではデフォルトで attribution は無効になっていますが、next.config.js で次のように指定することで、メトリックごとに有効にできます。

next.config.js

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

有効な attribution 値は、NextWebVitalsMetric 型で指定されたすべての web-vitals メトリックです。