使用 Raygun 发现并解决页面加载时间缓慢的问题

在本教程中，我们将重点关注使用 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>