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

先來看界面吧

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

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

“Page Speed”面板

Page Speed附加組件的Page Speed面板

和YSlow使用Yahoo的14條標(biāo)準(zhǔn)來衡量網(wǎng)頁的綜合速度一樣，Page Speed通過Google指定的20條標(biāo)準(zhǔn)來衡量網(wǎng)頁的綜合速度。而Page Speed面板就是用來展現(xiàn)你的網(wǎng)頁在Google20條標(biāo)準(zhǔn)上的得分?！癙age Speed”通過分析你的網(wǎng)頁加載、呈現(xiàn)速度，用20條標(biāo)準(zhǔn)來衡量，最終告知你的網(wǎng)頁速度如何、哪種標(biāo)準(zhǔn)得分多少、問題所在、如何改進(jìn)等信息。

“Page Speed Activity”面板

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

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

“Page Speed”的20條衡量標(biāo)準(zhǔn)

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

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

繼續(xù)補(bǔ)充：如果你想非常詳細(xì)的了解YSlow的14條衡量標(biāo)準(zhǔn)的超詳細(xì)講解，那么你可以購買一本書，書的名字叫做：《高性能網(wǎng)站建設(shè)指南》，書的封面是一條經(jīng)常出現(xiàn)在《人與獸》一類電影中的那種狗狗。

高性能網(wǎng)站建設(shè)指南

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

Put CSS in the document head

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

更多關(guān)于"Put CSS in the document head"的更多詳細(xì)解釋，請看官方文檔。

Use efficient CSS selectors

使用效率更高的CSS選擇符。舉個(gè)很簡單的例子：盡量不要使用*號(hào)選擇符：

*{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官方文檔的詳細(xì)解釋。

Leverage proxy caching

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

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

關(guān)于“Leverage proxy caching”的文檔資料，請看官方文檔的詳細(xì)解釋。

Minify JavaScript

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

關(guān)于“Minify JavaScript”的更多文檔資料，請看官方文檔的詳細(xì)解釋吧。

Optimize images

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

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

Minimize cookie size

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

關(guān)于“Minimize cookie size”的更多文檔資料：看這里。

Enable gzip compression

使用gzip壓縮。詳細(xì)這個(gè)大家應(yīng)該已經(jīng)比較熟悉了。說白了就是服務(wù)器向?yàn)g覽器發(fā)的是經(jīng)過壓縮的頁面，這樣傳輸?shù)淖止?jié)就會(huì)大大減少，速度自然也就快了。

這幅圖說明了gzip技術(shù)的工作原理

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

Combine external JavaScript

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

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

更多的關(guān)于“Combine external JavaScript”的文檔，可以看這個(gè)。

Minimize DNS lookups

最小化DNS查詢。詳情請看這個(gè)：Minimize DNS lookups規(guī)則詳情。

Optimize the order of styles and scripts

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

IE瀏覽器對同一個(gè)域名下的文件，同時(shí)只能下載2個(gè)文件

關(guān)于“Optimize the order of styles and scripts”更多詳情，請看這個(gè)。

Serve resources from a consistent URL

相同的資源，使用相同的url地址。道理很好理解，如果是相同的一張圖片，就不要東方一下，西方一下，然后引用的時(shí)候使用不同的url地址。為什么要這樣做，道理也很簡單，因?yàn)椤彺妫?/p>

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

Avoid CSS expressions

避免CSS表達(dá)式。這個(gè)我在《如何提高網(wǎng)頁的效率（上篇）——提高網(wǎng)頁效率的14條準(zhǔn)則》一文中也有講到?，F(xiàn)在需要補(bǔ)充的是：IE8已經(jīng)不再支持css表達(dá)式功能。

關(guān)于“Avoid CSS expressions”，更多詳情看這里。

Parallelize downloads across hostnames

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

更多關(guān)于“Parallelize downloads across hostnames”的詳情，可以看這個(gè)。

Combine external CSS

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

關(guān)于“Combine external CSS”的更多詳情，可以看這個(gè)。

Specify image dimensions

明確的指明圖片的高度和寬度。很久很久以前，long long ago。一個(gè)同學(xué)問我：“明確的指明圖片的寬度和高度，是否能加快頁面的渲染速度？”當(dāng)時(shí)我的答案是：“這個(gè)應(yīng)該沒有關(guān)系吧！”?？磥?，當(dāng)時(shí)的我是誤人子弟了。明確的指出圖片的高度和寬度，能夠有效的加快瀏覽器在渲染圖片周圍布局和繪制呈現(xiàn)時(shí)的速度。

更多關(guān)于“Specify image dimensions”的詳情，可以看這里。

Minimize redirects

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

關(guān)于“Minimize redirects”的詳細(xì)文檔，可以看這里。

Defer loading of JavaScript

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

關(guān)于“Defer loading of JavaScript”的更多詳情，請看這里。

更多相關(guān)資料

關(guān)于“Page Speed”的更多相關(guān)閱讀。重要的下載鏈接在這里：點(diǎn)擊進(jìn)入Page Speed下載頁面，支持現(xiàn)在最新的FireFox3.5.2版本。

• 插件
• 插件