使用 WebPageTest 進行性能分析

已發表: 2021-05-19

一個快速的網站現在是絕對必須的。在移動時代，對於住院消費者而言，緩慢的網站可能是您的業務興旺或失敗之間的區別。那麼，您究竟如何測試您的網站的速度，以及如何確定可能會減慢網站速度的任何問題？

在本文中，我們將介紹一個名為 WebPageTest 的流行工具。此測量工具提供了大量詳細的統計數據和數據，可用於從性能角度確定您網站中可以改進的區域。然而，提供的信息量之多可能有點壓倒性。不用擔心……我們將逐步分解如何使用 WebPageTest，以便清楚如何充分利用這個免費工具。

WebPageTest 入門

首先，前往webpagetest.org 開始。佈局非常清晰，您會立即看到一個框，您可以在其中輸入您的網站網址。

一開始您可以選擇……您是使用默認的“高級測試”選項卡還是前往“簡單測試”選項卡？好吧，簡單測試功能非常適合快速瀏覽您的網站，但在本文中，我們將查看高級測試選項卡。

高級測試設置

向下滾動頁面，您將看到一個測試位置下拉菜單。這是不言自明的。您要選擇的位置是最接近目標受眾所在位置的位置。如果他們位於澳大利亞，那麼在英國倫敦進行測試就沒有多大意義。本練習的目的是了解我們的網站如何為用戶提供服務。

有很多位置，但有些位置以用於測試的瀏覽器的形式提供了比其他位置更多的測試選項。同樣，您想嘗試選擇一個可能被您的目標受眾使用的產品。要查看訪問您網站的瀏覽器的一些統計信息，您可以使用 Google Analytics 等工具。

您可以選擇的其他非常酷的設置是連接等。因此，這將是最終用戶的設備連接到互聯網的方式。單擊“連接”旁邊的下拉菜單，您將看到包含 3G 連接（慢速或快速）的選項。這真的很簡潔，因為它讓您對您的受眾將如何體驗您的網站有一種真實的感覺。

另一個非常有用的設置是“重複查看”選項。啟用此選項意味著站點將在首次加載後重新測試，這有助於顯示您在站點上啟用的任何緩存的影響。

您可能想要探索大量更高級的選項。對於我們大多數人來說，除非您真正深入地測試您的網站，否則上述設置就足夠了。對於那些想要了解更多關於可用的真正細節設置的人，請查看 WebPageTest 文檔。

記下您更改的任何設置。重要的是，在測試和優化階段，您要繼續使用相同的設置重新測試，否則您將扭曲您獲得的結果。準備好後，點擊“開始測試”按鈕，然後坐下來等待結果（通常需要大約一分鐘）。

第一個屏幕

在此示例中，我們使用了 Apple 的網站 (apple.com)，並通過來自英國倫敦的快速 3G 連接對其進行了測試。初步結果如下所示：

看看右上角，您會看到 7 個彩色框，它們提供了頁面執行情況的初始“提醒”概述。讓我們來看看這些是什麼。

方框 1 – 安全評分

這是 WebPageTest 最近提供的一項功能，它實際上是與 Snyk 的集成，可以深入了解網站的安全性。如果您單擊彩色框，您將被帶到 synk.io 網站，其中包含從安全角度對相關網站的詳細分析。特別值得注意的是在客戶端和服務器之間交換的 HTTP 安全標頭，以定義通信的安全細節。最重要的是 Strict-Transport-Security、Content-Security-Policy、X-Frame-Options。

如果您的網站缺少任何重要的安全標頭，您將在 Synk 網站上收到通知。

方框 2 – 第一個字節時間

第二個框提供第一個字節時間（也稱為第一個字節時間或 TTFB）。這是服務器將第一個數據字節響應回客戶端請求所用的時間。理想情況下，您的目標是低於 300 毫秒。此值與服務器更相關，與呈現網站文件所消耗的時間無關。例如，它可能會受到慢速 DNS 服務器或緩存不足的影響。

此時請務必注意，如果您啟用了緩存，則應重新運行網頁測試，以便測量緩存的內容。事實上，建議您至少運行 3 次測試，以確保結果完全反映您網站上的緩存內容。

第一個字節時間是三個值的總和：發送 HTTP 請求所需的時間、服務器處理的時間和服務器需要將第一個字節發送回客戶端的時間。您可以通過單擊框獲得更多詳細信息：

正如我們所看到的，Apple 網站在測試的這個特定部分中表現不佳。

建立此連接後，即可開始交付資源。 TTFB 緩慢的最常見原因是網絡問題、Web 服務器配置、可能的服務器磁盤 I/O 和 RAM 問題。

方框 3 – 保持活力

