進階測試工具 WebPageTest
在使用Google PageSpeed Insights檢測網站速度是否需要改善！文章中向大家介紹了如何幫網站做健檢以了解網站是否需要改善及該朝哪個方向改善，進而加以優化網站。在本篇文章將介紹WebPagetest這款進階測試工具，讓您更能快速並清楚知道當訪客從不同國家/地區進行連線時，您網站是否需要做更進一步的優化，如：拖慢網頁載入的原因等。
現在一起跟著歐斯瑞來看看WebPagetest這個工具吧！
Step 1 :
進入WebPagetest 網站後，這裡有4個頁籤讓您可以依照需求選擇，如圖1：
圖1
這裡我們選擇“Advanced Testing"來示範。
Step 2 :
在下方輸入網址以及選擇想要測試的位置和瀏覽器，輸入完後點擊“START TEST"，如圖2。
圖2
- Enter a Website URL：輸入網站網址。
- Test Location：測試位置(裝置 / 國家地區)，使用下拉選單或地圖(選擇位置或點擊氣球)。
- Browser：瀏覽器，使用下拉選單(依選擇的位置不同，所支援的瀏覽器也會有所不同)。
如果您想進一步設定更細微的設定，可在“Advanced Settings"設定，分別如下：
Test Settings
在這裡您可以設定網速、測試數量、重複檢視等等，在此僅列舉以下3項。
- Connection – Cable、DSL、3G/4G、自定義…等。
- Number of Tests to Run – 執行的測試數量(最多9個)。
- Repeat View – 第一次檢視和重複檢視 或 僅第一次檢視。
Advanced
在高級設定裡，您可以勾選想要的選項或在自定義標題內添加標題、插入腳本…等，以便能夠模擬出更多情況。
Chrome
僅限於Chrome的設定，如：捕獲開發工具時間軸、追蹤類別等等。
Auth
設定HTTP基本認證。
關於HTTP基本認證，它是一種用來允許網頁瀏覽器或其他用戶端程式在請求時提供使用者名稱和口令形式身分憑證的一種登入驗證方式。
舉例來說，輸入"用戶名"和"密碼"，在傳送前是以使用者名稱追加一個冒號並串接上口令(密碼)，再將所得出的結果字串用Base64編碼傳送出去，由接收者解碼得出使用者名稱和口令的字串。
Script
可自定腳本或參考WebPageTest文檔的"腳本"。
Block
用於阻止請求(如阻止廣告等內容)。舉例來說，假設您請求的URL與所輸入的關鍵字匹配，那麼這些將被阻止。另外，當有多個關鍵字時可用空格隔開。
SPOF
輸入要限制的域名(一行一個)。主要用來測試當指定時，對網站所造成的影響，例如：超時。
用來檢測性能是非常有效的，特別是第三方託管。
單點故障(SPOF)，係指系統中一旦失敗，便會讓整個系統無法運作的部件，簡單來說，單點故障即會整體故障。
Custom
用於設定自定義指標。關於如何指定自定義指標，請參閱文檔，在文檔中將有詳細說明。
Step 3 :
接著畫面分別會顯示需要等待其他測試的數量(左圖)及開始測試時間(右圖)，倘若等待前面的測試點過久，您可以過一段時間再次嘗試。
需要等待其他測試的數量(左圖) & 開始測試時間(右圖)
Step 4 :
執行完畢後會顯示等級結果，如圖3。倘若等級不是落在A 或 B，那麼您將需要針對這些項目進行評估(若想了解關於該等級的細節，可點擊等級即可看到具體細節)。
圖3
如果您想更深入了解各項檢測的詳細內容，可點擊等級評分下方的選單，各項(選單)檢測詳細說明如下：
Summary(概要)
以下圖為例，在性能結果的第一次檢視中可以看到各項數據，如：加載時間、開始渲染時間、完全加載時間…等，各項指標說明可參考Metrics(度量指標)。
Performance Results (Median Run)
當使用者開始瀏覽頁面的加載時間為4.845s，而開始渲染時間則是在螢幕上顯示內容的第一個時間點為2.200s。在此之前，使用者在螢幕上所看到的是一個空白頁面(但這不一定表示使用者看到頁面內容，因為它也有可能是背景顏色的內容)。直到完全加載時間為6.072s，而這通常包括主頁面加載後由javascrip觸發的任何活動。
而在檢測結果列表中，點擊“Filmstrip View"可查看載入時每個時間的百分比、視覺進度%、請求…等，如下圖。
如果想更進一步了解測試結果的數據圖，點擊"Plot Full Results “即可看到各項數據時間，如：加載DOM內容(導航時間)、速度指數、CPU忙碌時間…等。
第一次檢視 V.S 重複檢視比較
現在我們來看兩者之間的比較結果，如圖4。
圖4
第一次檢視加載時間為4.713s / 文件完成數據量為1,809 KB，而重複檢視加載時間為3.343s / 文件完成數據量為62 KB，兩者相比下所減少的比例分別為加載時間29% / 文件完成數據量97%，由此可見重複檢視所減少的加載時間比所減少的文件完成數據量來的低。
Details(細節) 在圖5裡可以從不同圖表中看到載入不同資源時所花費的時間與先後順序及請求細節等，如：JS、CSS、SSL、Image…等。
圖5
如果想快速了解某個請求細節，在“Waterfall View"點擊該請求便會彈出視窗，如圖6。
圖6
Performance Review(性能評估)
在圖7裡可以看到詳細優化清單內各項指標等級、細節以及名詞說明。
圖7
當然也有可能發生例外情形，比如您有使用CDN，但Effective use of CDN卻顯示出未使用，這時有可能是您使用的CDN沒有設定在網站的字典裡，如下圖：
Grades
根據上圖各項等級指標這裡由左至右簡略說明 (可與圖7名詞對照)：
First Byte Time：第一載入時間(頁面的第一個字節時間，後端處理+重定向)
Keep-alive Enabled：與伺服器保持連接狀態 (給定的域名提供單個對象不被檢查)
Compress Transfer：使用gzip壓縮傳送文件以減少傳輸的數據量
Compress Images：壓縮圖像 (品質易在壓縮過程中遭到破壞) / 使用漸進式JPEG (檢查每個JPEG圖像文件，其檔案大小會比原檔案小)
Cache static content：任一MIME類型為images、JavaScript 或 CSS沒有明確設定最長時間或到期時間。
Effective use of CDN：檢查是否託管在已知的CDN(CName映射到已知的CDN網路)，在這裡您可以查詢已知的CDN列表。
Content Breakdown(內容細分)
Content Breakdown是按照MIME類型的內容來細分，這裡我們用第一檢視與重複檢視來做比較。從下圖中可以看出在請求數、字節與未壓縮上都有著明顯的落差。
Domains(域名)
Domains則是按域名細分內容，從域名的請求數與字節來劃分佔比數(%)，如下圖所示。
Processing Breakdown(處理故障)
從下圖的主線程處理故障與主線程時間細分圖表來看，分別依照處理類別和事件的時間來劃分佔比數(%)，如果想了解詳細時間可點擊“view timeline"。
Screen Shot(螢幕截圖)
您可以在這裡選擇要創建視頻或下載視頻來觀看從開始瀏覽頁面的加載到完全載入所花費的時間。
請將以下代碼嵌入視頻：
<iframe src="https://www.webpagetest.org/video/view.php?id=180518_1M_c65bc20bf409dc7175eee55987149927.1.0&embed=1&width=408&height=384" width="408" height="384"></iframe>
Image Analysis(圖像分析)
點擊"Image Analysis“，您可以透過圖像分析結果來了解頁面圖像的評分…等，如下圖。
Request Map(請求地圖)
點擊"Request Map“可以幫助您識別頁面上的第三方及它們的來源，如果想更進一步了解該網站的詳細訊息或從A網站到B網站的傳輸訊息，可將滑鼠停在節點或線上。
Request Map
只要您知道您的網站在哪方面的問題較多，那麼就可以著手針對這些問題開始解決，以便改善網站效能。最後再這裡提醒大家，在選擇測試位置時會因為伺服器所在位置的遠近而有所影響，建議大家選擇近一點的伺服器位置會比較好喔！
以上是本篇對WebPagetest的介紹，如果有您有更多疑問可以詢問我們，未來會撰寫更多電商網站相關文章，您想知道什麼嗎？歡迎在下方留言給我們，訂閱我們的電子報或追蹤我們的粉絲專頁，就不錯過最新文章喔！
相關名詞參考與範例圖來源如下：
我要留言