webVitalsAttribution

ウェブ・バイタルに関連する問題をデバッグする際、問題の原因を突き止めることができると便利です。例えば、累積レイアウトシフト（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のメトリクスです。