webVitalsAttribution

Web Vitals に関連する問題をデバッグする場合、問題の発生源を特定できると役立つことがよくあります。たとえば、累積レイアウトシフト (CLS) の場合、単一の最大レイアウトシフトが発生したときに最初にシフトした要素を知りたいと思うかもしれません。または、最大コンテンツフルペイント (LCP) の場合、ページの LCP に対応する要素を特定したいと思うかもしれません。LCP 要素が画像の場合、画像リソースの URL を知ることで、最適化が必要なアセットを見つけるのに役立ちます。

Web Vitals スコアへの最大の貢献者を特定すること、つまりアトリビューションは、PerformanceEventTiming、PerformanceNavigationTiming、およびPerformanceResourceTimingのような、より詳細な情報を取得することを可能にします。

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

module.exports = {
  experimental: {
    webVitalsAttribution: ['CLS', 'LCP'],
  },
}

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