如何利用Raygun的真实用户监视来查找和解决性能问题（译文）

原文地址：https://www.codeproject.com/Articles/5281733/How-to-Locate-and-Fix-Performance-Issues-with-Rayg

原文作者：Jeffrey Lee Smith

译文由本站翻译

前言

A Real User Monitoring (RUM) tool can help give visibility into problems like pages loading too slowly. 实时用户监视(RUM)工具可以帮助您查看页面加载速度过慢等问题. Here we’ll take a look at the Real User Monitoring solution that Raygun provides, and dive into how those tools can help you to locate and resolve loading issues. 在这里,我们将了解Raygun提供的Real User Monitoring解决方案,并深入研究这些工具如何帮助您查找和解决加载问题. Speed and page loading issues are some of the most frustrating issues to troubleshoot. Errors that crash applications or break functionality are often both easier and more urgent to deal with. Loading issues, on the other hand, lack that urgency, but cause great annoyance to end users of your application. They can’t be ignored.

速度和页面加载问题是需要解决的最令人沮丧的问题.导致应用程序崩溃或功能中断的错误通常更容易处理,也更加紧急.另一方面,加载问题没有那么紧迫性,但是会给应用程序的最终用户带来极大的烦恼.它们不容忽视.

A large percentage of users of websites and web apps will abandon their efforts if the pages load too slowly. When users are forced to use slow-loading applications due to lack of choice, or workplace decisions, the slowness is often all they see or remember. Performance issues like slow loading pages cloud the entire experience for everyone involved.

如果网页加载速度太慢,大量的网站和Web应用程序用户将放弃他们的努力.当由于缺乏选择或工作场所决定而被迫使用缓慢加载的应用程序时,缓慢通常是他们所看到或记住的.诸如页面加载缓慢之类的性能问题使所涉及的所有人的整个体验蒙上了一层阴影.

A Real User Monitoring (RUM) tool can help give visibility into these problems and more. Software teams use RUM tools to:

一个真实用户监视(RUM)工具有助于提高对这些问题以及更多问题的了解.软件团队使用RUM工具来:

Let’s take a look at the Real User Monitoring solution that Raygun provides, and dive into how those tools can help you to locate and resolve loading issues. This will help you to provide a fast browsing experience for your users.

让我们看一下Raygun提供的Real User Monitoring解决方案,并深入研究这些工具如何帮助您查找和解决加载问题.这将帮助您为用户提供快速浏览体验.

Set up Real User Monitoring(设置真实用户监控)

Firstly, you’ll need to take a trial of Raygun Real User Monitoring. The trial is free for 14-days, and plans start from just $8 per month.

首先,您需要试用Raygun Real User Monitoring.试用期为14天,免费,计划每月仅需$ 8.

From there, you’ll be prompted to include the Raygun library in your application:

从那里,将提示您在应用程序中包含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>

Next, you’ll need to add a configuration script that tells Raygun what service you are enabling, and presents an API key to identify your application.

接下来,您需要添加一个配置脚本,该脚本告诉Raygun您正在启用什么服务,并提供一个API密钥来标识您的应用程序.

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

You’ll want to replace the API key with your own, which you can get from your Application Settings screen. Lastly, if you wish to enable user tracking, insert a user tracking snippet at the end of the previous one, making it now look similar to this:

您需要用自己的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>

Once you have everything working, you can, if you choose, connect the user tracking variables to the currently logged in user profile in your app, adding their name, email, or ID to these fields rather than the placeholders. This should be done with all consideration for privacy laws, GDPR, and any other personal information regulations your application needs to comply with. It could also be done in individual circumstances, with user permission, in order to help troubleshoot problems, if you didn’t wish to enable de-anonymized per-user tracking globally.

一旦一切正常,您可以选择将用户跟踪变量连接到应用程序中当前登录的用户配置文件,然后将其名称,电子邮件或ID添加到这些字段中,而不是占位符中.应当在考虑隐私法律,GDPR和您的应用程序需要遵守的任何其他个人信息法规的前提下进行此操作.如果您不希望在全球范围内启用基于匿名的每用户跟踪功能,也可以在个别情况下获得用户许可,以帮助解决问题.

In any case, there we have it, you should be receiving application data in Raygun now.

无论如何,我们已经有了它,您现在应该在Raygun中接收应用程序数据.

Investigate Slowest Requests(调查最慢的请求)

The Slowest Requests module in Raygun Real User Monitoring brings you instance-level information about any particular request by a user. This can include information such as the user’s geography, browser, device, operating system, timestamps, and more. In addition, you can also see all of the requests that were made in order to load that page for the user, and the time taken for each.

Raygun Real User Monitoring中的Slowest Requests模块带给您实例级有关用户的任何特定请求的信息.其中可以包括用户的地理位置,浏览器,设备,操作系统,时间戳等信息.此外,您还可以查看为向用户加载该页面而发出的所有请求,以及每个请求花费的时间.

