8款前端性能分析工具，全都是神器

? 你可以擁有世界上最漂亮，最吸引人的網站，但如果該網站無法快速加載到瀏覽器中，人們往往會忽略它。盡管有許多性能規則，但歸根結底，這全取決于加載時間。

據?Jakob Nielson?所說，這是構建網站時應記住的事。

小于 100 毫秒是瞬時的。

100 毫秒至 300 毫秒的延遲是可被感知的。

一秒內，用戶能保持思緒不間斷，雖然他們會感覺到延遲，但能自己控制住思緒。

47% 的用戶期望網頁在兩秒或更短時間內被加載。

40% 的用戶在等待網站渲染超過3秒后，就會離開網站。

10 秒是保持用戶注意力的極限。大多數用戶會在 10 秒后離開你的網站。

在?這里?和?這里?詳細了解這些統計信息。

如你所見，很顯然，即使在最差的網絡連接上，也需要確保頁面盡快加載。但說起來容易做起來難。

為了幫助你實現這一最終目標 —— 以下我為性能分析者推薦的工具清單。

1. PageSpeed Insights

這是一項分析網頁內容的?免費服務?，生成能使網頁更快的建議。為你提供了關鍵指標，例如 FCP(First Contentful Paint)、累積阻塞時長等。指標分為現場數據、原始摘要、實驗室數據、因素、診斷與過審信息。它還為你提供了進一步帶改進建議。

PageSpeed 完全致力于性能方面，結合實驗室數據和實際數據來構建有關網站加載速度的綜合報告。以下是我的?作品集網站?的 PageSpeed Insight 結果。如你所見，摘要中是沒有足夠的實際速度數據的。

只粘貼單個 URL 的方式在企業級網站上是不可行的。但這個問題可以通過使用 PageSpeedPlus 運行?自動化的 Google PageSpeed 測試?來解決。它每周為你掃描整個站點，并在人性化的報告中提供結果。你還可以在?這里?查看 PageSpeed API。

2. Lighthouse

Lighthouse?是一個自動化的開源工具，可幫助你通過多個角度分析網頁，不僅有性能分析，還有其他項目，例如 SEO，可訪問性，最佳實踐（Best Practices）以及網站是否滿足 PWA 的要求。

你只需在 Chrome 開發者工具中的命令行，或者甚至作為 Node 模塊運行該工具即可。你所要做的只是提供一個 URL，Lighthouse 將進行一系列審查，然后告訴你網站的運行情況。每個審查都有一個參考說明，解釋了此審查的重要性，以及如何解決它。

Lighthouse 的另一個重要運用是將 API 集成到你自己的系統中，從而以編程方式運行審查。例如，如果你要阻止不符合 SEO 和性能標準的發布，則可以按需使用 Lighthouse 運行測試。

3. WebPageTest

這是一個?免費工具?，可讓你使用具有真實的用戶連接速度的瀏覽器（例如 Chrome）測試網站加載速度。你可以選擇諸如高級測試，簡單測試，視覺比較（Visual Comparison）與路由跟蹤等功能。你還有很多選擇，例如多步驟交互（Multi-step Transactions）、視頻捕獲（Video Capture）、以及內容阻塞等。最終將產生豐富的診斷信息，包括資源加載瀑布圖，頁面速度優化檢查以及改進建議。

網頁測試還提供首屏頁面渲染、重復頁面渲染以及服務器響應的詳細信息分析。

4. Pingdom

Pingdom?是另一項功能強大的分析服務，為你提供大量的功能。它提供了完整的摘要，包括頁面請求、加載的時長、大小以及請求分析。你可以從全球各地分析你的站點。還為你提供了改善頁面得分的建議。

我最喜歡的功能是過濾后的摘要，其中會有關網站內容和請求的總結。我發現這對了解網頁上的總體信息非常有幫助。

5. SiteSpeed

SiteSpeed?是一套開源工具，可讓你監控和檢測網站的性能。你可以通過 Docker 鏡像或者安裝 NPM 包來使用。由于其提供了幾種工具，因此你應該能夠選擇到最適合自己的。你還可以在其?官網?上找到更多這些工具的相關信息。

雖然 SiteSpeed 是免費的，但建立與維護服務器是需要額外的開銷的。如果你沒有自己的服務器，SiteSpeed 建議你使用擁有 2 個 vCPUs 的?Digital Ocean?Optimized Droplets 方案，或者使用?AWS?的 c5.large 實例，并將數據存儲在 S3(Amazon 的一種對象存儲服務) 上。