webVitalsAttribution

在除錯與 Web Vitals 相關的問題時，若能定位問題的來源通常會很有幫助。例如，在累計版面位移 (CLS) 的情況下，我們可能想知道當最大的單次版面位移發生時，第一個位移的元素是什麼。或者，在最大內容繪製 (LCP) 的情況下，我們可能想識別出頁面上對應 LCP 的元素。如果 LCP 元素是一張圖片，知道圖片資源的 URL 可以幫助我們找到需要最佳化的資產。

定位對 Web Vitals 分數影響最大的因素，也就是所謂的歸因分析，能讓我們獲得更深入的資訊，例如 PerformanceEventTiming、PerformanceNavigationTiming 和 PerformanceResourceTiming 的條目。

在 Next.js 中，歸因分析預設是關閉的，但可以透過在 next.config.js 中指定以下內容來針對每個指標啟用：

next.config.js

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

有效的歸因值是 NextWebVitalsMetric 類型中指定的所有 web-vitals 指標。