[[398940]]

前言

工欲善其事，必先利其器。了解完性能指標之后，性能優(yōu)化的目標已經明確了。接下來我們借助一些性能測量工具，明確網頁距離優(yōu)化目標之前還有多大的差距。一個好的工具可以讓你事半功倍，接下來我將用3篇文章分別介紹3個主流的測量工具：

Chrome DevTools Performance 主要用于日常開發(fā)過程中分析運行時的性能表現(xiàn)。

Lighthouse 用來生成網頁的性能評測報告。

WebPageTest 用來進行整體的網站質量評估、一站式性能評估。

有了這3個工具我們就可以從多個維度對網站性能進行全方位的評估。

性能測量工具-WebPageTest

WebPagetest的核心是用于測量和分析網頁的性能。它是 google 開源項目《make the web faster》的子項目，它本來是 AOL 內部使用的工具，后來在2008年基于BSD開源。

官方網址：http://www.webpagetest.org/

原理

WebPageTest是一個PHP網站，用戶輸入網址、地點、自定義腳本等信息后，參數發(fā)送到后臺。后臺做些邏輯處理，再通過瀏覽器相關的代理程序，啟動Chrome、Firefox或IE。瀏覽器執(zhí)行完后將數據傳回給后臺，后臺再將數據保存起來，最后通過各種形式(圖、表格、列等)，將分析數據過的數據，呈現(xiàn)給用戶。

導航欄

首先打開WebPageTest 官網，可以看到如下界面：

1. Test History：能查看到測試歷史記錄。
2. API：webgetest API Key 允許開發(fā)人員在其工作流中自動執(zhí)行性能測試，以不斷提供更快的網頁。WebPageTest 支持的擴展開發(fā)，只要申請到一個key后，就可以根據提供的API做開發(fā)。不過調用次數都會有限制，所以如果要做還是在自己本地或內網布置一個WebPageTest的環(huán)境。
3. Forums：論壇信息，里面有許多提問和回答，覆蓋面非常廣。
4. Docs：英文版工具文檔，中文文檔可以參照這個網址 https://github.com/pwstrick/WebPagetest-Docs
5. Blog：博客，里面是一些 WebpageTest 的一些最佳實踐方案等
6. About：給出了WebPageTest的Github地址，以及發(fā)布版的下載地址等信息。

基本使用

基礎配置

1. 輸入網頁網址：確定要測試的頁面后，轉到WebPagetest并為其指定要測試的頁面的URL，這個地址可以是首頁也可以是詳情頁。
2. 選擇地理位置：WebPagetest具有位于世界各地的測試機器，你應該從接近用戶訪問的位置進行測試，從列表中選擇一個位置，或者單擊Select from Map按鈕，從地圖視圖中選擇一個位置(只需單擊氣球🎈，然后確定)
3. 選擇瀏覽器：不同的位置支持不同的瀏覽器，如果給定的位置沒有正在尋找的瀏覽器，可以嘗試不同的位置。通常建議使用chrome瀏覽器。

高級配置

1. 運行測試次數：為保證測試結果的準確性，每次運行都會測試多次
2. 是否重復訪問：因為重復訪問會優(yōu)先走緩存，所以結果可能會有差別
3. 提交測試：一切配置完成后，點擊Start Test按鈕，請求將發(fā)送到測試位置進行測試。測試可能需要一段時間才能運行，具體取決于有多少次測試(在測試之前至少有一分鐘的測試時間，但是它的時間甚至更長)。一旦測試完成，你將得到結果。

本地部署

官網中只能測試一些外網能訪問的網站，但是往往開發(fā)過程中有些項目我們都發(fā)布在公司內部的局域網內，所以就需要將WebPagetest部署到本地，使用本地的網絡環(huán)境來測試性能。

注意：這里提到的本地部署，是指本地局域網內服務器上部署的網站，不是本地電腦的locallhost，因為在本地測試locallhost往往是不準確的，因為大多數情況下，本地開發(fā)調試的頁面都是webpack dev sever服務器，資源沒有經過壓縮，所以加載速度也會很慢，和線上環(huán)境的結果往往會大相徑庭。

具體步驟如下：

1.下載并安裝docker鏡像，下載地址 https://docs.docker.com/get-docker/

為什么安裝docker鏡像?docker類似于一個虛擬機，在虛擬機上下載WebPageTest的鏡像，我們就是不需要獨立安裝WebPageTest這個軟件了，這樣可以不受系統(tǒng)限制，完全獨立出一套虛擬的環(huán)境，通過端口映射到本地服務。

2.拉取鏡像

docker pull webpagetest 
docker pull webpagetest/agent 

3.運行server實例

docker run -d -p 4000:80 webpagetest/server 

4.運行agent實例

docker run -d -p 4000:80 --network="host" -e "SERVER_URL=http://localhost:4000/work/" -e "LOCATION=Test" webpagetest/agent 

