我們可以編寫一些漂亮，且吸引人的網站，但如果該網站無法快速加載到瀏覽器中，人們往往會跳過它。盡管有許多性能規則，但歸根結底，這全都取決于加載時間。
根據 Jakob Nielson說法，在網建的網站時，需要注意以下幾點：
- 小于100毫秒加載速度才是爽的
- 100ms到300ms 感覺良好
- 一秒鐘大概是用戶思路不被打斷的極限。用戶會感覺到延遲，但還可以接受
- 47%的用戶希望網頁能在兩秒或更短的時間內加載
- 40% 的用戶如果網頁加載超過 3 秒，表示會放棄該網站
- 10秒左右是用戶注意力的極限。大多數用戶會在10秒后離開你的網站
如上所述，即使在最差的網絡帶寬上，也需要確保頁面盡快加載。但這個說起來容易做起來難。
為了能幫助更好的實現這一目標，這里推薦了幾個性能分析工具。
1. PageSpeed Insights
這是一個免費的服務，分析網頁的內容，然后提出建議，使該網頁更快。它為您提供了關鍵指標，如第一個內容繪制，總阻塞時間和更多。度量標準被分類為Field Data、Origin Summary,Lab Data,Opportunities、Diagnostics 和Passed Audits。它還為我們提供了進一步改進的建議。
2. Lighthouse
Lighthouse 是一個開源的自動化工具，用于改進網絡應用的質量。你可以將其作為一個 Chrome 擴展程序運行，或從命令行運行。你為 Lighthouse 提供一個您要審查的網址，它將針對此頁面運行一連串的測試，然后生成一個有關頁面性能的報告。
從此處，您可以失敗的測試為指示器，看看可以采取哪些措施來改進您的應用。
注意: Lighthouse 目前非常關注 Progressive Web App (PWA) 功能，如“添加到主屏幕”和離線支持。不過，此項目的首要目標是針對網絡應用質量的各個方面提供端到端審查。
運行 Lighthouse 的方式有兩種：作為 Chrome 擴展程序運行，或作為命令行工具運行。Chrome 擴展程序提供了一個對用戶更友好的界面，方便讀取報告。命令行工具允許您將 Lighthouse 集成到持續集成系統。
3. WebPageTest
WebPageTest是一個在線的免費性能評測網站，支持IE，Chrome，使用真正的瀏覽器(IE和Chrome)和真實的消費者連接速度，從全球多個地點運行免費網站速度測試?？梢赃\行簡單的測試或執行高級測試，包括多步驟事務、視頻捕獲、內容阻塞等等。還將依據測試結果提供豐富的診斷信息，包括資源加載瀑布圖，頁面速度優化檢查和改進建議，會給每一項內容一個最終的評級。
WebpageTest 主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四個功能，我們主要關注Advanced Testing。
如何使用WebPageTest
- 填寫需要測試的URL
- 填寫Test Location，下拉選擇即可，可選移動端設備（包括Android、IOS），可選PC端（分地區，每個地區可支持的瀏覽器不同）
- 可選支持的瀏覽器
- 點擊右側START TEST
4. Pingdom
Pingdom:在線網站速度檢測工具是由一家網站監測服務公司推出的網頁速度檢測工具，幫助用戶找出影響網站速度的原因，并給出改善網頁性能的可行性方案，對于有網站的用戶來說非常實用。
我最喜歡的功能是分析后的的摘要，其中會為我們提供有關網站內容和請求的摘要。我發現這對于了解網頁上提供的內容有很大幫助。
5. Sitespeed.io
Sitespeed.io 是一款開源的Web性能測試工具，用來衡量Web網站的綜合性能，幫助開發和測試人員分析網頁的加載速度和渲染性能。
Sitespeed.io通過驅動瀏覽器（如：Chrome、Firefox）進行測試，然后從開發者的站點收集多個頁面的數據，并根據最佳實踐等規則來分析這些網頁，然后將結果以html報告的形式輸出。
Sitespeed.io 滿足了一個完整的Web性能測試工具所需的3個關鍵功能：
- 使用真實的瀏覽器測試Web站點，模擬真實的用戶進行請求連接，收集以用戶為中心的重要指標，如：響應速度指標、第一視覺呈現
- 可分析頁面的組成，并給出相應性能反饋，增加終端用戶的使用體驗友好性
- 通過收集和保存頁面組成的數據，便于跟蹤定位
6. Calibre
Caliber 是一款多功能的性能監控套件，可幫助你監控和審核網站的性能。它還允許你通過指定測試服務器的位置，管理模擬的廣告首選項甚至模擬移動設備來模擬現實條件。它還允許你設置預算，并通過為你提供性能下降來幫助你將預算保持在預算之內。
7. SpeedCurve
SpeedCurve 既可以讓你追蹤競爭對手的性能表現，也可以追蹤自己的性能表現。
使用 SpeedCurve 時，你可以查看某個因素在不同站點的速度表現。對于移動用戶來說，他們希望網站在手機上加載起來要快于電腦，如果感到加載遲緩，往往會迅速關上網頁，所以，網站的響應速度對他們很重要。
SpeedCurve 還提供了綜合監控。綜合監控是在受控環境中模擬你的網站。你可以自定義選項，比如網絡速度、設備、操作系統等等。
8. SpeedTracker
SpeedTracker是一個運行在WebPageTest之上的工具，可在你的網站上進行定期的性能測試，并直觀顯示各種性能指標隨時間變化的方式。這使你可以不斷評估網站，并查看新功能如何影響網站的性能。你還可以定義預算并通過電子郵件和Slack獲取警報。
作者：Mahdhi Rezvi 譯者：前端小智來源：blog.bitsrc
原文：https://blog.bitsrc.io/performance-tools-for-front-end-development-a7b3c1488876
