webVitalsAttribution

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

定位對 Web Vitals 分數影響最大的因素,又稱為 attribution, 能讓我們獲得更深入的資訊,例如 PerformanceEventTimingPerformanceNavigationTimingPerformanceResourceTiming 的條目。

在 Next.js 中,Attribution 預設是關閉的,但可以透過在 next.config.js 中指定以下內容來按指標啟用:

next.config.js
experimental: {
  webVitalsAttribution: ['CLS', 'LCP']
}

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