webVitalsAttribution

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

Web Vitals スコアの最大の貢献者、すなわち attribution を特定することで、PerformanceEventTiming、PerformanceNavigationTiming、PerformanceResourceTiming のような詳細情報を取得できます。

Attribution は Next.js ではデフォルトで無効になっていますが、next.config.js で以下を指定することで、メトリックごとに有効にできます。

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

NextWebVitalsMetric 型で指定されているすべての web-vitals メトリックが、有効な attribution 値です。