跳到内容
配置next.config.jswebVitalsAttribution

webVitalsAttribution

此功能目前处于实验阶段，可能会有所更改，不建议用于生产环境。欢迎试用并在 GitHub 上分享您的反馈。

在调试与 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 指标。