使用“网页指标”扩展程序调试核心网页指标问题

Web Vitals 扩展程序现在会显示更多调试信息,帮助您找出 Core Web Vitals 问题的根本原因。

Michal Mocny
Michal Mocny
Brendan Kenny
Brendan Kenny

发布时间:2023 年 5 月 4 日

Web Vitals 扩展程序可让您轻松访问 Core Web Vitals 诊断信息,以帮助开发者衡量和解决 Core Web Vitals 问题。该 API 是对 Chrome 团队提供的其他工具的补充,可帮助开发者改善其网站上的体验。

我们更新了该扩展程序,以便向开发者提供更多调试信息,让他们更轻松地了解和解决性能问题。

在控制台中显示调试信息

Web Vitals 扩展程序已经推出了一段时间的“控制台日志记录”调试选项。您可以在“选项”屏幕中启用此功能:

“Web Vitals 扩展程序选项”屏幕

在最近一次升级之前,这会将 web-vitals library(作为扩展程序基础)的输出记录在 JSON 对象中:

Web Vitals 扩展程序旧版控制台日志记录

然后,您可以展开此对象以获取完整详细信息,并将鼠标悬停在 LCP 图片等元素上,以便在主面板中突出显示这些元素:

Web Vitals 扩展程序旧版控制台日志记录,其中包含元素突出显示

这很有帮助,但输出格式并不特别人性化,因此我们认为可以提供更好的开发者体验。因此,我们改进了此扩展程序,让最重要的信息更加显眼,同时仍然包含完整对象,方便需要更多详细信息的人使用。

每个指标的新调试信息

在新版本中,我们以更易于阅读的格式添加了新的调试信息,以帮助您查找和解决问题。由于每个指标各不相同,因此系统会为每个指标提供不同的信息。

LCP 调试信息

对于 Largest Contentful Paint (LCP),我们会同时显示相应元素,以及 Optimize LCP 指南中详细介绍的 4 个阶段的细分数据:

Web Vitals Extension 新控制台日志记录显示 LCP 元素和子部分

LCP 时间(2,876 毫秒,即约 2.9 秒)以琥珀色突出显示,因为它属于“需要改进”类别。

在此示例中,我们发现 Resource load time 用时最长,因此,为了缩短 LCP 用时,您需要优化该时间,例如避免将其托管在单独的网域上,或者使用较小的图片或更高效的格式。这种情况是由于人为减速而造成的,原因在于 web.dev 是一个速度很快的网站 😀?

您也可以将鼠标悬停在该元素上,以突出显示图片:

Web Vitals 扩展程序的新控制台日志记录会保留悬停时突出显示的元素

您还可以右键点击相应元素,在“元素”面板中显示该元素。

在这里,LCP 元素是一个图片,如果在右侧的控制台中将鼠标悬停在该图片上,左侧网站上的该元素也会突出显示。

CLS 调试信息

现在,系统还会列出导致 Cumulative Layout Shift (CLS) 的偏移,您可以将鼠标悬停在相应偏移上,以突出显示相关元素:

显示每次 CLS 元素偏移的 Web Vitals Extension 新控制台日志记录

上面的屏幕截图显示了 2 次偏移,第一个元素由 2 个元素组成(当加载横幅图片且其下方的内容发生偏移时),第二个元素包含 4 个元素(当加载动态广告且网页的大部分内容向下移动时)。

在右侧控制台中,此屏幕截图中将鼠标悬停在 h2 元素上,您可以看到,这会在左侧网站上突出显示该元素。

FID 调试信息

对于首次输入延迟 (FID),我们会显示受影响的元素(您可以将鼠标悬停在该元素上,以在网页上将其突出显示),以及互动类型,并像往常一样显示完整的 JSON 对象:

显示 FID 目标和类型的 Web Vitals Extension 新控制台日志记录

INP 调试信息

对于 Interaction to Next Paint (INP),我们添加了两个新日志:

  • INP - 最长互动
  • 互动次数 - 所有互动

INP 指标

首先,我们会在 INP 指标发生变化时突出显示该指标:

Web Vitals Extension 新控制台日志记录显示 INP 目标、事件类型和细分数据

与 LCP 类似,此扩展程序会细分 INP 时间,以显示三个阶段:

  1. 输入延迟
  2. 处理用时
  3. 呈现延迟

这有助于您确定事件运行缓慢的原因是由于其他事件阻塞(输入延迟),还是由于事件处理程序本身因您的代码而运行缓慢(处理时长),还是由于后处理渲染延迟(呈现延迟),或者是以上两种或更多原因的组合。

互动次数

INP 可能会很慢,因为之前的交互会阻塞主线程,从而导致输入延迟过长。因此,我们以与 INP 日志记录类似的格式列出所有互动:

Web Vitals 扩展程序的新控制台日志记录,其中显示了所有互动

这样,您就可以通过与网站互动来“实时跟踪”网站,并在控制台中查看哪些互动组合可能会导致 INP 问题。

这还可以让你识别多种缓慢的互动,而不仅仅是最大的 INP 互动,这有助于你在提高响应能力时避免追赶尾巴的感觉。

过滤控制台日志

虽然所有这些额外信息都很有用,但如果您正在进行与 Core Web Vitals 无关的其他开发,或者当时只对某个特定 Core Web Vital 感兴趣,这些信息可能会分散您的注意力。

您可以使用 DevTools 中的控制台过滤选项滤除部分或全部消息:

使用控制台过滤选项

  • 如需移除所有扩展程序消息,您可以在选项中将其关闭,也可以使用 -Extension 过滤器。
  • 如需仅查看 LCP,您可以使用 Web Vitals Extension LCP 过滤条件。
  • 如果只想查看 INP 和互动情况,您可以使用 Web Vitals Extension -LCP -CLS -FID 过滤条件。

我们会尽量减少此扩展程序的选项数量,但如果您认为 DevTools 过滤功能不够用,并且更希望在此处使用选项,请通过提交 GitHub 问题告诉我们。

总结

我们希望您能发现最新版扩展程序中新增的调试选项非常实用,它们可以帮助您更轻松地发现和解决核心网页指标问题,从而改善您网站上的用户体验。

请注意,您在开发者计算机上的体验可能并不代表真实用户的体验。请参阅我们之前的博文,了解如何在扩展程序中查看您网站的 CrUX 实测数据,以了解您的体验与用户的体验是否契合。

我们非常期待收到您对这些改进的反馈,或在 GitHub 问题跟踪器中收到您的任何其他建议。

致谢

主打图片:Unsplash 上的 Farzad