webVitalsAttribution

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

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

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

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

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