1. 程式人生 > >網頁性能測試之WebPageTest

網頁性能測試之WebPageTest

政策 式表 ora 後來 存在 有理 定義 byte sed

想知道您的網站,性能怎麽樣?

很自然,首先得找一個廣被認可的測試工具。我們推薦WebPageTest:

WebPageTest

它是google 開源項目”make the web faster “的子項目(“make the web faster包括page speed,spdy,tcpm等等”),它本來是AOL內部使用的工具,後來在2008年基於BSD開源。其網址如下:
http://www.webpagetest.org/

技術分享

我們抓取出來裏面的主要指標。

技術分享

那麽,問題來了:

  1. 這些指標具體什麽意思?

  2. 這些指標之間什麽關系?

  3. 我怎麽知道自己網站處於什麽水平?

本文就是對這些指標逐一分析,分析其之間的關系,並基於HTTPArchive數據庫,給您一個基線,以更科學地評估您負責網站的“水平”如何。

HTTPArchive數據庫

是一個開源的、用來記錄互聯網上站點的性能情況和趨勢的數據庫,存儲有國內外很多網站性能指標的“歷史”數據。因此可用於網站橫向性能比較等。其網址為:
http://httparchive.org/

本文使用的HTTPArchive數據庫版本為2015年3月15日。

1. 加載時間(Load Time)

加載時間,或稱onLoad Time指的是從開始初始導航到窗口開始加載事件(載入)之間的時間。

分析:

這是一個網頁加載事件,許多第三方綜合測試工具都會測試這個指標,因其被廣泛采用,所以將其作為一個有價值的衡量指標。

其與顯示完成(visualComplete)及速度指數(SpeedIndex)關聯度非常高。其與頁面發送的請求總數之間正相關,即頁面中發送的請求總量越多,網站越慢 。

在從HTTP/1.1轉換到HTTP2的過程中,這是一個必須要測量的有趣數字。HTTP2(或者H2)的目標是復用TCP連接,旨在減少因為TCP建聯3次握手導致的消耗,這樣會有助於減少傳輸總量並縮短通信時長。

技術分享

作用:

始終測量Load Time,這是因為它是最廣泛使用的指標之一,可以在綜合測試以及RUM與WebPageTest等不同測量資源間提供性能對比。

需要註意的是,我們認為這是一個非常老的指標,並不能代表用戶感知到的性能。隨著時間的推移,應該減少對於該指標的倚重,開始采用與性能更加緊密相關、對你的網站更有實際意義的新指標(更多信息請參見註釋)。

值分布:

所有值的單位均為毫秒(ms)

技術分享
HTTPArchive數據

2. 首字節時間(First Byte)

首字節時間(通常縮寫為TTFB)指的是從開始初始導航直到瀏覽器接收基礎頁面首個字節(重定向之後)之間的時間。

分析:

TTFB似乎與其他指標沒有太強的相關性。充其量可以影響啟動渲染時間。所有其他指標與該值均相對獨立。

技術分享

作用:

如果針對使用CDN的靜態資源收集該指標,該參數可以在一定程度上幫助測量CDN性能。而如果對象是頁面上的動態內容,則會有助於確定連接以及後端耗時的健康情況。

由於這是唯一一個可以揭露後端耗時或者CDN比較性能的指標,該指標應當被納入性能規劃的一部分,作為考量依據。

值分布:

所有值的單位均為毫秒(ms)

技術分享
HTTPArchive數據

3. 開始渲染(Start Render)

開始渲染時間指的是從開始初始導航直到首項非空白內容出現在瀏覽器顯示屏上的時間。

本文暫不做展開。

4. 顯示完成(VisualComplete)

visualComplete嘗試測量用於渲染“明顯位置”(ATF)內容所需要的時間。

分析:

VisualComplete與fullyLoaded(全部加載完畢)、LoadTime及SpeedIndex關系密切。

除非頁面上有很多延遲加載的內容,否則visualComplete將與fullyLoaded時間密切相關。

技術分享

作用:

