Menu

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