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'],
  },
}

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