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

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

有効なアトリビューション値は、NextWebVitalsMetric 型で指定されているすべての web-vitals メトリクスです。