在本教程中，我们将重点介绍如何使用Raygun查找和修复不良的页面加载时间。 但是在进行此操作之前，让我们讨论一下为什么稍长的页面加载时间会如此重要。
要使潜在客户或访问您网站的客户获得良好的第一印象，您可以做的最重要的事情之一就是提高其加载速度。
想象一个客户刚刚从朋友那里听说了您的公司。 您在线销售产品，用户可以通过访问您的网站进行购买。 如果不同的网站页面需要很长时间才能加载，并且您不是专门销售该产品，则客户很有可能会放弃您的网站而转到其他地方。
您不仅在这里错过了第一次销售，而且还错过了拥有忠实客户的机会，该客户将来会购买更多产品。
互联网就是这样-人们离离开您的网站仅几步之遥，而从竞争对手那里购买东西。 更快的加载页面可以使您在竞争中脱颖而出，并增加收入 。
Raygun如何提供帮助？
Raygun依靠真实用户监视见解（RUM Insights）来改善网站的性能和页面加载时间。 术语“真实用户监视”是此处的关键。 您可以使用WebPagetest和Google Page Speed Insights之类的工具来优化单个页面，但是这些结果将不会基于真实的用户数据。 另一方面，Raygun提供的数据基于访问您网站的实际用户。
Raygun还通过告诉您诸如网站的平均页面速度，请求最多的页面和最慢的页面之类的信息，以更有条理的方式显示信息。 这样，您可以优先确定需要首先优化网站的哪个页面或哪个部分。
您还可以查看网站在不同国家/地区或使用不同浏览器的用户的加载速度。 同样，您可以比较移动网站和台式机上网站的速度。
Raygun的另一个优点是它将向您展示该网站对不同用户的表现。 例如，对于您最有价值的客户之一，网站可能加载缓慢。 在这种情况下，您一定想了解它，并在为时已晚之前采取一些措施来改善他们的体验。
在本文的接下来的几节中，我们将学习如何使用Raygun进行所有操作。
将Raygun集成到您的网站
在将Raygun集成到您的网站之前，您需要注册一个帐户 。 此帐户将使您在14天内免费使用所有Raygun功能。
成功注册后，可以单击“ 创建应用程序”按钮来创建新的应用程序。 您可以在下一个屏幕上填写应用程序的名称，然后选中一些框以接收有关错误的通知和真实的用户监视见解。
现在，您只需要选择您的开发平台或框架。 在这种情况下，我们正在使用JavaScript。
最后，您将获得一些代码，这些代码必须添加到要监视的所有页面上。 除了在您的网站上放置以下代码之外，您还可以下载该库的生产或开发版本并自己包含它。
<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>
将以上代码段添加到</head>标记之前，必须将以下代码段放在<body>标记之前。
<script type="text/javascript">
rg4js('apiKey', 'YOUR_API_KEY');
rg4js('enableCrashReporting', true);
rg4js('enablePulse', true);
</script>如果您不再添加任何代码，Raygun现在将开始收集匿名数据。 这意味着您将能够知道您的网站对不同用户的表现如何，但是将无法识别这些用户。
有一个简单的解决此问题的方法。 您所要做的就是在您的网页中添加以下代码，Raygun将负责其余的工作。
rg4js('setUser', {
identifier: 'unique_id',
isAnonymous: false,
email: 'users_email@domain.com',
firstName: 'Firstname',
fullName: 'Firstname Lastname'
});您必须在要跟踪的所有页面中包括这三段代码。 完成后，数据将开始显示在仪表板中供您分析。
查找加载时间短的页面
Raygun仪表板中的“真实用户监视”部分具有许多选项卡，用于以不同格式显示数据。 我们将简要介绍所有这些选项卡，以向您展示如何使用它们中显示的信息来查找加载时间较差的页面。
“ 实时”选项卡将为您实时概述网站的性能。 它具有不同的指标，例如“ 健康评分”，以向您显示该网站当前的运行状况。 您可以在Raygun网站上“ 实时”选项卡的文档中了解有关所有这些指标的更多信息。
它还具有一张世界地图，可以指出您当前活跃用户的国家/地区。 您还将找到不同用户对您的网站的最新请求的列表。 这是显示对我们网站的最新请求的图像。
效果标签具有五个有用的指标，可让您快速浏览网站页面的加载时间。 例如，平均加载时间为1.41秒，意味着50％的页面在1.41秒之前加载。 同样， P90加载时间为6.78秒，可以告诉您网站90％的时间是在6.48秒之前加载。
这应该使您大致了解网站的性能以及最慢的10％用户的速度。
“效果”标签的底部还列出了速度最慢和请求最多的页面。 当您要确定网站的哪些部分需要首先修复时，了解最受欢迎和最慢的页面可能会很有帮助。
即使网站中的所有页面都应尽快加载，但其中某些页面比其他页面更重要。 因此，您可能有兴趣了解网站上特定页面的性能。 您只需在输入字段中键入要查找的页面即可。 这将为您提供有关特定页面的中位数，平均值和P90加载时间的信息。 这是我们网站首页的数据。
您可以使用“ 会话”标签查看与会话相关的信息，例如会话总数，用户总数和会话长度中位数。 会话表将为您提供最近150个会话的快速概览，并提供有关国家/地区，持续时间，总页面浏览量以及会话的最后访问页面的信息。
单击放大镜将为您显示特定会话的更多详细信息，例如用户访问的页面，这些页面的加载时间以及会话期间使用的浏览器/设备。
“ 用户”标签将概述您网站上不同用户的满意度。 当您想了解特定用户如何与您的网站进行交互以及他们的页面加载时间是否超过预期或为什么超出预期时，这将非常有用。
另外还有三个标签可显示有关浏览器，平台和地理位置的所有页面视图的信息。 这样，您将能够知道网页是否仅在特定的浏览器或平台上缓慢加载。 您还将对用户分布有一个大概的了解。 例如，了解您的大多数客户是否来自特定国家或使用特定浏览器会非常方便。
Raygun在“ 地理位置”标签的顶部列出了来自特定大陆的访客所占的百分比。 此后，它提供了具有加载时间分布的映射。 加载时间最慢的国家/地区用红色填充，加载时间较快的国家/地区用绿色填充。
如果您一直在从某个特定国家/地区获得较差的加载时间，那么可能值得您花些时间仔细查看并找出原因。
修正不良的页面加载时间
在上一节中，我们学习了如何使用Raygun收集的所有数据来确定哪些页面需要花费很长时间加载，或者是否有任何国家的页面加载时间比平时更长。
现在该看一下我们如何使用Raygun来发现可能导致特定页面或整个网站加载速度比平常慢的问题了。
改善网站的不良页面加载时间可能是压倒性的，尤其是在网站非常复杂或页面很多的情况下。 问题在于找到需要改进的地方和从哪里开始。
幸运的是，Raygun可以为您提供一些一般见解来修复您的网站。 您可以单击“ Real User Monitoring”菜单下的“ Insights”选项，Raygun会扫描您的网站以查找任何潜在问题。 您可以在Raygun官方文档中找到所有这些规则的列表。 解决所有列出的问题将大大加快您的网站速度。
除了遵循这些一般准则之外，您可能还需要隔离加载缓慢的页面。 隔离它们之后，Raygun可以向您显示解决DNS，延迟，SSL握手等所需的时间。这将使您对可以进行改进以减少页面加载时间的领域有个好主意。 下图应清楚说明。
您还可以过滤数据，以便更准确地了解特定页面的加载时间以及影响该页面的各种因素。 上图显示了您对“关于我们”页面的所有请求的平均延迟时间。 但是，您可以单击顶部的“ 添加过滤器”按钮，仅看到特定国家（例如意大利）的“关于我们”加载时间图。
您还将在底部看到特定页面发出的所有请求。 基本上，您将能够查看为特定页面加载的每个资源的DNS，延迟，SSL，服务器和传输时间，并查看其中是否有罪魁祸首。
一旦找出哪些资源加载时间过长，就可以开始优化页面。
最后的想法
正如您在本教程中看到的那样，Raygun对于希望缩短页面加载时间的组织可以提供很大的帮助。 集成非常容易，成功集成后，数据将开始显示在仪表板中，而无需您的任何干预。
Raygun还具有不同的选项卡来组织收集的数据，以便您可以更轻松，更有效地进行分析。 例如，它可以显示不同国家，浏览器和平台的加载时间。 它还具有过滤器，您可以使用这些过滤器将一组特定的数据与其余数据隔离开来，并进行仔细分析。
如果您或您的公司正在寻找一种易于集成的工具，该工具可以提供有关真实用户如何与您的网站进行交互的深刻见解，那么您绝对应该尝试一下Raygun 。 您不会有任何损失，因为前14天都是免费的！
翻译自: https://code.tutsplus.com/tutorials/how-to-find-and-fix-poor-page-load-times-with-raygun--cms-30961
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
