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 メトリクスです。