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