Yahoo的YSlow大家應該都比較熟悉了，那是找出我們網頁為什么緩慢的利器。其實Google也有類似的FireFox插件，名字叫做“Page Speed”，雖然名字比YSlow遜色很多，但是功能卻完全不在YSlow之下。不同于YSlow的14條衡量標準，“Page Speed”的網頁速度衡量標準又是什么呢？本文將為您揭曉“Page Speed”的神秘面紗。

先來看界面吧

和YSlow一樣，“Page Speed”也是一個基于firebug附加組件的FireFox插件。雖然聽起來有點拗口，但是意思很容易理解：如果你想用“Page Speed”，那么你就要安裝firbug，而firebug是FireFox的一個附加組件，所以你也必須安裝FireFox瀏覽器。同時另外一個意思是：IE！NO！Sorry！

“Page Speed”有兩個面板，分別是“Page Speed”面板和“Page Speed Activity”面板。

“Page Speed”面板

Page Speed附加組件的Page Speed面板

和YSlow使用Yahoo的14條標準來衡量網頁的綜合速度一樣，Page Speed通過Google指定的20條標準來衡量網頁的綜合速度。而Page Speed面板就是用來展現你的網頁在Google20條標準上的得分。“Page Speed”通過分析你的網頁加載、呈現速度，用20條標準來衡量，最終告知你的網頁速度如何、哪種標準得分多少、問題所在、如何改進等信息。

“Page Speed Activity”面板

Page Speed附加組件的Page Speed Activity”面板

“Page Speed Activity”面板用于展現你的網頁加載各種元素的所用時間，這樣，你就可以更明確的知道到底是誰在浪費、占用大量的時間，從而更有針對性的進行改進。不同的階段占用的時間，用不同的色塊進行表示，恩，真是貼心的設計。

“Page Speed”的20條衡量標準

如果你對YSlow比較熟悉的話，那么一定會知道YSlow用于衡量網頁速度的14條標準，而“Page Speed”有20條衡量標準，那么他們之間的到底有什么不同呢？Google又會給我們帶來什么新的觀點呢？

補充一下：如果你對YSlow的14條衡量標準不熟悉的話，您可以閱讀一下，我以前寫的兩篇文章，分別是《如何提高網頁的效率（上篇）——提高網頁效率的14條準則》和《如何提高網頁的效率（下篇）——Use YSlow to know why your web Slow》，文章較為詳細的介紹了YSlow這個工具的使用，以及YSlow的14條衡量標準。這兩篇文章同時也被收錄到了《博客園精華集-web標準之道》一書當中。

繼續補充：如果你想非常詳細的了解YSlow的14條衡量標準的超詳細講解，那么你可以購買一本書，書的名字叫做：《高性能網站建設指南》，書的封面是一條經常出現在《人與獸》一類電影中的那種狗狗。

高性能網站建設指南

OK，不扯那么多了，讓我們回到正題：“Page Speed”的20條衡量標準到底是什么呢？

Put CSS in the document head

將你的CSS樣式表文件放在整個頁面的頭部。沒有什么難理解的。css先下載下來，就能更快的渲染網頁效果。從而讓人們感覺網頁速度很快。

更多關于"Put CSS in the document head"的更多詳細解釋，請看官方文檔。

Use efficient CSS selectors

使用效率更高的CSS選擇符。舉個很簡單的例子：盡量不要使用*號選擇符：

*{padding:0;margin:0}

像這樣的得分會很低，正確的辦法應該是只對你想設置的標簽元素進行設置，例如：

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0;}

如果你對本條有更多的興趣，可以去看Use efficient CSS selectors官方文檔的詳細解釋。

Leverage proxy caching

代理緩存。這個名詞聽起來好像很屌的樣子，以至于我也是查了資料才知道：所謂proxy cacheing，就是一種公共緩存，用于靜態資源，允許瀏覽器從最近的代理服務器上，而不是從遠程的原始服務器，下載這些靜態資源。這些代理服務器，通常而言就是有ISP，接入服務商所提供的。

這樣的代理服務器緩存可以讓通過同一ISP接入服務的用戶共享這些靜態資源，而節省原始服務器的帶寬，以及下載速度也會大大提高，特別是對于局域網的用戶有特別的好處。

關于“Leverage proxy caching”的文檔資料，請看官方文檔的詳細解釋。

Minify JavaScript

最小化JavaScript腳本。這個貌似沒有什么好說的，壓縮一下你的JavaScript腳本吧。

關于“Minify JavaScript”的更多文檔資料，請看官方文檔的詳細解釋吧。

Optimize images

優化圖片，其實最經常使用的就是css script了，也有翻譯為“css精靈”的，雖然翻譯的很美好，但是其實很簡單，就是將多個圖形，放在張圖片文件中。這樣，可以有效的減少http請求的數量。

如果你對“Optimize images”有更多的興趣，可以看這個。一個css cript的示例： 《【CSS翻轉門】技術實例講解（附源碼下載）》。

Minimize cookie size

最小化你的cookie。cookie的確是個好東西，他可以讓你在用戶的客戶端保存一些東西，但是，千萬不要什么都往用戶口袋里面塞。原因很簡單，cookie大小有限，有最大限制，而且cookie過大會減慢網頁呈現的速度。另外為了安全性考慮，也不要把所有的什么破銅爛鐵都塞到cookie里面。

