webVitalsAttribution

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

定位对 Web Vitals 分数影响最大的因素,即 归因分析, 能让我们获取更深入的信息,例如 PerformanceEventTimingPerformanceNavigationTimingPerformanceResourceTiming 的条目。

Next.js 默认禁用归因分析功能,但可以通过在 next.config.js 中指定以下配置来按指标启用:

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

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