webVitalsAttribution

Web Vitals に関連する問題をデバッグする際、問題の原因を特定できると非常に役立つことがよくあります。たとえば、累積レイアウトシフト (CLS) の場合、最大のレイアウトシフトが発生したときに最初にシフトした要素を知りたい場合があります。または、Largest Contentful Paint (LCP) の場合、ページに対する LCP に対応する要素を特定したい場合があります。LCP 要素が画像の場合、画像リソースの URL を知ることは、最適化する必要があるアセットを見つけるのに役立ちます。

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

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

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

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