跳到主要内容

webVitalsAttribution

在调试与 Web Vitals 相关的问题时,如果我们能够精确定位问题的根源,通常会很有帮助。 例如,在累积布局偏移 (CLS) 的情况下,我们可能想知道在单次最大布局偏移发生时第一个发生偏移的元素。 或者,在最大内容绘制 (LCP) 的情况下,我们可能想要识别页面对应于 LCP 的元素。 如果 LCP 元素是图片,了解图片资源的 URL 可以帮助我们定位需要优化的资产。

精确定位 Web Vitals 分数的最大贡献者,即 归因, 允许我们获得更深入的信息,如 PerformanceEventTimingPerformanceNavigationTimingPerformanceResourceTiming 的条目。

归因在 Next.js 中默认禁用,但可以通过在 next.config.js 中指定以下内容来按指标启用。

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

有效的归因值是 NextWebVitalsMetric 类型中指定的所有 web-vitals 指标。