十件你不知道的關於 WebPageTest.org 的事
夠標題黨吧？既然你點進來了，那我也得說一些乾貨了！毫無疑問，WebPageTest 是我最喜歡的 Web 效能測試工具之一。它功能強大、完全免費，為世界各地的網頁提供測試。
如果你曾經用過 WebPageTest，那你應該知道它是多麼的好用：只需要幾下點選就能得到你網站載入的詳細資訊。不過，它還有一些你可能聞所未聞的功能！
最近我在 Santa Clara 參加了Velocity Conference，偶遇了 Pat Meenan （WebPageTest 的創始人）並問了一些關於 WebPageTest 的問題。在本文中，我將列出 WebPageTest 的 10 個最酷的功能（我自己評的），
希望你還沒有用過它們
。按照釣魚文的標準套路，本文章節的標號會從 10 開始數。
10. 模擬單點失效
你的網站很可能依賴了一些第三方庫來提供額外的功能（包括且不僅限於監控指令碼、A/B 測試和廣告）。問題就有可能出在這些你使用的部署在別人伺服器上的庫，這就是單點失效（SPOF）風險。如果出於某些原因，導致託管這些庫的伺服器出現故障或響應緩慢，你的網站也會不幸地收到影響。這種事情可能發生在任何人身上！
使用 WebPageTest 模擬單點失效與正常測試網站的設定一模一樣，不過你需要將第三方庫的域名遮蔽。例如，如果你想對ccn.com 測試單點失效，可以將以下域名複製並貼上到 SPOF 選項卡中：
cdn3.optimizely.com a.visualrevenue.com www.google-analytics.com pixel.quantserve.com budgetedbauer.com 複製程式碼
貼上好後介面應該如下所示：
當檢視此網站的載入視訊時，你會發現 WebPagetest 已經對 SPOF 進行了模擬，導致該網站的載入時間長了不少。在上述測試中，網站最終載入完畢共花了 20 多秒！這個功能是測試你的網站在 SPOF 情況下響應情況的好工具。
9. 建立個人 WebPagetest 例項
WebPageTest 公共例項非常方便，你可以免費用它來快速獲取需要的資訊。不過公共例項有一些限制，比如在某個忙碌的日子裡，你可能會需要在排隊等待測試結果。如果你將 WebPageTest 用於商業用途，也許需要建立屬於自己的私有 WebPageTest 例項。
Pat Meenan 寫了一篇名為 5 分鐘上手 WebPagetest 私有例項 的指南，介紹了在 Amazon EC2 上如何設定自己的例項。代理在所有 EC2 域中以 AMI 的形式提供，如果你需要在公司防火牆內部進行測試，也可以自行配置。
私有例項用起來很方便，因為你可以控制測試的基礎架構，並且 API 請求數量沒有限制。
8. 編寫登入指令碼
WebPageTest 不僅可以用於測試公開的網站，如果有需要，它也可以通過編寫登入網站的指令碼測試需要登入的網站。WebPageTest 具有指令碼功能，可以自動執行多步測試（比如登入網站和傳送電子郵件）。
例如，如果你想為 AOL 網站編寫登入步驟的指令碼，可以執行類似於以下操作：
logData0 // bring up the login screen navigatehttp://webmail.aol.com logData1 // log in [email protected] setValuename=passwordsomepassword submitFormname=AOLLoginForm 複製程式碼
請記住不要將重要的登入憑證放在裡面！除非你將它們明確設為私有，否則webpagetest.org 網站上的測試都是公開的。如果你想了解更多有關編寫指令碼的資訊，請查閱此連結。
7.WebPagetest 發明的 Speed Index 指標
WebPagetest 於 2012 年添加了 Speed Index 指標（速度指數），它可以用於標化頁面可視內容的填充速度。你可以嘗試將不同的頁面相互比較（優化之前與之後、自己的網站與競品等），並與其他指標（載入時間，開始渲染時刻等）結合，來更好地理解這個對於描述網站效能非常有用的指標。如果你想了解更多有關 Speed Index 的資訊，請參閱此連結。
6. 收集自定義指標
WebPageTest 提供了大量有用的統計指標。但你知道嗎？你還可以用它來收集你自定義的指標。WebPageTest 可以在測試的最後執行任意的 JavaScript 指令碼並收集自定義指標。你可以在伺服器配置中靜態地配置或在每個基礎測試進行時配置它。
其實，自定義指標可以覆寫內建指標。當你需要通過 JavaScript 驗證強制讓測試失敗時，可以通過自定義指標得到“測試結果”。HTTP Archive 還通過 自定義指標 採集了一些統計資料。
5. 將 WebPageTest 整合進你的 CI 測試中
如果你想在每次部署新程式碼時，都確保新程式碼不會讓你在 Web 效能上的努力前功盡棄，那麼 WebPageTest 可以幫上忙！你可以在頁面上設定“budget”（預算），如果測試結果超過預算值則會導致測試失敗。Tim Kadlec 建立了一個有用的 Grunt任務 ，可以用 WebPagetest 的公開或私有例項對指定的 URL 執行測試。Marcel Duran 還為 NodeJS 建立了一個 WebPageTest API 包裝器 ，可以讓你自定義測試的執行方式。
通過這些方法，每當更新程式碼時，都能檢查網站效能。網頁的效能並不是兒戲，而是維繫網站生命的重要事項！
4. 你可以自定義瀑布圖的顯示方式
你知道嗎？WebPageTest 可以自定義瀑布圖的顯示方式。執行測試後，單擊瀑布影象並向下滾動，可以看到一個“customize waterfall”（自定義瀑布）的連結。
點選這個連結，可以自定義瀑布圖的顯示方式。很好用！
如果你要在幻燈片裡使用瀑布圖，這個功能可讓你精準地展示需要展示的部分。
3. 在測試歷史記錄中對比多個測試結果
在測試歷史記錄頁面中，你可以檢視針對特定例項執行過的測試列表。這個頁面可以讓你以幻燈片的形式直觀地比較多個測試。
選擇要進行比較的測試，就能看到一個幻燈片檢視，比較所有過去執行過的測試。
需要注意，在執行測試時最好對測試設定標籤。這樣有助於幫你在歷史記錄中找到對應的測試，並且在幻燈片、視訊檢視中顯示時也會顯示標籤。
2. 你也可以為 WebPageTest 程式碼庫做貢獻
整個 WebPageTest 的程式碼庫都是開源的！程式碼庫位於 Github ，包括了 Web UI 和可用於在各種瀏覽器上執行測試的程式碼。Pat 提到，這個程式碼庫使用的是非常寬鬆的 BSD 協議，也就是說你可以出於任何的目的（包括商業等用途）使用專案的任何部分。
如果你覺得有些東西可以讓社群受益，請務必為這個非常棒的工具做出貢獻！
1. 檢查你的 JavaScript 執行是否導致效能瓶頸
現在 JavaScript 在全世界都非常流行，這也意味著 JavaScript 的執行已經成為了妨礙瀏覽器效能的一個嚴重瓶頸。你知道嗎？使用 WebPageTest，可以模擬在裝置上執行網站，並得到主執行緒運作的詳細情況。
在執行測試前，開啟 Chrome 標籤，然後勾選“Capture Dev Tools Timeline”（捕獲開開發者工具時間軸）。
在測試完成後，點選“Processing Breakdown”（處理詳情）按鈕，將得到主執行緒處理過程中的詳細檢視。通過展示主執行緒的處理過程的詳細情況，可以讓你更好地瞭解網站在真實裝置上的確切執行情況。