在本教程中，我們將重點關注使用 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>
在結束 標記之前添加上述代碼片段后，您必須將以下代碼片段放置在結束
之前標簽。
<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 可以為您提供一些修復網站的一般見解。您可以單擊真實用戶監控菜單下的見解選項，Raygun 將掃描您的網站以查找任何潛在問題。您可以在官方 Raygun 文檔中找到所有這些規則的列表。解決所有列出的問題將顯著加快您的網站速度。
除了遵循這些一般準則之外，您可能還想隔離加載緩慢的頁面。一旦您隔離了它們，Raygun 就可以向您顯示它們解析 DNS、延遲、SSL 握手等所需的時間。這將使您清楚地了解可以在哪些方面進行改進以減少頁面加載時間。下面的圖片應該可以清楚地說明。
您還可以過濾數據，以便更準確地了解特定頁面的加載時間和各種因素影響它。上圖顯示了向“關于我們”頁面發出的所有請求的平均延遲。但是，您可以點擊頂部的添加過濾器按鈕，只看到意大利等特定國家/地區的“關于我們”加載時間圖表。
您還將在底部看到特定頁面發出的所有請求。基本上，您將能夠查看為特定頁面加載的每個資源的 DNS、延遲、SSL、服務器和傳輸時間，并查看其中是否有任何一個是罪魁禍首。
一旦發現哪些資源加載時間過長，您就可以開始優化您的頁面。
最終想法
正如您在本教程中看到的，Raygun 可以為希望縮短頁面加載時間的組織提供很大幫助。集成非常容易，集成成功后，數據將開始顯示在儀表板中，無需您進行任何干預。
Raygun 還具有不同的選項卡來組織收集的數據，以便您可以更輕松、更高效地進行分析。例如，它可以向您顯示不同國家/地區、瀏覽器和平臺的加載時間。它還具有過濾器，您可以使用它們將特定數據集與其余數據隔離開來并對其進行仔細分析。
如果您或您的公司正在尋找一款易于集成的工具，可以提供有關真實用戶如何與您的網站交互的深入見解，那么您絕對應該嘗試一下 Raygun。您不會有任何損失，因為前 14 天免費！
當您在這里時，請查看我們有關 Raygun 的其他一些教程！
