如何使用 Raygun 的真实用户监控来定位和修复性能问题

速度和页面加载问题是一些最令人头疼的故障排除问题。导致应用程序崩溃或功能损坏的错误通常更容易处理，也更紧急。另一方面，加载问题缺乏紧迫性，但会给应用程序的最终用户带来极大的烦恼。它们不能被忽视。

如果页面加载速度过慢，大量的网站和 Web 应用程序用户将放弃他们的努力。当用户由于缺乏选择或工作场所的决定而被迫使用加载缓慢的应用程序时，这种缓慢常常是他们唯一能看到或记住的。加载速度慢等性能问题会给所有相关人员带来糟糕的体验。

真实用户监控 (RUM) 工具可以帮助您了解这些问题以及更多。软件团队使用 RUM 工具来

1. 帮助识别和诊断前端性能不佳
2. 监控前端性能趋势
3. 监控真实用户会话中的性能问题

让我们来看看 Raygun 提供的真实用户监控解决方案，并深入了解这些工具如何帮助您定位和解决加载问题。这将帮助您为用户提供快速的浏览体验。

设置真实用户监控

首先，您需要试用 Raygun 真实用户监控。试用期为 14 天免费，套餐起价仅为每月 8 美元。

之后，您将被提示将 Raygun 库包含到您的应用程序中

