站點性能評測實驗

實驗內容

本實驗的目的是利用主流的站點分析工具對Alexatop100的前5名站點進行分析。評價其站點性能。

在本實驗中。我將在Windows平臺下進行實驗，評測的站點是眼下Alexatop 100 的前5名的站點，包含google.com, Facebook.com, Youtube.com, Yahoo.com 和baidu.com。但是由於網絡的問題，咱們沒法登錄到Facebook.com和Youtube.com的頁面。因此我將對待評測的網頁進行順延，即對排在第6位wikipedia.org和排在第七位的Qq.com進行評測。對於google.com咱們用google.com.hk來替代。爲了完整的評估站點的性能。我將會對這些站點在多個主流的瀏覽器的表現進行分別評測。終於獲得正確完整的實驗結果。

圖 1 Alexa top 500部分截圖

實驗工具

在實驗中，我將採用兩種性能分析工具對同一個站點進行分析，交叉檢驗得到的數據。從而得到更加準確、可信的數據。

YSlow

YSlow是廣爲人知的Web頁面性能分析、測試和調試工具。是由Yahoo開發的基於網頁性能分析的瀏覽器插件。YSlow最初僅僅支持安裝在火狐瀏覽器的Firebug上，隨着着Yahoo對YSlow的不斷開發和維護，眼下YSlow已經有很是多版本號了。可以支持FireFox、Chrome、歐朋瀏覽器和歐朋移動版等衆多瀏覽器。現如今，YSlow已經成爲業界的評價標準之中的一個。YSlow需要的參數僅僅有待測的網頁網址和對站點進行評測時應用的規則集這兩部分。YSlow參數較少，用起來簡單，不需要太多的專業背景知識。同一時候，YSlow爲開發人員本身主動提供的優化建議，省去了不少開發人員本身分析的工做。

因此本實驗中將利用YSlow對站點進行性能評測。

WebPageTest

WebPageTest是眼下功能最全面的開源監測工具。它是由google員工Patrick Meenan全職開發的性能監測工具。它可以經過截圖來直觀地看到頁面載入的過程，並能進行視頻對照，方便演示性能優化結果。它可以部署到本地機器，方便進行內部的性能測試。

它也可以直接在線使用，網址爲：http://www.webpagetest.org/。

在線使用時可以看到最新的「可視化頁面比較」功能，它能捕捉頁面渲染過程當中各個階段的截屏。

像慢鏡頭回放似的比較和對手的細微區別。和其餘測試工具相比WebPageTest最大的優勢是可以生成很是全很是具體的站點性能測試報告。但是在線使用至關於用國外的server測試，載入具體數據會比較慢。

像YSlow同樣，WebPageTest需要的參數僅僅有待測試的網址，使用很是方便。

實驗參數

實驗平臺	Windows 7 Ultimate
實驗環境	chrome、firefox、ie
分析工具	YSlow、WebPageTest

實驗

1.     google.com.hk

在用YSlow評測時，google.com.hk總得分爲93分。得分較低的有兩項。各自是Use a Content DeliveryNetwork(CDN)和Add Expires Headers。

當中，Use a Content Delivery Network(CDN)這條規則的得分等級爲F。是因爲有8個靜態components沒有在CDN上，給出的建議是將這8個components增長到CDN。Add Expires Headers規則的得分等級爲D。是因爲有三個靜態組件沒有設置過時時間。事實上在首次檢測CDN的時候，YSlow僅僅安Yahoo知道的hostname來進行檢查。但很是多公司都購買了CDN服務。因此這一項的價值並不重要。

 

圖 2 YSlow對google.com.hk的評分詳情

同一時候google.com.hk還充分利用了cache。從圖1可以看出。在增長cache以後。請求數由10個降低到了4個。需要傳輸的內容從283.9K降低到了僅僅需要傳輸HTML/Text的21.8K，傳輸內容下降了90%多。

從而可以縮短響應時間。

圖 3 google.com.hk 分析統計圖

在用WebPageTest評測時。First ByteTime和Cache static content 指標的得分都爲F，分數比較低。First Byte Time指從後端傳輸過來的第一個字節的時間，從結果中看到傳輸詳情爲：557 ms First Byte Time。分析以後多是由於WebPageTest是經過走國外的網絡線路進行分析的，因此這一項可能都會比較低。

參考價值不大。

而Cache static content指將靜態內容保存在cache中，當用戶在此請求時。可以從cache中查找，加快了速度。

Cache的詳情是：Leverage browser caching of static assets: 37/100。

靜態緩存僅僅中了37%。

圖 4 WebPageTest評測google頁面

2.     Yahoo.com

在用YSlow評測時，Yahoo.com總得分爲82分。得分較低的有6項。Make fewer HTTP requests得分爲D，建議將一些JS腳本、CSS等分別合併，下降請求數；Add Expires headers得分爲F。7個靜態組件沒有設置過時時間；Put JavaScript at bottom得分爲D，有8個JS腳本在文檔的頭部，風格很差。Minify JavaScript andCSS得分爲F。有11個components可以被精簡掉。Reduce the number of DOM elements得分爲E，有1674個DOM，應該下降DOM；Do not scale images in HTML，有12出圖片在HTML中。應避免將圖片寫在HTML中。

此外，Yahoo.com利用了Cache技術。將不少CSS、JS等內容寫到了緩存，提高了在此訪問Yahoo頁面的速度。

 

圖 5YSlow評測YaHoo.com

Yahoo.com的終於評分比google.com少了很是多，經過查看兩個頁面可以直觀的發現，這有很是大部分緣由是Yahoo的頁面載入的內容太多形成的。

