使用 Sentry 衡量核心 Web 指标

Chris 前几天做了一些关于 核心 Web 指标 的笔记，解释了为什么衡量这些性能指标如此重要

我仍然认为 Google 设计的核心 Web 指标很聪明。当我第一次开始关注性能时，都是：减少请求！缓存内容！让内容更小！虽然这些都与 Web 性能密切相关，但它们是抽象相关的。用户实际的 Web 性能是：我等待了多长时间才能看到页面上的内容？我需要多长时间才能真正与页面交互，例如在表单中输入内容或单击链接？我在尝试执行操作时，是否出现讨厌的跳跃？这就是核心 Web 指标很聪明的原因：它们衡量了这些内容。

当然，有很多工具可以帮助您衡量这些极其重要的指标。Chris 的帖子很及时，因为我在 Sentry 工作¹，我们正在推出我们自己的版本。我在 Sentry 的年度博客作者和导师 Dora Chan 解释了 为什么使用真实用户数据对于衡量 Web 指标很重要，以及我们自己的产品如何实现这一目标

可以使用 Google Chrome Lighthouse 扩展程序查看 Google Web 指标。您可能会问自己：“如果我已经有了 Google，为什么还需要 Sentry 来查看这些指标？” 这个问题问得好。Google 提供合成实验室数据，您可以在其中直接控制环境、设备和网络速度。这很好，但它只描绘了部分画面。绘制。明白了吗？

Sentry 收集用户实际与应用程序交互时的聚合现场数据。这包括有关可变网络速度、浏览器、设备、地区等的上下文。借助 Web 指标，我们可以帮助您了解实际情况中发生了什么，发生的频率，原因以及其他与行为相关的因素。

Sentry 将所有这些事务分解为最重要的指标，以便您可以看到您的客户如何体验性能问题。也许 42% 的情况下，事务的输入延迟超过 301 毫秒。Sentry 会显示该问题以及它与其他性能问题的相关性。

我认为这是将核心 Web 指标与用户数据（或 Dora 所说的“现场数据”）结合在一起的强大之处，因为我们的一些用户正在体验速度很快的应用程序！他们拥有很棒的 Wi-Fi！所有的 Wi-Fi！这很好，但仍然有其他用户在忍受更糟糕的体验，并且基于实际用户数据的可视化视图使我们能够看到哪些特定操作会导致速度变慢。这些信息使我们有信心进入代码库并修复问题，但也帮助我们优先考虑这些问题。这是我们在谈论性能时不太谈论的事情。

您应用程序目前最重要的性能问题是什么？这是一个比我们愿意承认的更复杂的问题。也许应用程序设置页面上的五秒首次绘制不是什么大问题，但结账页面上的三秒对于企业和客户来说都是无法忍受的。

因此，是的，性能问题就是这样奇怪；相同指标的结果在不同的上下文中可能意味着不同的内容。而且，根据上下文，有些指标比其他指标更重要。

这正是我对所有这些工具感到兴奋的原因。实时查看用户如何体验应用程序，然后可视化指标随时间的变化——这简直太神奇了。Lighthouse 分数很好，而且不要误会我的意思，它们非常有用。它们只是无法准确衡量用户如何真正使用您的应用程序以及基于您的数据。

这里就是 Sentry 的另一项功能发挥作用的地方。注册并配置好所有内容后，转到性能部分，您将看到哪些事务随着时间的推移变得更好，哪些事务倒退或变慢了

Tony Xiao 是 Sentry 的一名工程师，他写了一篇关于如何使用此功能来调查前端问题的文章。没错：我们使用 Sentry 来衡量我们的 Sentry 工作（哇，盗梦空间）。通过查看“最倒退事务”报告，Tony 能够深入研究触发负面结果的特定事务，并在当时识别出问题。以下是他对此的描述

代码忠实于其作者。这就是为什么与代码进行交流至关重要的原因。这也是为什么性能监控趋势如此有价值的原因：它不仅可以帮助您了解起伏，还可以帮助您指明正确的方向。

无论如何，我并不是想在这里向您推销 Sentry。我更感兴趣的是前端开发领域正在发生的变化，我认为行业中所有这些工具在此刻汇聚在一起非常令人兴奋。感觉我们对性能问题的理解正在提高——语言、工具、技术都在发展，我们的行业正在发生转变。

这是值得庆祝的事情。