由於該指標的值與SpeedIndex及onLoad相關,若單獨對其測試,則價值不高。

但是,若想要與延遲加載前後的頁面性能進行對比,則同時使用visualComplete與fullyLoaded測量實施效率。

值分布:

所有值的單位均為毫秒(ms)

技術分享
HTTPArchive數據

5. 速度指數(Speed Index)

速度指數是一個計算的指標,用來衡量頁面渲染用戶可見內容的迅速程度(越低越好)。關於計算方法的更多信息,請點擊此處查看。

分析:

SpeedIndex分別和這幾個指標緊密關聯:visualComplete、renderStart與LoadTime時間。其與首字節時間(TTFB)及pagespeed的相關性較低。

技術分享

作用:

之所以測量speedindex,是因為它與內容渲染關系密切,尤其是位於明顯位置的內容。

因為是一個數字值,其更易於對比,主觀解讀的空間很小。最大的不足是該指標並非在所有測試產品中都是可用的。

值分布:

對於高度內容導向型的網站,理想的目標值約為1000。

以下是SpeedIndex的分布,所有數值均基於單位(units)而非時間。

技術分享
HTTPArchive數據

6. 請求總數(Total number of Requests)

請求總數是指一個頁面加載完成時,向服務器端發起的請求個數。

分析:

請求總數似乎與第三方域名之類的非性能指標相關聯。但是,其確實顯示出與fullyLoaded、visualComplete 及onLoad的密切相關性。
技術分享

作用:

如果已經測量過諸如onLoad這樣的指標,那麽該指標的價值可能有限。但是當客戶過於依賴第三方標簽、或者加載了過多第三方內容時我們有理由認為存在第三方內容導致了性能下降,則該指標將可能有用。WebPageTest提供一個選項可以測試前端SPOF。想要了解更多可以點擊這裏。

技術分享

值分布:

所有數值均基於單位(units)

技術分享
HTTPArchive數據

7. 頁面速度指數 (PageSpeed Insights)

谷歌PageSpeed主要用於測量“與網絡無關的頁面性能:服務器配置、頁面HTML結構及其對圖片、JavaScript與CSS的使用”。

能針對移動設備和桌面設備衡量網頁的性能。該工具會抓取網址兩次,一次是通過移動設備用戶代理,另一次是通過桌面設備用戶代理。

PageSpeed得分範圍是從0到100分。分數越高,代表性能越好。85分或更高分表明網頁性能良好。

分析:

該指標與其他指標的相關性非常低,也能說明其相對的獨立性 。同樣,還需要註意的是,在多部分情況下為負相關,即時間指標的值越低,pagespeed分數越高。

技術分享

作用:

谷歌PageSpeed值相對獨立於其他指標,但影響網站結構。由於這些是需要由網站開發者實施的測量,因此其是一個非常重要的指標,應成為性能規劃工具包的一部分。

除了僅僅作為一個數字,PageSpeed還可以識別頁面設計問題,如可能更難以通過其他指標識別的阻止javascripts與樣式表。

值分布:

所有值介於0-100之間的單位。

技術分享
HTTPArchive數據

8. 字節總數 (Total Bytes)

即從頁面收到首字節開始計算到整個頁面加載完成時一共下載的對象大小總和。

分析:

下載的字節總數與任何指標的關系均不太緊密。但是,其與fullyLoaded、VisualComplete及Load Time的相關性相當高。

值得註意的是,字節總數與fullyLoaded、VisualComplete及onLoad的相關性是非線性的(斯皮爾曼等級相關系數)。

從經驗上而言,這可能意味著字節總數2個單位的增長將導致fullyLoaded 1個單位的增長。其可能還意味著字節總數1個單位的增長將導致fullyLoaded 2個單位的增長。
技術分享

作用:

該指標將有助於揭示規模的突然膨脹,尤其是由於圖片或新Javascript庫導致的膨脹。

如果你的性能規劃中允許使用一個額外指標,則其將會是一個不錯的全方位跟蹤指標。

值分布:

所有數值單位均為字節(bytes)。

技術分享
HTTPArchive數據

