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 指标,详情请见此处。
这有帮助吗?