關于“Minimize cookie size”的更多文檔資料：看這里。

Enable gzip compression

使用gzip壓縮。詳細這個大家應該已經比較熟悉了。說白了就是服務器向瀏覽器發的是經過壓縮的頁面，這樣傳輸的字節就會大大減少，速度自然也就快了。

這幅圖說明了gzip技術的工作原理

欲了解更多的“Enable gzip compression”資料，請看官方文檔。

Combine external JavaScript

合并外部的JavaScript文件。道理很簡單，依然是為了少讀取.js文件，從而有效的減少http請求數量。

合并外部的JavaScript文件可以有效的減少http請求數量

更多的關于“Combine external JavaScript”的文檔，可以看這個。

Minimize DNS lookups

最小化DNS查詢。詳情請看這個：Minimize DNS lookups規則詳情。

Optimize the order of styles and scripts

優化樣式表和腳本的順序。如果你要是看過老趙的《掙脫瀏覽器的束縛》系列的話（本系列也已經收錄到《博客園精華集-web標準之道》一書中）。就知道IE瀏覽器對同一個域名下的文件，同時只能下載2個文件。所以，到底先讓哪些樣式表先下載下來，讓哪些腳本先下載下來，這個順序就非常重要了。所以，如果有可能，請重視一下樣式表和腳本的順序吧。推薦的做法是：將css放在js文件上面，讓css文件先被加載，這樣就可以先讓網頁渲染出來，從而加快瀏覽者的感知速度。

IE瀏覽器對同一個域名下的文件，同時只能下載2個文件

關于“Optimize the order of styles and scripts”更多詳情，請看這個。

Serve resources from a consistent URL

相同的資源，使用相同的url地址。道理很好理解，如果是相同的一張圖片，就不要東方一下，西方一下，然后引用的時候使用不同的url地址。為什么要這樣做，道理也很簡單，因為——緩存！

更多“Serve resources from a consistent URL”詳情，請看這里

Avoid CSS expressions

避免CSS表達式。這個我在《如何提高網頁的效率（上篇）——提高網頁效率的14條準則》一文中也有講到。現在需要補充的是：IE8已經不再支持css表達式功能。

關于“Avoid CSS expressions”，更多詳情看這里。

Parallelize downloads across hostnames

通過不同的主機同時下載網頁資源。這個的道理已經在“Optimize the order of styles and scripts”這一準則中講述過。道理依然是老趙的《掙脫瀏覽器的束縛》提到的原因：IE瀏覽器對同一個域名下的文件，同時只能下載2個文件。

更多關于“Parallelize downloads across hostnames”的詳情，可以看這個。

Combine external CSS

合并外部的css文件。這條和“Combine external JavaScript”準則的道理一樣。還是為了減少http請求數量。

關于“Combine external CSS”的更多詳情，可以看這個。

Specify image dimensions

明確的指明圖片的高度和寬度。很久很久以前，long long ago。一個同學問我：“明確的指明圖片的寬度和高度，是否能加快頁面的渲染速度？”當時我的答案是：“這個應該沒有關系吧！”。看來，當時的我是誤人子弟了。明確的指出圖片的高度和寬度，能夠有效的加快瀏覽器在渲染圖片周圍布局和繪制呈現時的速度。

更多關于“Specify image dimensions”的詳情，可以看這里。

Minimize redirects

盡量避免重定向。道理很簡單，你從A地點到你的同事B先生家，到了那里，他的鄰居告訴你，B先生已經搬家了，搬到了C地點，于是，你又跑到C地點，然后C地點有個人告訴你，B先生現在又搬家了，已經搬到了D地點。于是你又跑到了D地點，才找到了這個B同事。而這個裝B的B同事，告訴你，你如果直接就來D地點，就不用那么麻煩了，而且速度也會更快一些。網頁的跳轉和重定向的道理是一樣的。

關于“Minimize redirects”的詳細文檔，可以看這里。

Defer loading of JavaScript

延期加載JavaScript。這個聽起來真是個高科技的東西呀。其實這玩意還真是非常的有效呀。不僅可以延期加載腳本，像一些大的圖片、flash也都可以延期加載。其實實現原來也不是很難，就是先不加載一些比較大的東西，當頁面加載完畢后，再加載那些東西。

關于“Defer loading of JavaScript”的更多詳情，請看這里。

更多相關資料

關于“Page Speed”的更多相關閱讀。重要的下載鏈接在這里：點擊進入Page Speed下載頁面，支持現在最新的FireFox3.5.2版本。

“Page Speed”的更多相關閱讀列表

• “Page Speed”官方首頁
• “Page Speed”技術文檔庫
• 《如何提高網頁的效率（上篇）——提高網頁效率的14條準則》
• 《如何提高網頁的效率（下篇）——Use YSlow to know why your web Slow》
• 老趙的《掙脫瀏覽器的束縛（3） - 兩個連接還不夠“并行”》

轉載于:https://www.cnblogs.com/alterhu/archive/2012/04/06/2434431.html

總結

以上是生活随笔為你收集整理的测试网页速度性能的利器-Yslow和page speed的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。