The timing of these requests can be of great importance when troubleshooting. It can allow you to, for example, verify that certain requests are being made asynchronously (or not), and to understand if any one request is causing a delay and blocking the rest of your requests.

在进行故障排除时,这些请求的时间非常重要.例如,它可以让您验证某些请求是异步发出的(或不是),并了解是否有任何一个请求引起延迟并阻止了其余请求.

Sometimes a particular request is not all that slow, but it is blocking other requests instead of occurring asynchronously, in which case everything else that the application is trying to load will be cumulatively slower. One small delay can stack with others to add a great amount of loading time for your users.

有时,一个特定的请求并没有那么慢,但是它阻止了其他请求,而不是异步发生,在这种情况下,应用程序尝试加载的所有其他内容都将逐渐变慢.一小段延迟会与其他延迟叠加在一起,从而为用户增加大量的加载时间.

Additionally, you will also be able to monitor AJAX requests, which allows you to see which bits of data are loading behind the scenes and perhaps locate a culprit that is making the user experience feel slow.

此外,您还可以监视AJAX请求,这使您可以查看幕后正在加载哪些数据,并可能找出导致用户体验缓慢的罪魁祸首.

This set of information will give you a solid understanding of which requests are consistently slow, and whether the problem is only seen by some contextual set of users, or if it is behaving similarly for everyone who uses your site.

这组信息将使您深入了解哪些请求持续缓慢,以及该问题是否仅由上下文相关的一组用户看到,或者对于使用您网站的每个人而言,其行为是否相似.

Monitor Response Code Trends(监视响应代码趋势)

The Response Codes module in Raygun RUM is particularly useful in applications with a high amount of XHR/AJAX calls or if you monitor single-page applications. These calls happen behind the scenes, and often do not entirely break the user experience upon failing. They can, however, cause speed issues. If there are a lot of background requests being made, or worse, failing and continuing to repeatedly be tried again, this could lead to a subpar experience for the users of the application, both because of the broken functionality and because of the added slowness of the application and resulting user experience letdowns.

Raygun中的响应代码模块 RUM在具有大量XHR/AJAX调用的应用程序中或监视单页应用程序时特别有用.这些呼叫发生在幕后,并且通常不会在失败时完全破坏用户体验.但是,它们可能导致速度问题.如果有很多后台请求,或者更糟糕的是,失败并继续反复尝试,这可能会导致应用程序用户体验欠佳,这既是由于功能中断,又是由于添加速度较慢所致.应用程序以及由此带来的用户体验下降.

The Response Codes module allows you to easily monitor the responses of those XHR calls, and keep track of the general trend of response codes. You can also pinpoint particular requests that fail more often than others, see when an update causes a spike in failure responses, and even see which URIs cause the most response code counts.

响应代码模块使您可以轻松监视那些XHR呼叫的响应,并跟踪响应代码的总体趋势.您还可以查明失败次数最多的特定请求,查看更新何时导致失败响应激增,甚至查看哪些URI导致响应代码计数最多.

Additionally, the Response Codes module provides value beyond just seeing and dealing with failures; it also gives you insight into successes. The amount of successful XHR requests and what those requests were can give you a sense of how your application is doing, how engaged the users are, and what they are doing while in the UI.

此外,“响应代码"模块提供的价值不仅仅在于查看和处理故障.它还使您洞悉成功.成功的XHR请求的数量以及这些请求的内容可以使您了解应用程序的运行情况,用户的参与程度以及用户在UI中的运行情况.

Both the troubleshooting and the insight into successes will allow you to create a more streamlined experience for your users, eliminate load problems, and double down efforts to improve areas of the application that your users find to be the most important.

故障排除和对成功的洞察力都将使您能够为用户创造更简化的体验,消除负载问题,并加倍努力以改善用户认为最重要的应用程序领域.

Analyze First Paint Metrics(分析第一个绘画指标)

Raygun also surfaces user-centric performance metrics around the concept of “First Paint”.

Raygun还围绕” First Paint“的概念浮出水面,以用户为中心的性能指标. .

• First Paint (FP) (头漆(FP))
• First Contentful Paint (FCP) (首次合格涂料(FCP))

With modern-day browsers, fast broadband, and a well-built application, it is possible that the naked eye could have trouble perceiving any differences at all between FP and FCP, or even between either of those and the fully loaded page. Where this metric can become devastating, though, is in applications with a higher percentage of users who are on slower broadband (or lower speed internet), less current mobile connections, and other precarious connectivity situations. Then, the FP metrics can become the difference between a user who engages with your product or a user who walks away.

