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
指標。
這有幫助嗎?