Web性能優化工具WebPageTest（一）——總覽與配置

網站性能優化工具大體分爲兩類：綜合類和RUM類（實時監控用戶類），WebPageTest屬於綜合類。

WebPageTest經過佈置一些特定的場景進行測試，例如不一樣的網速、瀏覽器、位置等。

測試完成後，能得到優化等級、性能參數、請求瀑布圖、網頁幻燈片快照等，更多信息能夠參考《WebPageTest快速入門》。

1、總覽

輸入網址後，首先進入視野中的就是下面這張畫面。

1）原理

根據WebPageTest的《概述》瞭解到，WebPageTest是一個PHP網站，用戶輸入網址、地點、自定義腳本等信息後，參數發送到後臺。

後臺作些邏輯處理，再經過瀏覽器相關的代理程序，啓動Chrome、Firefox或IE，瀏覽器執行完後。

將數據傳回給後臺，後臺再將數據保存起來，最後經過各類形式（圖、表格、列等），將分析數據過的數據，呈現給用戶。

2）視覺進展

WebPageTest會測量視覺進展，也就是展現每一個時間顯示多少百分比的頁面，一些數據測量就是根據這個來的，具體能夠參考《Speed Index》。

有兩種測量方法：

1. 先將頁面顯示的過程捕獲，保存成多張圖片，再經過圖片分析工具將每一個像素與最終圖像比較，算出百分比，不過頁面每一個像素移動都會改變比對結果

2. 如今有新的方法，使用繪畫事件的可視進展，不過須要Webkit內核的瀏覽器才支持。

3）擴展

WebPageTest還支持擴展開發，只要申請到一個key後，就能夠根據提供的API作開發。

不過調用次數都會有限制，因此若是要作仍是在本身本地或內網布置一個WebPageTest的環境。

後面我會專門寫幾篇佈置環境的文章，WebPageTest在windows中佈置起來簡單一點。

4）導航欄

1. TEST RESULT：能看到最新的一個測試。

2. TEST HISTORY：能查看到測試歷史記錄。

3. FORUMS：論壇信息，裏面有許多提問和回答，覆蓋面很是廣，下圖是論壇的首頁。

4. DOCUMENTATION：工具文檔，英文版，而且掛在google域名下，本身翻譯了一下，掛在了github上。

5. ABOUT：給出了WebPageTest的Github地址，以及發佈版的下載地址等信息。

 

2、普通配置

1）Test Location和Browser

配置測試地址，美帝、歐洲、亞洲、非洲、美洲，各個地方都有服務器，不過仍是選擇一個近點的比較好，能夠選香港或揚州。

點擊Select from Map，彈出的是google地圖，你懂得，不作點措施是顯示不了的。

不一樣地點，能夠選擇的Browser（瀏覽器）將不一樣，例如香港服務器能夠選擇Chrome、Firefox和IE11，揚州就不支持IE11。

 

3、高級配置（Advanced Settings）

1）Test Settings

Connection：網速（Connection）有光纖（Cable）、DSL或者自定義。RTT（Round Trip Time）：一個數據包從發出去到回來的時間。

自定義設置中能夠設置：下行帶寬（BW Down），上行帶寬（BW Up），延遲（Latency），丟包率（Packet Loss）。

Repeat View：選擇「First View and Repeat View」後，就啓動重複視圖，每次測試有兩個視圖，第二個的時候，就能夠模擬有緩存的狀況。

2）Advanced

高級設置中的高級設置，能夠修改訪問代理信息、自定義頭信息，可以模擬更多實際的狀況。

3）Chrome

針對Chrome瀏覽器的設置，能夠調用瀏覽器中的模擬器、捕獲開發工具時間軸。

4）Auth

HTTP基本受權，輸入用戶名和密碼後，這些信息通過base64編碼，以HTTP請求首部的形式發送。

這種技術稱爲HTTP基本驗證（HBA），使用這種方式，須要服務器支持HBA，因此這並非一個穩妥的方法。

受權的請求首部信息相似於下面：

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

5）Script

自定義腳本，網站文檔《腳本》中有更多設置，很是強大，不過根據瀏覽器不一樣，能使用的腳本參數也會不一樣。

6）Block

請求阻塞，多個關鍵字可用空格分割，若是請求的URL中與輸入的關鍵詞匹配，那麼請求將被阻塞。

與下面的SPOF最大的區別是不會發生請求超時，由於這個請求根本沒有建立。

這個測試的目的就是簡單的評估資源缺失對頁面形成的影響。

7）SPOF

單點故障，只需將要限制的域名寫在輸入框中便可，一個域名一行。

目的就是請求超時，對網站的影響，這是一種很是簡便的檢測第三方託管資源有效性的方法。

8）Custom

設置自定義指標，網站文檔《自定義指標》有詳細說明。

設置完成後能夠在「detail -》Custom Metrics」中查看到，有個測試案例能夠查看。

 

QQ交流羣：156140744