.jpg)
在本教程中，我們將重點(diǎn)關(guān)注使用 raygun 查找和修復(fù)不良的頁(yè)面加載時(shí)間。但在此之前，我們先討論一下為什么稍長(zhǎng)的頁(yè)面加載時(shí)間會(huì)造成如此大的影響。
為了給訪問(wèn)您網(wǎng)站的潛在客戶(hù)或客戶(hù)留下良好的第一印象，您可以做的最重要的事情之一就是提高其加載速度。
想象一下一位客戶(hù)剛剛從朋友那里聽(tīng)說(shuō)了您的公司。您在線銷(xiāo)售產(chǎn)品，用戶(hù)可以通過(guò)訪問(wèn)您的網(wǎng)站進(jìn)行購(gòu)買(mǎi)。如果不同的網(wǎng)站頁(yè)面需要很長(zhǎng)時(shí)間才能加載，并且您并非專(zhuān)門(mén)銷(xiāo)售該產(chǎn)品，那么客戶(hù)很可能會(huì)放棄您的網(wǎng)站并前往其他地方。
您不僅錯(cuò)過(guò)了在這里的第一次銷(xiāo)售，還錯(cuò)過(guò)了擁有忠實(shí)客戶(hù)的機(jī)會(huì)，他們將來(lái)會(huì)購(gòu)買(mǎi)更多產(chǎn)品。
這就是互聯(lián)網(wǎng)的特點(diǎn)——人們只需點(diǎn)擊幾下就可以離開(kāi)您的網(wǎng)站并從您的競(jìng)爭(zhēng)對(duì)手那里購(gòu)買(mǎi)東西。更快的頁(yè)面加載速度可以讓您比競(jìng)爭(zhēng)對(duì)手更具優(yōu)勢(shì)并增加您的收入。
Raygun 如何提供幫助？
Raygun 依靠真實(shí)用戶(hù)監(jiān)控洞察 (RUM Insights) 來(lái)提高網(wǎng)站性能和頁(yè)面加載時(shí)間。術(shù)語(yǔ)“真實(shí)用戶(hù)監(jiān)控”是這里的關(guān)鍵。您可以使用 WebPagetest 和 Google Page Speed Insights 等工具來(lái)優(yōu)化各個(gè)頁(yè)面，但這些結(jié)果不會(huì)基于真實(shí)的用戶(hù)數(shù)據(jù)。另一方面，Raygun 提供的數(shù)據(jù)基于訪問(wèn)您網(wǎng)站的真實(shí)用戶(hù)。
Raygun 還以更有條理的方式呈現(xiàn)信息，告訴您網(wǎng)站的平均頁(yè)面速度、請(qǐng)求最多的頁(yè)面和最慢的頁(yè)面等信息。這樣，您就可以?xún)?yōu)先考慮網(wǎng)站的哪個(gè)頁(yè)面或部分需要首先優(yōu)化。
您還可以了解不同國(guó)家/地區(qū)的用戶(hù)或使用不同瀏覽器的用戶(hù)的網(wǎng)站加載速度。同樣，您可以比較移動(dòng)網(wǎng)站和桌面網(wǎng)站的速度。
Raygun 的另一個(gè)優(yōu)點(diǎn)是它會(huì)向您展示網(wǎng)站對(duì)于不同用戶(hù)的表現(xiàn)。例如，您最有價(jià)值的客戶(hù)之一的網(wǎng)站可能加載緩慢。在這種情況下，您肯定想了解這一點(diǎn)，并在為時(shí)已晚之前采取一些措施來(lái)改善他們的體驗(yàn)。
我們將在本文接下來(lái)的幾節(jié)中學(xué)習(xí)如何使用 Raygun 完成所有這些工作。
將 Raygun 集成到您的網(wǎng)站
在將 Raygun 集成到您的網(wǎng)站之前，您需要注冊(cè)一個(gè)帳戶(hù)。通過(guò)此帳戶(hù)，您可以在 14 天內(nèi)免費(fèi)使用 Raygun 的所有功能。
注冊(cè)成功后，您可以單擊創(chuàng)建應(yīng)用程序按鈕來(lái)創(chuàng)建新應(yīng)用程序。您可以在下一個(gè)屏幕上填寫(xiě)應(yīng)用程序的名稱(chēng)，然后選中一些復(fù)選框以接收有關(guān)錯(cuò)誤和真實(shí)用戶(hù)監(jiān)控見(jiàn)解的通知。
現(xiàn)在您只需選擇您的開(kāi)發(fā)平臺(tái)或框架。在本例中，我們使用 JavaScript。
最后，您將獲得一些代碼，您必須將其添加到您想要監(jiān)控的所有頁(yè)面上。您還可以下載該庫(kù)的生產(chǎn)或開(kāi)發(fā)版本并自行包含它，而不是將以下代碼放置在您的網(wǎng)站中。
<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>
在結(jié)束 標(biāo)記之前添加上述代碼片段后，您必須將以下代碼片段放置在結(jié)束
之前標(biāo)簽。
<script type="text/javascript"> rg4js('apiKey', 'YOUR_API_KEY'); rg4js('enableCrashReporting', true); rg4js('enablePulse', true); </script>
如果您不再添加任何代碼，Raygun 現(xiàn)在將開(kāi)始收集匿名數(shù)據(jù)。這意味著您將能夠了解您的網(wǎng)站對(duì)不同用戶(hù)的表現(xiàn)如何，但無(wú)法識(shí)別這些用戶(hù)。
這個(gè)問(wèn)題有一個(gè)簡(jiǎn)單的解決辦法。您所要做的就是在網(wǎng)頁(yè)中添加以下代碼，Raygun 將處理剩下的事情。
rg4js('setUser', { identifier: 'unique_id', isAnonymous: false, email: 'users_email@domain.com', firstName: 'Firstname', fullName: 'Firstname Lastname' });
您必須將這三段代碼包含在您想要跟蹤的所有頁(yè)面中。完成后，數(shù)據(jù)將開(kāi)始顯示在儀表板中供您分析。
查找加載時(shí)間較差的頁(yè)面
Raygun 儀表板中的真實(shí)用戶(hù)監(jiān)控部分有很多選項(xiàng)卡，可以以不同的格式呈現(xiàn)數(shù)據(jù)。我們將簡(jiǎn)要瀏覽所有這些選項(xiàng)卡，向您展示如何使用其中提供的信息來(lái)查找加載時(shí)間較差的頁(yè)面。
實(shí)時(shí)標(biāo)簽將為您提供網(wǎng)站性能的實(shí)時(shí)概覽。它具有不同的指標(biāo)，例如健康評(píng)分，可以向您顯示網(wǎng)站當(dāng)前的表現(xiàn)。您可以在 Raygun 網(wǎng)站上“實(shí)時(shí)”選項(xiàng)卡的文檔中閱讀有關(guān)所有這些指標(biāo)的更多信息。
它還有一張世界地圖，指出您當(dāng)前所在的國(guó)家/地區(qū) 活躍用戶(hù)。您還可以找到最近向您提出的請(qǐng)求的列表 不同用戶(hù)的網(wǎng)站。下面的圖片顯示了我們網(wǎng)站的最新請(qǐng)求。
性能選項(xiàng)卡有五個(gè)有用的指標(biāo)，可讓您快速概覽網(wǎng)站頁(yè)面加載時(shí)間。例如，中位加載時(shí)間為 1.41 秒，這意味著 50% 的頁(yè)面在 1.41 秒之前加載。同樣，P90 加載時(shí)間為 6.78 秒，表明 90% 的情況下，網(wǎng)站會(huì)在 6.48 秒之前加載。
這應(yīng)該可以讓您大致了解網(wǎng)站的性能以及最慢的 10% 用戶(hù)的速度有多慢.
性能選項(xiàng)卡底部還有一個(gè)最慢和請(qǐng)求最多的頁(yè)面的列表。當(dāng)您想要確定網(wǎng)站的哪些部分需要首先修復(fù)的優(yōu)先級(jí)時(shí)，了解最受歡迎和最慢的頁(yè)面會(huì)非常有幫助。
盡管網(wǎng)站中的所有頁(yè)面都應(yīng)盡快加載，但其中一些頁(yè)面比其他頁(yè)面更重要。因此，您可能有興趣了解網(wǎng)站上特定頁(yè)面的性能。您只需在輸入字段中輸入您要查找的頁(yè)面即可完成此操作。這將為您提供有關(guān)特定頁(yè)面的中位數(shù)、平均值和 P90 加載時(shí)間的信息。這是我們網(wǎng)站主頁(yè)的數(shù)據(jù)。
您可以使用會(huì)話選項(xiàng)卡查看與會(huì)話相關(guān)的信息，例如會(huì)話總數(shù)、用戶(hù)總數(shù)以及會(huì)話時(shí)長(zhǎng)中位數(shù)。會(huì)話表將為您提供最近 150 個(gè)會(huì)話的快速概覽，其中包含國(guó)家/地區(qū)、持續(xù)時(shí)間、總頁(yè)面瀏覽量以及會(huì)話的上次訪問(wèn)頁(yè)面等信息。
單擊放大鏡將向您顯示特定會(huì)話的更多詳細(xì)信息，例如用戶(hù)訪問(wèn)的頁(yè)面、這些頁(yè)面的加載時(shí)間以及會(huì)話期間使用的瀏覽器/設(shè)備。
用戶(hù)標(biāo)簽將為您提供不同用戶(hù)對(duì)您網(wǎng)站的滿(mǎn)意度的概覽。當(dāng)您想了解特定用戶(hù)如何與您的網(wǎng)站交互以及他們的頁(yè)面加載時(shí)間是否或?yàn)楹纬^(guò)預(yù)期時(shí)，這會(huì)非常有用。
還有其他三個(gè)選項(xiàng)卡可顯示有關(guān)瀏覽器、平臺(tái)和地理位置的所有頁(yè)面視圖的信息。這樣您就可以知道網(wǎng)頁(yè)是否僅在特定瀏覽器或平臺(tái)上加載緩慢。您還將對(duì)用戶(hù)的分布有一個(gè)粗略的了解。例如，了解您的大多數(shù)客戶(hù)是否來(lái)自特定國(guó)家/地區(qū)或使用特定瀏覽器會(huì)非常方便。
Raygun 在地理位置標(biāo)簽頂部列出了來(lái)自特定大陸的訪問(wèn)者百分比。之后，它提供了一個(gè)包含加載時(shí)間分布的地圖。加載時(shí)間最慢的國(guó)家/地區(qū)用紅色填充，加載時(shí)間較快的國(guó)家/地區(qū)用綠色填充。
如果您在某個(gè)特定國(guó)家/地區(qū)的加載時(shí)間始終很慢，則可能值得您花時(shí)間仔細(xì)查看并找出答案原因。
修復(fù)頁(yè)面加載時(shí)間不佳的問(wèn)題
在上一節(jié)中，我們學(xué)習(xí)了如何使用 Raygun 收集的所有數(shù)據(jù)來(lái)確定哪些頁(yè)面加載時(shí)間較長(zhǎng)，或者是否有任何國(guó)家/地區(qū)的頁(yè)面加載時(shí)間比平常長(zhǎng)。
現(xiàn)在是時(shí)候看看我們?nèi)绾问褂?Raygun 來(lái)發(fā)現(xiàn)可能導(dǎo)致特定頁(yè)面或整個(gè)網(wǎng)站加載速度比平時(shí)慢的問(wèn)題了。
改善網(wǎng)站糟糕的頁(yè)面加載時(shí)間可能會(huì)非常困難，尤其是當(dāng)網(wǎng)站非常復(fù)雜或有很多頁(yè)面時(shí)。麻煩在于找到需要改進(jìn)的地方以及從哪里開(kāi)始。
幸運(yùn)的是，Raygun 可以為您提供一些修復(fù)網(wǎng)站的一般見(jiàn)解。您可以單擊真實(shí)用戶(hù)監(jiān)控菜單下的見(jiàn)解選項(xiàng)，Raygun 將掃描您的網(wǎng)站以查找任何潛在問(wèn)題。您可以在官方 Raygun 文檔中找到所有這些規(guī)則的列表。解決所有列出的問(wèn)題將顯著加快您的網(wǎng)站速度。
除了遵循這些一般準(zhǔn)則之外，您可能還想隔離加載緩慢的頁(yè)面。一旦您隔離了它們，Raygun 就可以向您顯示它們解析 DNS、延遲、SSL 握手等所需的時(shí)間。這將使您清楚地了解可以在哪些方面進(jìn)行改進(jìn)以減少頁(yè)面加載時(shí)間。下面的圖片應(yīng)該可以清楚地說(shuō)明。
您還可以過(guò)濾數(shù)據(jù)，以便更準(zhǔn)確地了解特定頁(yè)面的加載時(shí)間和各種因素影響它。上圖顯示了向“關(guān)于我們”頁(yè)面發(fā)出的所有請(qǐng)求的平均延遲。但是，您可以點(diǎn)擊頂部的添加過(guò)濾器按鈕，只看到意大利等特定國(guó)家/地區(qū)的“關(guān)于我們”加載時(shí)間圖表。
您還將在底部看到特定頁(yè)面發(fā)出的所有請(qǐng)求?；旧?，您將能夠查看為特定頁(yè)面加載的每個(gè)資源的 DNS、延遲、SSL、服務(wù)器和傳輸時(shí)間，并查看其中是否有任何一個(gè)是罪魁禍?zhǔn)住?/p>
一旦發(fā)現(xiàn)哪些資源加載時(shí)間過(guò)長(zhǎng)，您就可以開(kāi)始優(yōu)化您的頁(yè)面。
最終想法
正如您在本教程中看到的，Raygun 可以為希望縮短頁(yè)面加載時(shí)間的組織提供很大幫助。集成非常容易，集成成功后，數(shù)據(jù)將開(kāi)始顯示在儀表板中，無(wú)需您進(jìn)行任何干預(yù)。
Raygun 還具有不同的選項(xiàng)卡來(lái)組織收集的數(shù)據(jù)，以便您可以更輕松、更高效地進(jìn)行分析。例如，它可以向您顯示不同國(guó)家/地區(qū)、瀏覽器和平臺(tái)的加載時(shí)間。它還具有過(guò)濾器，您可以使用它們將特定數(shù)據(jù)集與其余數(shù)據(jù)隔離開(kāi)來(lái)并對(duì)其進(jìn)行仔細(xì)分析。
如果您或您的公司正在尋找一款易于集成的工具，可以提供有關(guān)真實(shí)用戶(hù)如何與您的網(wǎng)站交互的深入見(jiàn)解，那么您絕對(duì)應(yīng)該嘗試一下 Raygun。您不會(huì)有任何損失，因?yàn)榍?14 天免費(fèi)！
當(dāng)您在這里時(shí)，請(qǐng)查看我們有關(guān) Raygun 的其他一些教程！
.png)
