一款前端效能分析工具—WebPageTest
我們常常說效能測試，但通常我們只關注後端效能，那麼前端效能怎麼測試呢？今天就介紹一個WEB前端效能分析工具WebPageTest。這是一個線上的免費效能評測網站，支援IE，Chrome，使用真正的瀏覽器(IE和Chrome)和真實的消費者連線速度，從全球多個地點執行免費網站速度測試。可以執行簡單的測試或執行高階測試，包括多步驟事務、視訊捕獲、內容阻塞等等。還將依據測試結果提供豐富的診斷資訊，包括資源載入瀑布圖，頁面速度優化檢查和改進建議，會給每一項內容一個最終的評級。
網站是開源的，支援開發者下載原始檔搭建私人的內部測試站點。開源地址：https://github.com/WPO-Foundation/webpagetest。
開啟http://www.webpagetest.org後頁面如下，WebpageTest主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四個功能，我們主要關注Advanced Testing。
如何使用
-
填寫需要測試的URL
-
填寫Test Location，下拉選擇即可，可選移動端裝置（包括Android、IOS），可選PC端（分地區，每個地區可支援的瀏覽器不同）
-
可選支援的瀏覽器
-
點選右側START TEST
剩下的就是工具自己的事情了，你只需要坐等分析結果。
主要的指標資料
-
First Byte Time
適用物件：訪問頁面的第一位元組時間(後端處理+重定向)
檢查內容：目標時間包括DNS定址時間+建立連線時間(Socket) + SSL認證時間 + 100ms。當超過目標時間每100ms時， 效能評定將降低一個等級
-
Keep-Alive
適用物件：同一個域名下多個頁面物件使用了同一個連線(Socket)
檢查內容：響應標頭檔案包含"Keep-Alive"的指令或者在給定的主機中多個物件中使用同一個連線
-
GZIP Text
適用物件：工具會將MIME 型別為"text/*" 或"*javascript*"的所有物件
檢查內容：檢查Transfer-encoding來看是否為GZIP，如果不是則結果中會提供說明該檔案是壓縮過以及提供壓縮比率(因此一個檔案可以節省30%的大小，通過壓縮即產生了原始檔70%大小的檔案)
-
Compress Images
適用物件：JPEG圖片
檢查內容：對比使用photoshop質量選擇為50後的檔案大小，尺寸超出10%為達標，10%~50%為警告，超出50%為不達標，總體評分為圖片重壓縮後佔原檔案的百分比
-
Use Progressive JPEGs
適用物件：所有JPEG圖片
檢查內容：檢查每個JPEG圖片檔案並計算分數，分數為圖片的壓縮比(壓縮檔案大小/原檔案大小)
-
Cache Static
適用物件： 符合以下的情況的任意的非html物件資料，這個工具會將MIME型別為"text/*","*javascript*"或者"image/*"，此類沒有明確標明過期時間(0或者-1），cache-controlheader設定為private,non-store 或者non-cachepragma header 設定為no-cache
檢查內容：存在一個”Expires“ header(而不是0或者-1),或者設定cache-control: max-age並設定為一個小時或超過一個小時。當過期時間設定小於30天，將評定為警告
-
Use A CDN
適用物件：所有靜態的非HTML內容(css, js 以及圖片)
檢查內容：檢查是否託管在一個已知的CDN上(CName對映到一個已知的CDN網路上).超過整體頁面80%為靜態資源時，則需要考慮使用CDN，將靜態資源託管在CDN上，你可以從這裡知道當前已知的CDN