在用WebPageTest評測時。Yahoo.com的評測結果竟然比Goolge的結果好一些。First Byte Time的得分爲F，返回第一字節用時1223 ms ；但是在上文中也已經提到了，此處的FirstByte Time指標參考性不大。而Keep-alive Enabled和Compress Transfer得分都爲A。這兩項作的很是不錯。Effective use of CDN也表現出了不錯的性能。ProgressiveJPEGs和Cache static content得分爲C。有72% Progressive JPEGs被使用。有77%的靜態組件增長到了Cache緩存。

圖 6WebpageTest對Yahoo.com的評測結果

3.     Baidu.com

在用YSlow評測時。Baidu.com的總得分是95分，是一個很高的得分。

Use a Content DeliveryNetwork 得分爲F。有8個靜態conponents沒有增長到CDN中。Add Expires headers得分爲B。有1個靜態組件沒有設置超時設置。其餘的評分均爲A。

從YSlow對Baidu.com和google.com.hk的結果分析中咱們可以發現，Baidu和Google頁面的結果很的相近，都是Use a Content Delivery Network和Add Expires headers兩條需要改動。

咱們也可以從頁面中直接觀察，兩個搜索引擎的首頁都很的乾淨整潔，沒有其它的雜亂的信息。

圖 7 YSlow對baidu.com的評測結果

在用WebPageTest評測時，First ByteTime和Cache static content 指標的得分比較低。First Byte Time得分爲D，接受到第一字節的內容用時1517 ms。Cache的命中率爲75%，同一時候Baidu.com的頁面差點兒沒實用到CDN服務。

這些地方都有改進的空間。

 

圖 8 WebPageTest對Baidu.com的評測結果

4.     Wikipedia

用YSlow進行評測時，wikipedia的得分爲86分。得分較低的有兩項。各自是Use a Content DeliveryNetwork(CDN)和Add Expires Headers。

當中，Use a Content Delivery Network(CDN)這條規則的得分等級爲F，是因爲有19個靜態components沒有在CDN上，給出的建議是將這19個components增長到CDN。

Add Expires Headers規則的得分等級爲F，是因爲有19個靜態組件沒有設置過時時間。

圖 9 YSlow對wikipedia的評測結果

雖然Wikipedia對Use a ContentDelivery Network(CDN)和Add ExpiresHeaders兩條指標作的並不十分好，但是他對緩存的利用達到了極致。從下圖可以看出，Wikipedia在第二次訪問的時候差點兒再也不需要下載不論什麼內容，將所有內容增長緩存中。

這極大的下降了一些靜態的內容再次反覆下載的狀況。提高了頁面響應速度。

圖 10 wikipedia的分析統計圖

再用WebPageTest進行評測時，Wikipedia的結果比較差。如上文所說FirstByte Time參考價值不大，此後將再也不討論這一項。Compress Transfer的得分爲D，假設使用gzip壓縮可以將傳輸比例變爲現在的61%；而Cache static content和Effective use of CDN則全然沒實用到。這與咱們用YSlow評測時的結論全然相悖。

圖 11 WebPageTest對Wikipedia的評測結果

5.     Qq.com

用YSlow進行評測時,qq.com的得分僅僅有38分。有多達9項規則的評分都是F，其他都是A。

如下主要介紹這些評分爲F的規則和詳情。Make fewer HTTP requests將JS進行合併，並且將一些背景圖片合併到CSS中。Use a Content Delivery Network (CDN)建議將多達190個靜態組件增長到CDN中，提高用戶訪問響應速度；發現一條空的連接，建議儘可能避免空連接；有多達30個靜態組件沒有設置超時時間；7個純文本組件沒有進行壓縮傳遞；有22個JS腳本沒有放在文檔底部。組件被分爲多於4個領域，增大了DNS的查找時間。頁面具備太多的DOM元素。在HTML中放入了圖片。

Qq.com需要優化的內容仍是比較多的。形成Qq.com得分低的還有一個緣由是該網頁中載入的內容太多。

圖 12 YSlow對qq.com的評測結果

用WebPageTest進行評測時。Qq.com的結果依然比較差。Compress Transfer得分爲C，假設使用gzip壓縮可以將壓縮比例變爲現在的70%；圖片的壓縮比例爲59%；進一步壓縮傳輸內容可以下降傳輸開銷。

瀏覽器cache命中率爲63%；CDN利用率爲28%；提升Cache和CDN的使用率可以避免某些內容的反覆查找和傳輸，從而提高響應速度。沒實用到ProgressiveJPEGs；從這些結果中可以看出。Qq.com需要改進的內容很是多。

圖 13 WebPageTest對Qq.com評測結果

總結

整體來看，Google.com和Baidu.com的性能仍是不錯的，而Yahoo.com、Wikipedia.com和Qq.com則還需要進一步優化。尤爲是Qq.com，整體性能還比較差，有很是大的優化空間。

然而這5個網頁的內容差異也很是大，Baidu和Google是搜索頁面，內容比較少，乾淨整潔。而Yahoo和Qq則是新聞頁面，內容繁多，自己的優化難度也比較大。Wikipedia介於二者之間。

從對5個頁面的結果分析可以看出。不一樣的工具對同一個網頁的評測結果可能會差距很是大。

因此假設在現實中進行優化的時候，可以綜合嘗試多種性能優化工具，以求可以將所有潛在的問題發現並解決。

參考文獻

[1]     http://www.webpagetest.org/

[2]     http://hikejun.com/blog/2010/01/09/%E6%9C%AC%E5%9C%B0%E5%AE%89%E8%A3%85webpagetest/

[3]     http://blog.csdn.net/chenlei0630/article/details/22724539

[4]     http://vickynuli.blog.163.com/blog/static/18043849220128269564392/