我們在使用網站過程中，經常會遇到慢的問題，為了找到原因，一般需要藉助工具進行檢測，通過工具，可以檢測出前端站點載入資源的相關詳細情況。 今天，就給大家介紹幾款前端效能測試分析工具，結合效能測試工具，實現通過量化的方式測試網站中諸如首位元組載入時間（time to first byte）或者渲染時間等表現。其中有些工具還會檢查資源是否被快取，多個 CSS 或 JS 檔案是否值得合併，最後自動給出前端效能優化改進建議報告，**如果對你有用的話，歡迎收藏轉發**。 # 1、 Lighthouse Lighthouse是一個開源的自動化工具，用於幫助改進網路應用的質量。可將其作為一個 Chrome擴充套件程式執行，或從命令列執行。Lighthouse分析web應用程式和web頁面，收集關於開發人員優秀實踐的現代效能指標和見解，讓開發人員根據生成的評估頁面，來進行網站優化和完善，提高使用者體驗。 當為 Lighthouse 提供一個要審查的網址，它將針對此頁面執行一連串的測試，然後生成一個有關頁面效能的報告。可以參考失敗的測試，看看可以採取哪些措施來改進應用。 #### 使用入門 執行 Lighthouse 的方式有兩種：作為 Chrome 擴充套件程式執行，或作為命令列工具執行。 Chrome 擴充套件程式提供了一個對使用者更友好的介面，方便讀取報告。 命令列工具允許您將 Lighthouse 整合到持續整合系統。 #### Chrome 擴充套件程式 下載 Google Chrome 52 或更高版本，接著安裝 [Lighthouse Chrome 擴充套件程式](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)。  #### 命令列工具 安裝 [Node](https://nodejs.org/)，需要版本 5 或更高版本。 安裝 Lighthouse 作為一個全域性節點模組。 ``` npm install -g lighthouse ``` 針對一個頁面執行 Lighthouse 審查。 ``` lighthouse https://www.xxx.com/ ``` 傳遞 `--help` 標誌以檢視可用的輸入和輸出選項。 ``` lighthouse --help ``` # **2、SpeedCurve** SpeedCurve 可以幫助追蹤自己的效能表現，以及競爭對手的效能表現。它可以用來檢視某個因素在不同站點的速度表現，並且還提供了綜合監控。綜合監控是在受控環境中模擬網站。在其中可以自定義選項，比如網路速度、裝置、作業系統等等。  # **3、Pingdom** 在Pingdom輸入 URL 地址，即可測試頁面載入速度，分析並找出效能瓶頸。幫助使用者找出影響網站速度的原因，並給出改善網頁效能的可行性方案，很適合做網站的使用者。 **地址：** ``` https://www.pingdom.com/ https://tools.pingdom.com/ ```  # **4、PageSpeed Insights** Google Page Speed Insight（PSI）是一款旨在優化所有裝置上的網頁、提高網頁載入速度的工具。它提供免費服務，可以分析網頁的內容，提出建議，加快網頁的速度。它為您提供了關鍵指標，如第一個內容繪製，總阻塞時間和更多。度量標準被分類為Field Data、Origin Summary,Lab Data,Opportunities、Diagnostics 和Passed Audits。 **線上版：** ``` https://developers.google.com/speed/pagespeed/ ``` 你可以從chrome應用商店裡找到PageSpeed Insights外掛。 點選open 線上分析效能，也可以測試本地的專案通過PageSpeed，點選Start analyzing執行一會就顯示分析結果。  分析後的效果：  # **5、SpeedTracker** SpeedTracker執行在WebPageTest上，可定期進行網站效能測試，並顯示各種效能指標隨時間的變化。這個功能可以幫助不斷評估網站，並檢視新功能如何影響網站的效能，還可以定義預算並通過電子郵件和Slack獲取警報。 **官網：** ``` https://speedtracker.org/ ``` **專案地址：** ``` https://github.com/speedtracker ```  # **6、WebPageTest** WebPageTest是一個線上效能評測網站， 它是一個非常詳細且專業的web頁面效能分析工具，而且開源的！支援IE，Chrome，使用真正的瀏覽器(IE和Chrome)和真實的消費者連線速度，從全球多個地點執行免費網站速度測試。WebpageTest 主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四個功能。 **專案地址：** ``` https://www.webpagetest.org/ ```  可以執行簡單的測試或執行高階測試，還會依據測試結果提供豐富的診斷資訊，包括資源載入瀑布圖，頁面速度優化檢查和改進建議，會給每項內容一個最終的評級。  如果你打不開其官網，或者擔心安全問題，你可以自己拿原始碼搭建這個平臺工具。 # **7、Sitespeed.io** Sitespeed.io 是開源的Web效能測試工具，用來衡量Web網站的綜合性能，幫助開發和測試人員分析網頁的載入速度和渲染效能。Sitespeed.io通過驅動瀏覽器(如：Chrome、Firefox)進行測試，然後從開發者的站點收集多個頁面的資料，並根據優秀實踐等規則來分析這些網頁，然後將結果以HTML報告的形式輸出。 **專案地址：** ``` https://github.com/sitespeedio/sitespeed.io ``` 安裝sitespeed.io之後，如果要分析一下百度PC首頁效能，執行以下命令： ``` sitespeed.io -n 5 -v https://www.baidu.com ``` 該命令將會在chrome瀏覽器下調起URL為https://www.baidu.com 5次，產出了一個分析資料夾，開啟index.html檔案後，我們可以看到關於頁面效能的相關總結。  如果你覺得文章還不錯，請大家**分享**、**關注** 下，因為這將是我持續輸出更多優質文章的最強動力！