︙

webVitalsAttribution

Web Vitals に関連する問題を debugging する際には、問題の source を特定できると役立つことがよくあります。例えば、Cumulative Layout Shift (CLS)の場合、最大の layout shift が発生したときに最初に shift した要素が何であったかを知りたいかもしれません。また、Largest Contentful Paint (LCP)の場合、ページの LCP に対応する要素を特定したいかもしれません。LCP 要素が image である場合、 image リソースの URL を知ることで、最適化する必要があるアセットを見つけるのに役立つかもしれません。

Web Vitals スコア、別名 attribution 、に最も大きく寄与する要素を特定することで、PerformanceEventTiming 、PerformanceNavigationTiming 、PerformanceResourceTiming などのエントリに関するより詳細な情報を入手することができます。

属性設定は、default では Next.js で無効になっていますが、next.config.jsで以下を指定することで、メトリックごとに有効にすることができます。

next.config.js

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

有効な属性値は、全てNextWebVitalsMetric の type で指定されたweb-vitalsメトリクスです。