<script type="text/javascript">
  !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
  (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
  f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
  h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
  e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>

接下来，您需要添加一个配置脚本，该脚本告诉 Raygun 您启用了哪个服务，并提供一个 API 密钥来标识您的应用程序。

<script type="text/javascript">
  rg4js('apiKey', 'YXpPX23Gc6kLpykzoWByg');
  rg4js('enableCrashReporting', true);
  rg4js('enablePulse', true);
</script>

您需要将 API 密钥替换为您自己的密钥，该密钥可以从您的应用程序设置屏幕获取。最后，如果您希望启用用户跟踪，请在前面的脚本之后插入用户跟踪代码段，使其看起来像这样

<script type="text/javascript">
  rg4js('apiKey', 'YXpPX23Gc6DJCykzoWByg');
  rg4js('enableCrashReporting', true);
  rg4js('enablePulse', true);
  rg4js('setUser', {
    identifier: '662607004',
    isAnonymous: false,
    email: 'ronald@raygun.com',
    firstName: 'Ronald',
    fullName: 'Ronald Raygun',
});
</script>

在任何情况下，一旦一切正常，您都可以选择将用户跟踪变量连接到应用程序中当前登录的用户配置文件，将他们的姓名、电子邮件或 ID 添加到这些字段中，而不是占位符。这应该在充分考虑隐私法、GDPR 以及您的应用程序需要遵守的任何其他个人信息法规的情况下进行。在某些情况下，也可以在征得用户同意的情况下进行，以帮助排除故障，如果您不想全局启用去匿名化的每用户跟踪。

无论如何，您应该已经在 Raygun 中接收到应用程序数据了。

调查最慢的请求

Raygun 真实用户监控中的“最慢请求”模块会为您提供特定用户请求的实例级别信息。这可能包括用户地理位置、浏览器、设备、操作系统、时间戳等信息。此外，您还可以看到加载该页面所需的全部请求以及每个请求花费的时间。

在故障排除时，这些请求的计时非常重要。例如，它可以让您验证某些请求是否是异步进行的（或不是），并了解是否有任何一个请求导致延迟并阻塞了其余的请求。

有时，某个请求本身并不慢，但它会阻塞其他请求，而不是异步进行，在这种情况下，应用程序尝试加载的所有其他内容都会累积地变慢。一个小小的延迟会与其他延迟叠加，为您的用户增加大量的加载时间。

此外，您还可以监控 AJAX 请求，这使您可以查看后台加载了哪些数据，并可能找到导致用户体验缓慢的罪魁祸首。

这组信息将让您对哪些请求一直很慢有一个扎实的了解，以及问题是仅出现在某些上下文集的用户身上，还是与使用您网站的所有人表现相似。

监控响应代码趋势

Raygun RUM 中的“响应代码”模块在 XHR/AJAX 调用量大的应用程序中特别有用，或者如果您监控单页应用程序。这些调用是后台发生的，失败时通常不会完全破坏用户体验。然而，它们可能导致速度问题。如果进行大量后台请求，或者更糟的是，这些请求失败并持续反复尝试，这可能导致应用程序用户体验不佳，既因为功能损坏，也因为应用程序的额外缓慢以及由此导致的用户体验不佳。

“响应代码”模块使您可以轻松监控这些 XHR 调用的响应，并跟踪响应代码的总体趋势。您还可以精确定位哪些特定请求比其他请求失败的频率更高，查看更新何时导致失败响应激增，甚至查看哪些 URI 导致最多的响应代码计数。

此外，“响应代码”模块的价值不仅在于查看和处理失败；它还提供了对成功的见解。成功的 XHR 请求的数量以及这些请求是什么可以让你了解你的应用程序的表现如何，用户参与度如何，以及他们在 UI 中的操作。

故障排除和对成功的见解将使您能够为用户创建更流畅的体验，消除加载问题，并加倍努力改进用户认为最重要的应用程序区域。

分析首次绘制指标

Raygun 还围绕“首次绘制”的概念，呈现了以用户为中心的性能指标。

• 首次绘制 (FP) 是一个简单的度量，用于衡量浏览器在加载应用程序时渲染第一个像素所需的时间。
• 首次有内容绘制 (FCP) 是相同的度量，但它不测量第一个像素，而是测量从 DOM 渲染第一个内容所需的时间，这是用户看到的页面正在加载的第一个视觉信号。

对于现代浏览器、快速宽带和构建良好的应用程序，肉眼可能难以区分 FP 和 FCP 之间的任何差异，甚至区分这两者与完全加载的页面之间的差异。然而，当应用程序中有较高比例的用户使用速度较慢的宽带（或低速互联网）、不太最新的移动连接和其他不稳定的连接情况时，这个指标可能会变得非常糟糕。那时，FP 指标可能成为用户与您的产品互动或用户放弃之间的区别。

整合起来

您首先需要做的事情之一是收集足够长时间的数据，以便能够确定系统的正常趋势。加载问题通常是持续存在的。您可以使用 Raygun 的错误跟踪软件立即看到错误和损坏的内容，但对于加载问题，您通常需要查看随时间变化的数据，而不是花费资源尝试解决孤立的事件。

一旦您有了足够的数据，您就可以强烈地感觉到“这类用户在这个应用程序区域存在加载问题”，然后您就可以开始缩小范围，找出需要调整的应用程序部分，以创造客户所期望的流畅体验。

RUM 将显示哪些资源的加载速度最慢，或者哪些资源会阻止其他资源的加载。您可以根据地理区域细分加载问题，可能提出需要 CDN 的问题，或者确定只有访问应用程序特定区域的用户才会遇到某些加载问题。

解决加载缓慢的解决方案

一旦您使用 RUM 完成了研究，并确定了哪些请求和资源是潜在的问题区域，就有各种各样的解决方案来提高 Web 性能，具体取决于确切的问题和相关的资源。

• 缓存经常加载时间长但又不经常更改的内容。
• 如果可能，强制正在同步加载或阻塞渲染的脚本或样式异步加载。在某些情况下，也可以将资源延迟到内容之后加载。
• 缩小或压缩脚本或样式，在某些情况下，合并单独的文件。
• 从 CDN 加载脚本，而不是全部从自己的服务器加载，或者从离客户很远的任何服务器加载。
• 您还可以内联 CSS，这些 CSS 需要在内容渲染到视口上方之前加载，然后其余的 CSS 再加载。

还有许多其他方法可以帮助缩短加载时间，这里没有涵盖，但以上是一些解决用户加载时间问题的最大帮助。

可视化数据 - 解决问题之前和之后

一旦您实施了一个或多个解决方案来解决您面临的问题，您就可以将当前的页面加载趋势与更改实施之前的时期进行比较，并相对快速地看到哪些解决方案有效，哪些解决方案没有显着影响您用户体验的加载时间。

在所有这些情况下，关键是要在修复之前和之后（在许多情况下，在问题发生之前和之后）拥有良好的数据，这也有助于您精确定位问题引入的位置），以及对这些数据的良好可视化。

这正是 Raygun 的真实用户监控所提供的：数据收集和聚合，然后可以以一种方式呈现，让您能够从中得出清晰、可操作的结论，而无需花费数小时研究和尝试找出加载问题的原因。

使用 Raygun，您可以在仪表板中直接“看到”问题，并以您需要的方式呈现。然后，您可以利用可能浪费在查找问题上的时间来“解决”这些问题，让您的客户对您的应用程序更加满意。

Raygun 真实用户监控套餐起价仅为每月 8 美元，是一种经济高效的方式，可以有效识别和诊断前端性能问题。立即注册免费的 14 天试用。