如何使用Raygun查找和修复糟糕的页面加载时间

在本教程中，我们将专注于使用Raygun查找和修复糟糕的页面加载时间。但在我们这样做之前，让我们讨论一下为什么稍长的页面加载时间会如此重要。

为了给访问您网站的潜在客户或客户留下良好的第一印象，您可以做的最重要的事情之一就是提高其加载速度。

想象一个客户刚刚从朋友那里听说了您的公司。您在线销售产品，用户可以通过访问您的网站购买该产品。如果不同的网站页面需要很长时间才能加载并且您不是专门销售该产品，那么客户很有可能会放弃您的网站并转到其他地方。

您不仅错过了在这里的第一次销售，还错过了拥有忠实客户的机会，这些客户将来会购买更多产品。

互联网就是这样——人们只需点击几下就可以离开您的网站并从您的竞争对手那里购买商品。更快的加载页面可以让您比竞争对手更具优势并增加您的收入。

Raygun 如何提供帮助？

Raygun 依靠 Real User Monitoring Insights (RUM Insights) 来提高网站的性能和页面加载时间。术语“真实用户监控”是这里的关键。您可以使用webpagetest和Google Page Speed Insights等工具来优化单个页面，但这些结果不会基于真实的用户数据。另一方面，Raygun 提供的数据基于访问过您网站的真实用户。

Raygun 还通过告诉您网站的平均页面速度、请求最多的页面和最慢的页面等信息，以更有条理的方式呈现信息。这样，您可以优先考虑需要首先优化网站的哪个页面或部分。

您还可以查看网站为不同***/地区的用户或使用不同浏览器的用户加载的速度。同样，您可以比较您的网站在移动设备和桌面设备上的速度。

Raygun 的另一个优点是它会向您展示网站对不同用户的表现。例如，对于您最有价值的客户之一，该网站可能加载缓慢。在这种情况下，您肯定想了解它并做一些事情来改善他们的体验，以免为时已晚。

我们将在本文接下来的几节中学习如何使用 Raygun 完成所有这些工作。

将 Raygun 集成到您的网站中

在将 Raygun 集成到您的网站之前，您需要注册一个帐户。此帐户可让您在 14 天内免费访问所有 Raygun 功能。

成功注册后，您可以单击“创建应用程序”按钮创建一个新应用程序。您可以在下一个屏幕上为您的应用程序填写名称，然后选中一些框以接收有关错误和真实用户监控见解的通知。

如何使用Raygun查找和修复糟糕的页面加载时间第1张

现在您只需选择您的开发平台或框架。在本例中，我们使用的是javascript。

如何使用Raygun查找和修复糟糕的页面加载时间第2张

最后，您将获得一些必须添加到您要监控的所有页面上的代码。除了将以下代码放在您的网站中，您还可以下载该库的生产或开发版本并自己包含它。

<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 现在将开始收集匿名数据。这意味着您将能够知道您的网站对不同用户的表现如何，但无法识别这些用户。

这个问题有一个简单的解决方法。您所要做的就是在您的webp中添加以下代码，Raygun 将负责其余的工作。

rg4js('setUser', {

  identifier: 'unique_id',

  isAnonymous: false,

  email: 'users_email@domain.com',

  firstName: 'Firstname',

  fullName: 'Firstname Lastname'

});

您必须在要跟踪的所有页面中包含这三段代码。完成后，数据将开始显示在仪表板中供您分析。

查找加载时间短的页面

Raygun 仪表板中的真实用户监控部分有很多选项卡以不同格式显示数据。我们将简要介绍所有这些选项卡，向您展示如何使用其中提供的信息来查找加载时间较短的页面。

如何使用Raygun查找和修复糟糕的页面加载时间第3张

实时选项卡将为您提供您网站的实时性能概览。它具有不同的指标，例如健康评分，可向您展示网站当前的表现。您可以在 Raygun 网站上的 Live 选项卡的文档中阅读有关所有这些指标的更多信息。

它还有一张世界地图，可以指出您当前活跃用户的***/地区。您还将找到不同用户对您网站的最新请求列表。这是一张图片，显示了对我们网站的最新请求。

如何使用Raygun查找和修复糟糕的页面加载时间第4张

性能选项卡有五个有用的指标，可让您快速了解网站页面加载时间。例如，平均加载时间 1.41 秒意味着 50% 的页面在 1.41 秒之前加载。同样，6.78 秒的 P90 加载时间告诉您 90% 的时间，网站在 6.48 秒之前加载。

如何使用Raygun查找和修复糟糕的页面加载时间第5张

这应该让您大致了解网站的性能以及对于最慢的 10% 用户来说有多慢。

性能选项卡的底部还列出了最慢和请求最多的页面。当您想优先考虑需要首先修复网站的哪些部分时，了解最受欢迎和最慢的页面会非常有帮助。

尽管网站中的所有页面都应尽快加载，但其中一些页面比其他页面更重要。因此，您可能有兴趣了解网站上特定页面的性能。您只需在输入字段中键入您要查找的页面即可。这将为您提供有关特定页面的中值、平均和 P90 加载时间的信息。这是我们网站主页的数据。

如何使用Raygun查找和修复糟糕的页面加载时间第6张

您可以使用“会话”选项卡查看与会话相关的信息，例如会话总数、用户总数和中间会话长度。会话表将为您提供最近 150 次会话的快速概览，其中包含***、持续时间、总页面浏览量和会话的最后访问页面等信息。

单击放大镜将显示特定会话的更多详细信息，例如用户访问的页面、这些页面的加载时间以及会话期间使用的浏览器/设备。

用户选项卡将为您提供不同用户对您网站的满意度的概览。当您想了解特定用户如何与您的网站进行交互以及他们的页面加载时间是否或为什么超出预期时，这将非常有用。

还有其他三个选项卡显示有关浏览器、平台和地理方面的所有页面视图的信息。通过这种方式，您将能够知道网页是否仅在特定浏览器或平台上加载缓慢。您还将对用户的分布有一个粗略的了解。例如，了解您的大多数客户是否来自特定***或使用特定浏览器可能非常方便。

Raygun 在Geo选项卡的顶部列出了来自特定大陆的访问者的百分比。之后，它提供了一个包含加载时间分布的地图。加载时间最慢的***用红色填充，加载时间快的***用绿色填充。

如何使用Raygun查找和修复糟糕的页面加载时间第7张

如果您在某个特定***/地区的加载时间一直很差，那么可能值得您花时间仔细查看并找出原因。

修复糟糕的页面加载时间

在上一节中，我们学习了如何使用 Raygun 收集的所有数据来确定哪些页面需要很长时间才能加载，或者是否有任何***的页面加载时间比平时更长。

现在是时候看看我们如何使用 Raygun 来发现可能导致特定页面或整个网站加载速度比平时慢的问题。

改善网站糟糕的页面加载时间可能会让人不知所措，尤其是在网站非常复杂或页面很多的情况下。问题在于找到需要改进的地方以及从哪里开始。

幸运的是，Raygun 可以为您提供一些一般性的见解来修复您的网站。您可以单击Real User Monitoring菜单下的Insights选项，Raygun 将扫描您的网站以查找任何潜在问题。您可以在官方 Raygun 文档中找到所有这些规则的列表。修复所有列出的问题将显着加快您的网站速度。

如何使用Raygun查找和修复糟糕的页面加载时间第8张