9.域名數量(domains)

指頁面加載的所有資源中,域名數量的總和(由於某些原因,有可能包含很多其他第三方的域名)。

分析:

更高的域名數量似乎意味著網站更加繁忙。同樣,更高的域名數量還意味著fullyLoaded時間稍微更高。但是,其相關性並不太高。

技術分享

作用:

該指標將有助於跟蹤碎片與第三方數量。一般而言,必須通過嚴格的測試流程控制第三方域名數量。

執行始終不同步加載第三方或在onLoad之後對其加以推遲的政策應能確保第三方數量對感知到的性能產生最低影響。

這也是一個需要跟蹤的很好的指標,用於確保限制第三方合規性。但是,測量該指標將不會提供關於用戶感知性能的任何有益信息。

值分布:

所有值均基於單位/個數。

技術分享
HTTPArchive數據

性能指標小結

HTTPArchive收集了大量關於桌面網站的數據。SpeedIndex與pageLoad、startRender及visualComplete等感知性能指標擁有顯而易見的相關性。許多指標與其相關,如域數量、請求數量以及DOM元素數量。

但是,需要註意的是,如果測量指標有限,建議測量SpeedIndex、LoadTime與PageSpeed分數。

如果面臨添加更多第三方的大量壓力,那麽請測量域數量與請求總數。這些指標對性能的影響可以記錄下來,並出示給相應的業務所有者。在合理使用第三方以及使用真正重要的服務方面,這將提供很好的數據支持。

指標相關性的測試說明

看到這裏或許您對這些衡量網址性能指標的參數以及他們之間的關系有了一個總體的認識,但可能您對於各個指標之間是怎麽形成關聯及相關性是如何測試的不太了解,下面將對這部分進行說明。

1. 測試的理論基礎

為了計算結果,本文使用了HTTPArchive數據庫。從測試之日起,提取了所有的非空值並加以對比,以了解其中的關聯。

我們使用下面2個系數來對各個數值之間的關系進行計算:

  • 皮爾遜相關系數(Pearson Correlation):是衡量兩個變量X與Y之間線性相關(依賴)的指標,其值介於+1與?1之間,1表示完全正相關,0表示無相關性,?1表示完全負相關。

  • 斯皮爾曼相關系數(Spearman Correlation):是一個衡量兩個變量之間統計相關性的非參數指標。其評估的是兩個變量之間關系的緊密程度,可以使用單調函數進行描述。如果沒有重復的數據值,則當各個變量均是彼此的完美單調函數,則完美的斯皮爾曼等級相關系數為+1或?1。

在本分析中,超過+/-0.7的相關系數被視作顯著相關,低於+/-0.4的值被視作相關性不高。

如果兩個值之間的相關性不高,其可能意味著兩個變量之間相對獨立。

2. 測試結論

根據研究結果,在豐富程度與提供不同數據視角方面,以下指標似乎比較突出:

  • SpeedIndex(性能感知)

  • LoadTime(後端兼容性)

  • 谷歌Page Speed(網絡獨立優化)

  • TTFB(後端效率、CDN效率)

  • 域總數(第三方幹擾)

需要註意的是,每個網站都是不同的,而且服務於各種不同的目的 。所以最好的測量指標要能夠測量關鍵業務行為的效率。如果指標均不符合你的要求,請考慮開發有助於提升你業務的自定義指標。

延展閱讀

    • 原始的速度分數相關性電子表格:https://docs.google.com/a/akamai.com/spreadsheets/d/1yUvYlJmt2DBrmO0DIxO9ywXEyz_8CmoesWHAYpRQmeM/edit?usp=sharing

    • WebPageTest指標定義:https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics

    • 性能預算的一般概念:https://en.wikipedia.org/wiki/Performance-based_budgeting

    • Tim Kadlec的性能預算博客:http://timkadlec.com/2013/01/setting-a-performance-budget/

    • Lara Callendar Hogan的Etsy性能預算:https://codeascraft.com/2014/12/11/make-performance-part-of-your-workflow/

網頁性能測試之WebPageTest