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 指标。