5.訪問http://localhost:4000，會看到 WebPagetest 官網一樣的頁面，在這個頁面中輸入本地其它端口的網址，我們就可以測試本地服務的性能了。

結果分析

1. 優(yōu)化等級

在結果頁面的頂部是一組最關鍵的性能優(yōu)化等級。涵蓋了適用于所有網站的基本優(yōu)化，任何不是A或B的都需要進行進一步的優(yōu)化.

2. 性能指標總結

結果頁頂部的數據表提供了有關已加載頁面的一些高級信息，其中首次和重復訪問視圖的指標都有清晰的看到首次和重復視圖訪問的結果。

首次視圖(First View)：首次視圖的測試，將會把瀏覽器的緩存和Cookie清除，表示訪問者第一次訪問該網頁將體驗到的情況。

重復視圖(Repeat View)：重復視圖會在首次視圖測試后立即執(zhí)行，不會清除任何內容。瀏覽器窗口在First View測試后關閉，然后啟動新瀏覽器以執(zhí)行Repeat View測試。重復視圖測試模擬的是用戶離開頁面后，馬上再進入此頁面的場景。

除此之外，這里介紹幾個關鍵指標：

1. 首字節(jié)時間(Time To First Byte)：首字節(jié)時間(通?？s寫為TTFB)指的是被測量為從初始化請求，到服務器響應的第一個字節(jié)，被瀏覽器接收的時間(不包括DNS查詢、TCP連接的時間)。
2. 頁面渲染時間(Start Render)：測量的時間是從初始化請求，到第一個內容被繪制到瀏覽器顯示的時間。Start Render是通過捕獲頁面加載的視頻，并在瀏覽器第一次顯示除空白頁之外的其他內容時查看每個幀來衡量的。它只能在實驗室測量，通常是最準確的測量。
3. 速度指數(Speed Index)：速度指數是一個計算的指標，用來衡量頁面渲染用戶可見內容的迅速程度(越低越好)。關于計算方法的更多信息，請點擊此處查看。
4. 阻塞交互時間(Total Blocking Time)：是指頁面阻塞，用戶不能進行交互的累計時間，這里可以看到二次訪問時資源緩存減少了阻塞時間。
5. 文檔加載完畢(Document Complete)：從初始化請求，到加載所有靜態(tài)內容(圖片、CSS、JavaScript等)，但可能不包括由JavaScript執(zhí)行觸發(fā)的內容，可以理解為開始執(zhí)行window.onload。
6. 頁面所有元素加載時間(Fully Loaded)：指的是從初始化請求，到Document Complete后，2秒內(中間幾百毫秒輪詢)沒有網絡活動的時間，但這2秒是不包括在測量中的，所以會出現(xiàn)兩個差值大于或小于2秒。

首字節(jié)加載時間和首字節(jié)時間的區(qū)別

首字節(jié)加載時間(First Byte Time)：是指瀏覽器收到HTML內容的第一個字節(jié)時間，包括DNS查找、TCP連接、SSL協(xié)商(如果是HTTPS請求)和TTFB。

首字節(jié)時間 TTFB(Time To First Byte)：首字節(jié)是指被測量為從初始化請求，到服務器響應的第一個字節(jié)，被瀏覽器接收的時間(不包括DNS查詢、TCP連接的時間)。我理解TTFB的計算是從下圖中requestStart到responseStart這之間的時間，也就是請求發(fā)送出去的時間。

所以，首字節(jié)加載時間 = DNS查找時間+TCP連接時間+SSL協(xié)商時間+TTFB請求發(fā)送出去的時間

3. waterfall chart 請求瀑布圖

在結果頁的下方我們可以看到每次運行顯示的瀑布圖，點擊進去可以看到具體的參數詳情，如下圖所示：

在這張圖上我們可以看到所有的請求資源都列舉了出來，里面的信息比 Chrome DevTools給出的信息更加詳細，例如下方的幾個指標：

1. Browser Main Thread：瀏覽器主線程占用情況，什么時間比較忙
2. Long Tasks：長任務時間，也就是頁面的科技可交互時間，紅色區(qū)域代表阻塞時間
3. Bandwidth In：帶寬
4. CPU Utization：CPU占用情況

除此之外，在下圖中我們還可以看到一些優(yōu)化的點，比如42-50這些并行請求的圖片資源減少了資源加載時間，還有57-58黃色高亮部分資源發(fā)生了重定向，WebpageTest 提示我們這里資源發(fā)生了變化，可以優(yōu)化為不進行資源重定向。

總結

1. WebpageTest的使用方式：訪問官網測試、安裝本地鏡像測試
2. WebpageTest的關鍵指標：首字節(jié)時間(First Byte)、頁面渲染時間(Start Render)、速度指數(Speed Index)、阻塞交互時間(Total Blocking Time)、文檔加載完畢(Document Complete)、頁面所有元素加載時間(Fully Loaded)
3. 首字節(jié)加載時間 = DNS查找時間 + TCP連接時間 + SSL協(xié)商時間 + TTFB請求發(fā)送出去的時間