Skip to main content

webVitalsAttribution

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

¥When debugging issues related to Web Vitals, it is often helpful if we can pinpoint the source of the problem. For example, in the case of Cumulative Layout Shift (CLS), we might want to know the first element that shifted when the single largest layout shift occurred. Or, in the case of Largest Contentful Paint (LCP), we might want to identify the element corresponding to the LCP for the page. If the LCP element is an image, knowing the URL of the image resource can help us locate the asset we need to optimize.

查明 Web Vitals 分数的最大贡献者(又名 attribution)使我们能够获得更深入的信息,例如 PerformanceEventTimingPerformanceNavigationTimingPerformanceResourceTiming 的条目。

¥Pinpointing the biggest contributor to the Web Vitals score, aka attribution, allows us to obtain more in-depth information like entries for PerformanceEventTiming, PerformanceNavigationTiming and PerformanceResourceTiming.

默认情况下,Next.js 中归因处于禁用状态,但可以通过在 next.config.js 中指定以下内容来针对每个指标启用归因。

¥Attribution is disabled by default in Next.js but can be enabled per metric by specifying the following in next.config.js.

experimental: {
webVitalsAttribution: ['CLS', 'LCP']
}

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

¥Valid attribution values are all web-vitals metrics specified in the NextWebVitalsMetric type.