webVitalsAttribution

此功能目前為實驗性質，可能會有所變動，不建議用於生產環境。歡迎試用並在 GitHub 上分享您的意見回饋。

在偵錯與 Web Vitals 相關的問題時，如果我們可以精確指出問題的來源，通常會很有幫助。例如，在 Cumulative Layout Shift (CLS) 的情況下，我們可能想知道發生單次最大版面配置偏移時，第一個偏移的元素是什麼。或者，在 Largest Contentful Paint (LCP) 的情況下，我們可能想識別與頁面 LCP 對應的元素。如果 LCP 元素是圖片，知道圖片資源的 URL 可以幫助我們找到需要最佳化的資源。

精確指出 Web Vitals 分數的最大貢獻者，也就是歸因 (attribution)，讓我們可以獲得更深入的資訊，例如 PerformanceEventTiming、PerformanceNavigationTiming 和 PerformanceResourceTiming 的條目。

歸因功能在 Next.js 中預設為停用，但可以透過在 next.config.js 中指定以下內容，針對每個指標啟用。

next.config.js

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

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