使用现代的浏览器,快速的宽带和完善的应用程序,有可能肉眼无法察觉FP和FCP之间,甚至两者与完全加载的页面之间的任何差异.但是,在具有较低百分比的宽带(或较低速度的Internet)的用户中,较高比例的应用程序,较少的当前移动连接以及其他不稳定的连接情况下,该指标可能会带来灾难性的后果.然后,FP指标可以成为与您的产品互动的用户或走开的用户之间的区别.

Put It All Together(放在一起)

One of the first things you’ll need to do is gather data for a long enough period of time to be able to ascertain what the normal trends look like for your system. Load issues are often going to be consistent and pervasive. You will be able to see errors and broken things immediately using Raygun’s Error Tracking software, but for load issues, you will often want to look at data over time and not spend resources trying to solve isolated incidents.

您需要做的第一件事就是收集足够长的时间的数据,以便确定系统的正常趋势.负载问题通常是一致且普遍的.使用Raygun的错误跟踪软件,您将能够立即看到错误和损坏的东西,但是会遇到加载问题,您通常会希望随着时间的推移查看数据,而不是花费资源来尝试解决孤立的事件.

Once you have enough data to have a strong feeling that “this type of user has loading issues in this area of the application” you can begin to zero in on the parts of the application that need adjusted in order to create that snappy experience that the customer is looking for.

一旦有了足够的数据就可以强烈感觉到"这种类型的用户在应用程序的此区域中存在加载问题”,就可以开始对需要调整的应用程序部分进行归零,以创建那种快速的体验.客户正在寻找.

RUM will show you which requests for which resources are the slowest, or which of those block loading others. You’ll be able to segment loading issues to geographic regions, raising questions of the need for a CDN, perhaps, or to determine that only users accessing a particular area of the application experience certain loading issues.

RUM将向您显示哪些请求的资源最慢,或者哪些请求加载其他资源.您将能够将加载问题划分到各个地理区域,从而提出是否需要CDN的问题,或者确定只有访问应用程序特定区域的用户才会遇到某些加载问题.

Solutions for Slow Load Times(缓慢加载时间的解决方案)

Once you have done your research using RUM and have determined which requests and resources are the potential trouble areas, there are a variety of solutions to improve web performance out there, depending on the exact problem and the resource in question:

使用RUM完成研究并确定哪些请求和资源是潜在的麻烦区域后,可以使用多种解决方案来[改善Web性能](https://raygun.com/learn/the-ultimate-guide-到网络性能？utm_medium =sponsorpost＆utm_source =codeproject＆utm_campaign =devmedia＆utm_term =rum＆utm_content =article),具体取决于确切的问题和相关资源:

There are many other ways to help load times that we aren’t covering here, but the above are a few of the biggest aids to resolving load times for users.

我们没有在这里介绍许多其他帮助提高加载时间的方法,但是以上方法是解决用户加载时间的最大帮助.

Visualize Data - Before Resolving Problems and After(可视化数据-解决问题之前和之后)

Once you’ve implemented one or more of these solutions for the problems you’re facing, you can compare the current page load trends with those from a period of time before the changes were implemented, and see fairly quickly which solutions worked, and which ones did not significantly impact the load times that your users are experiencing.

在针对所面临的问题实施了这些解决方案中的一个或多个之后,您可以将当前的页面加载趋势与实施更改之前的一段时间内的趋势进行比较,并迅速查看哪些解决方案有效,哪些解决方案有效不会明显影响用户的加载时间.

The key in all of these cases is to have good data before and after a fix (and in many cases, before and after a problem occurs, which can also help you pinpoint where the problem was introduced) and good visualization of that data.

在所有这些情况下,关键是在修复之前和之后(在许多情况下,在问题发生之前和之后都具有良好的数据,这也可以帮助您查明问题出在何处)和该数据的良好可视化.

That’s exactly what Raygun’s Real User Monitoring is providing: data collection and aggregation which can then be presented in such a way that you can draw clear, actionable conclusions from it without spending hours upon hours researching and attempting to find the cause of loading issues.

这正是Raygun的真实用户监控所提供的:数据收集和汇总,然后以一种方式呈现,您可以从中得出清晰,可操作的结论,而无需花费大量时间进行研究并尝试查找加载问题的原因.

With Raygun, you can just see the problems right there in the dashboard, presented in just the way you need it. You can then use the time you might have wasted hunting issues to instead solve those issues, and make your customers even happier with your applications.

有了Raygun,您就可以在仪表板中以您需要的方式看到问题.然后,您可以利用浪费时间寻找问题来解决这些问题,并使客户对您的应用程序更加满意.

With plans starting at just $8 per month, Raygun Real User Monitoring is a cost-effective way of effectively identifying and diagnosing front-end performance issues. Sign up for a free 14-day trial today.

计划每月起价仅为8美元,Raygun Real User Monitoring是有效识别和诊断前端性能问题的一种经济高效的方式. 今天就免费注册14天.

许可

本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。