“Keep-alive Enabled”框顯示了 keep-alive HTTP 標頭的狀態。啟用此標頭後，將使用同一連接傳輸數據，否則必須為每個需要傳輸的文件創建一個新連接。 Keep-alive 在大多數情況下默認啟用，通常是服務器端設置。如果您需要自己啟用它，您可以編輯您的.htaccess文件並插入下面的代碼

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

方框 4 – 壓縮傳輸

Compress Transfer 值表示 Gzip 壓縮的狀態。這是一種用於實時壓縮和稍後解壓縮靜態文件的技術。這樣，由於文件大小減小，傳輸時間會減少。如果您的服務器提供商默認不應用此技術，您可以通過為每種類型的文件指定相應的規則來自己執行，如下所示：

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

同樣，單擊相關的彩色框將帶您進入詳細的概述部分，這樣您就可以看到您的網站上到底發生了什麼。

方框 5 – 壓縮圖像

壓縮圖像框是相當不言自明的。單擊它，它將向您顯示可以更好地壓縮哪些圖像。

在這種情況下，WebPageTest 已經確定了它認為可以成功壓縮的三個圖像，從而進一步節省了 54kb 的無需傳輸的數據。這聽起來可能並不多，但在移動設備上，您可以節省的每一 kb 確實會有所作為。

圖像是靜態內容中最佔用空間的方面。壓縮它們是絕對必須的。 WebPageTest 分析可以輕鬆識別哪些圖像可能會降低您的網站速度，因此需要注意。

方框 6 – 緩存靜態內容

如果您點擊“緩存靜態內容”框，您將被帶到名為“利用瀏覽器緩存靜態資產”的詳細部分。

您的開發人員或管理員可以通過使用正確的 HTTP 標頭指示 Web 瀏覽器何時緩存資源、何時不緩存資源以及緩存多長時間來利用瀏覽器緩存。您可以在我們的文章“瀏覽器緩存如何工作？”中找到有關瀏覽器緩存的更多詳細信息。您還可以在此處了解 Pressidium 如何實現瀏覽器緩存。

框 7 – CDN 的有效使用

如果您的用戶群在地理上分散，那麼 CDN（或內容交付網絡）非常值得使用。例如，如果您的所有客戶都位於倫敦，並且您的主機服務器也位於倫敦，那麼使用 CDN 可能沒有多大意義。但是，如果您的用戶在地理上更加多樣化，那麼 CDN 可以通過將您的網站副本放置在離他們更近的服務器上，從而對這些用戶的網站性能產生巨大影響。

如果您使用的是 CDN，那麼 WebPageTest 將查看它的工作效率。

性能結果

讓我們從性能結果開始看更多數據，您將在摘要選項卡的頂部看到這些數據。

在性能結果中，我們可以看到最重要的概述，例如首字節時間、速度指數（顯示頁面可見部分的平均時間）、用於測量視覺穩定性的累積佈局偏移 (CLS)、消耗的時間直到文檔完全加載和更多。

瀑佈景觀

在性能結果的正下方，我們可以看到每次運行的瀑布視圖。如果您單擊其中任何一個，您將被定向到包含瀑布格式運行的完整詳細信息的頁面。

您將獲得網站每項資產的所有性能統計數據。它們的顏色不同，因此更容易區分它們。如果您單擊其中任何一個，則會打開一個彈出窗口，其中提供更多詳細信息。

瀑布視圖是頁面的可視化表示以及到達組件的加載方式。這使我們能夠輕鬆識別任何可能減慢速度的組件。能夠看到瓶頸在哪裡是非常有幫助的，這意味著我們可以通過精確定位來解決問題，而不必猜測。

連接視圖

連接視圖板也是一個非常有用的功能，因為它允許您通過直觀地總結瀏覽器和服務器之間連接的措施來非常容易地識別 Web 性能問題。

您可以直接從 DNS、初始連接、SSL 協商到視頻資源等內容查看連接狀態。在此下方，還有一個圖表，描繪了正在加載網站的設備上的 CPU 使用率。還有一個帶寬指示器顯示數據渲染期間使用的級別。

請求詳情

最後，在連接視圖下方，您會看到另外兩個分析板——請求詳細信息和請求標頭。

請求詳細信息板非常有用，它列出了請求的每個資源以及與該請求相關的數據，例如內容類型、請求開始時間、下載的字節數等等。該表實際上是可排序的……只需單擊列標題即可按該特定列排序。

請求標頭板提供（是的，您猜對了）請求資源列表以及標頭信息。單擊每個以獲取完整詳細信息。

結論

如果您需要深入分析您網站的活動，WebPageTest 是一個非常棒的工具。即使您沒有深入研究它提供的信息，您也可以快速了解您的網站是否運行良好，以及是否需要更仔細地查看它的性能。最重要的是，它是免費的！