Web性能優化工具WebPageTest(二)——性能數據


在前一篇《配置》完成后,點擊“START TEST”,就可以開始測試,測試需要一段時間。

有時候可能還要排隊,如下圖所示,測試完成后可查看到測試結果。

 

一、Summary

1)優化等級

優化等級分為A~F級別,評分項分別為:

阻塞時間(First Byte Time)、長連接已啟動(Keep-alive Enabled)、傳輸壓縮(Compress Transfer)、

壓縮圖片(Compress Images)、緩存靜態內容(Cache Static Content)和使用CDN(Use of CDN)。

在《快速入門》中能看到更多信息。

點擊某個評級能看到這個評級具體的評分

再翻到底部,有評分標准,當你對這個評分有疑惑的時候,可以查閱一下。

例如我使用了CDN,不過這里顯示我沒使用,是因為我用的CDN沒有在網站設定的字典中。

詞匯表(Glossary) 適用對象(Applicable Objects) 檢查過程(What is checked)
First Byte Time 時間到頁面的第一個字節(后端處理+重定向)

目標時間是DNS,套接字和SSL協商所需的時間+ 100ms。

每個超過目標的100ms將扣除單個信件等級。

Keep-Alive 來自為該頁面提供多個對象的域的所有對象 響應標頭包含一個“keep-alive”指令。
GZIP Text

所有具有mime類型的

“text / *”或“* javascript *”的對象

檢查傳輸編碼是否是gzip。
Compress Images JPEG圖片

超過10%的photoshop質量50將通過。

高達50%將會發出警告,任何比這更大的事情都會失敗。

總分是通過重新壓縮圖像可以保存的圖像字節的百分比。

Use Progressive JPEGs 所有的JPEG圖片

檢查每個JPEG圖像。

得到的分數是相對於總JPEG字節作為逐行圖像的JPEG字節的百分比。

Cache Static

非MIME類型的“text / *”,“* javascript *”或“image / *”的非html對象,

Expires頭不是0或-1。

cache-control頭為"private", "no-store"或"no-cache"。

或者一個 pragma頭設置為"no-cache"

存在“Expires”標頭(不是0或-1)

或“cache-control:max-age”指令存在並設置一個小時或更長時間。

如果到期日期設定為少於30天,您將收到警告(僅適用於當前最高等級)。

Use A CDN 所有靜態非html內容(css,js和圖像) 檢查它是否托管在已知的CDN上。目前已知CDN的列表在這里

如有疑問,可以參照原版,如下:

2)高級度量

1. Load Time

測量的時間是從初始化請求,到開始執行window.onload事件。

2. First Byte

第一個字節時間(通常縮寫為TTFB)被測量為從初始化請求,到服務器響應的第一個字節,被瀏覽器接收的時間(不包括DNS查詢、TCP連接的時間)。

3. Start Render

通過捕獲頁面加載的視頻,並在瀏覽器第一次顯示除空白頁之外的其他內容時查看每個幀來衡量的。

4. Speed Index

表示頁面呈現用戶可見內容的速度(越低越好)。具體可以參考《Speed Index

5. Document Complete Time

和Load Time相同

6. Fully Loaded Time

從初始化請求,到Document Complete后,2秒內(中間幾百毫秒輪詢)沒有網絡活動的時間,但這2秒是不包括在測量中的,所以會出現兩個差值大於或小於2秒。

7. Requests

瀏覽器針對頁面上的內容(圖片,javascript,css等)發出的請求數。

8. Bytes In

瀏覽器加載頁面下載的數據量。它通常也被稱為“頁面大小”。

9. First View

首次進入頁面,無相關資源緩存。

10. Repeat View

再次進入頁面,有相關資源緩存,前一篇文章中有介紹這兩個的配置。

更詳細的細節可以參考《指標

3)資源瀑布與網頁快照

1. 瀑布圖(Waterfall)

包括資源載入和網絡連接瀑布圖。

2. 網頁快照(Screen Shot)

點擊幻燈片試圖(Filestrip View)可以查看到各個百分比網頁的樣子,下面的第五節中有圖有說明,還有很多刪選功能。

3. 內容分解(Content Breakdown)

兩個餅狀圖,資源請求類型和字節大小。

 

二、性能評估(Performance Review)

點擊下圖導航欄中的“Performance Review”,就能進入此頁面。

幾個指標就是上面的優化等級,多維度,以表格的方式呈現出來,更直觀的觀察性能。

 

三、瀑布圖

點擊Summary中的瀑布圖,就能進入到詳情頁面,在這里又能看到更多的參數指標。

1)高級度量

與上面Summary頁面的高級度量比較,好幾個是一樣的。下面就描述幾個不一樣的指標。

1. Visually Complete

視覺完成時間,也就是WebPageTest捕獲到完整頁面的時間。

2. RUM First Paint

實時監控首次頁面渲染時間,我理解就是資源瀑布圖中的“msFirstPaint”時間,(IE專用屬性)是由瀏覽器本身報告的一個測量,它認為繪制的第一個內容。通常是相當准確,但有時它報告的時候,瀏覽器只畫一個空白屏幕。

3. domInteractive

這個參數可以點擊的,可以查看W3C中的解釋,這個時候DOM已經被解析,但是CSS還沒被解析。可以參考《Document.readyState

4. domContentLoaded

這個時間,用戶就可以操作了,也就是上圖中“domContentLoadedEventStart~domContentLoadedEventEnd”的這段時間。jQuery中有個“ready”方法,內部使用的就是這個相關的事件。

5. loadEvent

完成加載load事件,這個時間對應的是“loadEventStart~loadEventEnd”,就是瀑布圖中的“On Load”。與上面的“Load Time”有點不同,“Load Time”是觸發執行時間。

2)資源瀑布圖

1. 里程碑時間

方框中的就是各個里程點時間。用不同顏色的豎線在圖中表示。

2. 資源行

點擊某一行,就能看到詳細的請求頭、響應頭、時間消耗等信息。下圖中有些資源會有兩種顏色展示,例如“image”有淡紫和深紫,對應時間是下圖紅色框中的內容。

3. CPU Utilization

CPU利用率

4. Bandwith in

帶寬

3)網絡連接瀑布圖

這里展現的其實就是開了幾個TCP連接,有傳輸js的、css的或圖片的。TCP的相關信息可以參考《網絡協議

4)HTTP請求參數詳情

以表格的形式展現請求細節,並且每一行有三種顏色選擇,分別對應三個時間指標。

5)HTTP請求內容

這里展現的內容與瀑布圖中選中某一行類似,平鋪的方式,可以更容易的做參數對比。

 

四、內容分解與域名

導航欄中有Content Breakdown和Domains,分別統計了內容和域名。

1)內容分解(Content Breakdown)

內容分解中的餅狀圖在“Summary”中也有展示。

還分別列了表格,展示不同消息類型的請求數和字節大小。

2)域名(Domains)

從域名的角度描述請求數和字節大小。

 

五、幻燈片(filmstrip)

在“Summary”中點擊“Filmstrip View”,就能進入下圖中的頁面。

1)滾動條

滑動滾動條,下面還會有根紅線對應這個時刻的資源載入情況。

2)過濾條件

包括縮略圖大小(Thumbnail Size)、縮略圖間隔(Thumbnail Interval)和終結點(Comparsion End Point)。

終結點中有幾個參數指標可以選擇,可以參考前面的說明。

 

QQ交流群:156140744

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM