如何測試網頁加載速度，WebPagetest使用技巧

　　網站頁面的打開速度，將會影響網站收錄、網站排名，相信這點長春SEO站長們都知道，那麽對於自己的站點如何判斷訪問加載的速度是快還是慢那？今天長春SEO站長就和大家說說一款非常實用的網頁測速工具，webpagestest 大家通過這款工具，就可以對於自己網頁的內容進行詳細的測試了。

　　WebPagetest的核心是用於測量和分析網頁的性能。有很多選項，看著很嚇人，但其實做快速測試是很簡單的。 本指南將引導你提交測試和結果解釋。

一、運行性能測試(Running a Performance Test)

　　1.1 輸入網頁網址(Enter The Page URL)

　　你需要做的第一件事是決定一個頁面來測試。大多數人從他們的網站的主頁開始(但不要忽視人們訪問的其他頁面)。確定要測試的頁面後，轉到WebPagetest並為其指定要測試的頁面的URL：

　　1.2 選擇位置(Select a Location)

　　接下來，應該決定從哪裏運行測試。WebPagetest具有位於世界各地的測試機器，你應該從接近用戶訪問的位置進行測試，從列表中選擇一個位置，或者單擊Select from Map按鈕，從地圖視圖中選擇一個位置(只需單擊氣球，然後確定)。如果將指針放在氣泡上，它們將顯示一條消息，提示位置信息：

　　1.3 選擇瀏覽器(Select a Browser)

　　最後，需要決定使用什麽瀏覽器進行測試。不同的位置支持不同的瀏覽器，如果給定的位置沒有正在尋找的瀏覽器，可以嘗試不同的位置。 Dulles，VA USA位置支持WebPagetest工作的所有瀏覽器(IE 6,7,8和9)。現在忽略“dynaTrace”瀏覽器，這些用於更高級的分析。我們通常建議使用IE7進行初始測試，因為它幾乎是最糟糕的情況，並且更容易看到很多問題，所以如果你不知道什麽瀏覽器，開始只需使用IE7。

　　1.4 提交測試(Submit the Test)

　　一切配置完成後，點擊START TEST按鈕，請求將發送到測試位置進行測試。測試可能需要一段時間才能運行，具體取決於有多少次測試(在測試之前至少有一分鐘的測試時間，但是它的時間甚至更長)。一旦測試完成，你將得到結果。

二、解釋結果(Interpreting the Results)

　　第一次看到結果信息可能有點嚇人，信息量有點大，但首先可以先查看一些關鍵信息。

　　2.1 優化等級(Optimization Grades)

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

　　字母等級 占比

　　A 90%+

　　B 80% ~ 89%

　　C 70% ~ 79%

　　D 60% ~ 69%

　　F 0% ~ 59%

　　2.1.1 阻塞時間(First Byte Time)

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

　　關於First Byte Time和TTFB的區別在Metrics一節中做了簡單分析。

　　預期首字節 = RTT * 3 + SSL

　　比值 = 100 - (實際觀測首字節 - 預期首字節) / 10

　　其中RTT的指往返通信時間。更多網絡術語可以參考整理的網絡協議

　　2.1.2 長連接已啟動(Keep-alive Enabled)

　　請求網頁上的內容(圖像、JavaScript、CSS、Flash等)需要與Web服務器建立連接。每次都重新連接會耗費一些時間，所以最好復用連接，keep-alive實現了這個方法。默認情況下，在配置中已啟用，而且是HTTP 1.1標準的一部分，但有時它們將被破壞(可能是無意的)。啟用keep-alive通常只是服務器上的配置更改，不需要對頁面本身進行任何更改，通常可以將加載頁面的時間減少40-50%。計算公式如下：

　　比值 = 實際復用連接數 / 預期復用連接數

　　2.1.3 壓縮文本(Compress Text)

　　除了圖片或視頻，剩余的都是某種類型的文本(html，javascript，css等)。HTTP提供了一種以壓縮形式傳輸文件的方法。啟用文本資源壓縮通常只是服務器配置更改，不需要對頁面本身進行任何更改，提高性能降低服務內容的成本(通過減少傳輸的數據量)。由於文本資源通常在頁面的開頭(javascript和css)下載，因此，提供文本資源的快慢很影響用戶體驗。計算公式如下：

　　比值 = 資源壓縮後的大小 / 實際資源的大小

　　2.1.4 壓縮圖片(Compress Images)

　　圖像壓縮檢查僅查看照片圖像(JPEG文件)，確保質量不會設置得太高。JPEG圖像可以在不降低視覺質量的情況下壓縮。我們可以在Photoshop的“網絡存儲”模式中，使用一種質量級別為“50”的壓縮圖像的標準。在視覺質量不是很差的情況下，盡量多的壓縮圖像。在照片中經常包含其他數據，特別是如果照片來自數碼相機(包含關於相機，鏡頭，位置，縮略圖的信息)，其中一些應該在被發布到網絡之前就移除(小心保留任何版權信息)。計算公式如下：

　　比值 = 圖片壓縮後的尺寸 / 圖片實際的尺寸

　　2.1.5 緩存靜態內容(Cache Static Content)

　　靜態內容是網頁上不經常更改的內容(圖片，javascript，css)。可以配置它們，以便用戶的瀏覽器將它們緩存起來，瀏覽器決定一個資源被緩存多久取決於2個因素：緩存壽命和過期時間(TTL)。資源的壽命可以通過2個標簽配置：實體標簽(ETags)和首部標簽(Last-Modified)。過期時間是根據2個TTL首部標簽：Cache-Control的max-age屬性和Expires Header。如果用戶回到頁面(或訪問使用相同文件的其他頁面)，他們可以使用已經擁有的副本，而不是重新請求文件Web服務器。在用戶瀏覽器中成功緩存靜態內容可以顯著提高重復訪問的性能(高達80+%，具體優化率取決於頁面)，並能減少Web服務器上的負載。有時可能很難實現緩存而不改變頁面，所以不要盲目地啟用它(你需要能夠更改希望改變的任何文件的文件名)。

　　比值 = 過期資源數得分 / 靜態資源總數

　　這個評級需要一個緩存生命周期評分系統，如果一個靜態資源的生命周期超過一周，就100分，超過一小時，最多50分，以上情況之外都是0分。

　　2.1.6 合並JS/CSS文件(Combine JS/CSS Files)

　　提高性能通常意味著減少對內容的請求數，最簡單(最重要的)方法之一是減少在頁面開頭加載的css和javascript文件數量(在 中會阻塞頁面顯示)。一個簡單的實現方法是將JavaScript和CSS分別合並到一個文件中(CSS最好在JavaScript之前加載)。減少用戶從屏幕上看到東西的等待時間，對用戶體驗有巨大的影響。計算方式：

　　2.1.7 使用CDN(Use of CDN)

　　每個內容的請求都是從用戶的瀏覽器到Web服務器，再返回。隨著距離越來越遠，這樣一個往返可能消耗很多時間(頁面上的請求越多，消耗的時間越多)，把你的服務器建立在離用戶比較近的地方就能解決這個問題，這正是內容分發網絡(CDN)的作用。他們在世界各地都有靠近用戶的服務器，從靠近用戶的服務器提供網站的靜態內容。使用CDN沒有意義的唯一情況是如果網站的所有用戶都已經接近Web服務器(例如社區網站)。計算方式：

　　比值 = 通過CDN服務獲取的靜態資源數 / 靜態資源總數

　　2.2 高級度量(High-level Metrics)

　　結果頁頂部的數據表提供了有關已加載頁面的一些高級信息：

　　2.2.1 首次視圖(First View)

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

　　2.2.2 重復視圖(Repeat View)

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

　　2.2.3 文檔加載完畢(Document Complete)

　　從初始化請求，到加載所有靜態內容(圖片、CSS、JavaScript等)，但可能不包括由JavaScript執行觸發的內容，可以理解為開始執行window.onload。原文如下：

　　The metrics grouped together under the Document Complete heading are the metrics collected up until the browser considered the page loaded (onLoad event for those familiar with the javascript events). This usually happens after all of the images content have loaded but may not include content that is triggered by javascript execution.

　　2.2.4 頁面所有元素加載時間(Fully Loaded)

　　從初始化請求，到Document Complete後，2秒內沒有網絡活動的時間，這包括在主網頁加載後由JavaScript觸發的任何活動。原文如下：

　　The metrics grouped together under the Fully Loaded heading are the metrics collected up until there was 2 seconds of no network activity after Document Complete. This will usually include any activity that is triggered by javascript after the main page loads.

　　2.2.5 整頁加載時間(Load Time)

　　與Document Complete中的時間屬性相同。原文如下：

　　The Load Time is the time from when the user started navigating to the page until the Document Complete event (usually when all of the page content has loaded).

　　2.2.6 第一個字節加載時間(First Byte)

　　這個時間表示從初始化請求到服務器響應後，接收到第一個字節的時間。此時的大部分時間通常稱為“後端時間”，服務器為用戶構建頁面的時間量。原文如下：

　　The First Byte time is the time from when the user started navigating to the page until the first bit of the server response arrived. The bulk of this time is usually referred to the "back-end time" and is the amount of time the server spent building the page for the user.

　　2.2.7 頁面渲染時間(Start Render)

　　渲染時間表示屏幕上顯示東西的第一個時間點，在這個時間點之前，用戶看到的是一個空白頁。這並不表示用戶看到了內容，可能只是一個簡單的背景色，但這是用戶開始看到內容的第一個指標，我理解這個為白屏時間。原文如下：

　　The Start Render time is the first point in time that something was displayed to the screen. Before this point in time the user was staring at a blank page. This does not necessarily mean the user saw the page content, it could just be something as simple as a background color but it is the first indication of something happening for the user.

　　2.2.8 DOM元素數量(DOM Elements)

　　在測試結束時測試頁面上的DOM元素的計數。

　　2.2.10 HTTP請求數(Requests)

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

　　2.2.11 傳輸的字節量(Bytes In)

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

WebPagetest-測試網頁加載速度