webVitalsAttribution

Web Vitalsに関連する問題をデバッグする際、問題の原因を特定できれば非常に役立ちます。 例えば、累積レイアウトシフト（CLS）の場合、最大のレイアウトシフトが発生した際に最初にシフトした要素を知りたいことがあります。 また、最大コンテンツフルペイント（LCP）の場合、ページのLCPに対応する要素を特定したいことがあります。 LCP要素が画像の場合、画像リソースのURLを知ることで、最適化が必要なアセットを特定できます。

Web Vitalsスコアへの最大の貢献要因（別名アトリビューション）を特定することで、PerformanceEventTiming、PerformanceNavigationTiming、PerformanceResourceTimingのエントリなど、より詳細な情報を取得できます。

アトリビューションはNext.jsではデフォルトで無効になっていますが、next.config.jsで以下を指定することでメトリクスごとに有効にできます。

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

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