Google近日推出了一款網(wǎng)站性能優(yōu)化工具：Page Speed（http://code.google.com/speed/page-speed/）。它旨在幫助站長(zhǎng)與網(wǎng)站開(kāi)發(fā)者分析網(wǎng)站中存在的性能方面的問(wèn)題，并有針對(duì)性地提出改進(jìn)意見(jiàn)。Page Speed在功能方面極其類(lèi)似于Yahoo!的網(wǎng)站性能優(yōu)化YSlow，不過(guò)YSlow要比Page Speed推出早得的多。它們都是基于Firebug的Fireffox插件，使用方法也類(lèi)似。這里我主要介紹一下Google新推出的Page Speed的使用，對(duì)Yslow感興趣的朋友可以參照我以前的這篇文章《你的網(wǎng)站為什么會(huì)慢？——用YSlow為你的網(wǎng)站提速》，同時(shí)還有我翻譯的Yahoo!的文章Yahoo!網(wǎng)站性能最佳體驗(yàn)的34條黃金守則——內(nèi)容、JavaScript和CSS、服務(wù)器、圖片、Coockie與移動(dòng)應(yīng)用，相信一定會(huì)對(duì)你提高網(wǎng)站性能有幫助。
一、Page Speed的安裝及使用
Page Speed是一款Firefox插件，同時(shí)他依附于別款插件Firebug，也就是說(shuō)你的Firefox瀏覽器中必須已經(jīng)安裝了Firebug才能安裝Page Speed。安裝環(huán)境為Firefox 3.0.4以上，F(xiàn)ireug 1.3.3以上。
Page Speed的使用也很簡(jiǎn)單，在Firefox中點(diǎn)擊右下角的Firebug圖標(biāo)啟動(dòng)后，再點(diǎn)擊Page Speed選項(xiàng)卡即可。要注意的是，你要對(duì)你網(wǎng)站內(nèi)的某個(gè)頁(yè)面進(jìn)行性能分析，你必須先把該頁(yè)面加載完成后才能使用Page Speed，也就是說(shuō)只有在瀏覽器左下角出現(xiàn)“Done”或者"完成"之后才可以啟用Page Speed進(jìn)行分析。如果頁(yè)面中流媒體，可能不會(huì)現(xiàn)在“完成”，這種情況要等到流媒體可以播放。
然后點(diǎn)擊“Analyze Performance”（性能分析），這時(shí)Page Speed會(huì)根據(jù)web performance best practices （網(wǎng)頁(yè)性能最佳實(shí)踐）進(jìn)行逐項(xiàng)打分。然后根據(jù)重要程序和優(yōu)先級(jí)對(duì)每項(xiàng)進(jìn)行排列。
此外，你還可以點(diǎn)擊每條建議前面的“加號(hào)”展開(kāi)查看詳細(xì)的描述，或者直接點(diǎn)擊每條規(guī)則相看該規(guī)則的具體內(nèi)容，還可以點(diǎn)擊“Show Resource”（查看來(lái)源）來(lái)查看每條建議是針對(duì)頁(yè)面中哪部分內(nèi)容提出的。
對(duì)于分析結(jié)果中的符號(hào)說(shuō)明一下：
- 紅色感嘆號(hào)代表高優(yōu)先級(jí)提示，表示這一項(xiàng)嚴(yán)重影響了你的頁(yè)面性能，你需要優(yōu)先對(duì)其進(jìn)行性能優(yōu)化；
- 橙色三角代表此項(xiàng)提示需要引起你的注意，并進(jìn)行適當(dāng)改進(jìn)；
- 綠色的對(duì)號(hào)代表該項(xiàng)規(guī)則在你的網(wǎng)站中應(yīng)用得到，你在修改了前面兩部分的提示之后，它們有可能變?yōu)榫G色的對(duì)號(hào)；
- 藍(lán)色消息符號(hào)是為你提供了額外的幫助信息，請(qǐng)稍加留意（需要注意的是，如果你的頁(yè)面中出現(xiàn)了大量的此類(lèi)符號(hào)，可能是因?yàn)槟阍陧?yè)面加載完成之前就進(jìn)行了網(wǎng)站性能分析）。
二、活動(dòng)記錄
活動(dòng)記錄是一條頁(yè)面活動(dòng)的時(shí)間軸，它記錄了包括網(wǎng)絡(luò)事件、JavaScript運(yùn)行在內(nèi)的所有瀏覽器活動(dòng)。你可以使用它并配合性能分析中的數(shù)據(jù)進(jìn)一步對(duì)網(wǎng)站性能做出評(píng)估。
- 查看頁(yè)面運(yùn)行過(guò)程中所耗費(fèi)的時(shí)間，以毫秒計(jì)算；
- 查看瀏覽器事件，包括頁(yè)面加載完成后的事件；
- 區(qū)分造成頁(yè)面響應(yīng)緩慢的原因，其中包括網(wǎng)絡(luò)來(lái)時(shí)、DNS查找、連接建立、JavaScript運(yùn)行等；
- 獲取在特定時(shí)間或者事件下才響應(yīng)的JavaScript事件列表；
- 可以對(duì)其它標(biāo)簽或者窗口中打開(kāi)的頁(yè)面進(jìn)行分析；
- 多頁(yè)面加載時(shí)的頁(yè)面加載順序；
- 對(duì)根據(jù)Page Speed優(yōu)化前后的表現(xiàn)進(jìn)行對(duì)比。
三、理解Page Speed中的事件
頁(yè)面記錄選項(xiàng)卡下是通過(guò)時(shí)間線來(lái)記錄各種資源加載到頁(yè)面所有需要的時(shí)間。事件的記錄時(shí)間間隔為10毫秒，如果事件需要的時(shí)間少于10毫秒那么它將用較短的色塊來(lái)表示。時(shí)間線中沒(méi)有任何顏色的表示，在瀏覽器事件的運(yùn)行依賴(lài)于其它進(jìn)程，如DOM和CSS渲染、Flash ActionScript、渲染、操作系統(tǒng)事件等。
| 網(wǎng)絡(luò)事件 |
描述 |
|
|
DNS |
瀏覽器查找DNS所需要的時(shí)間 |
|
|
t連接等待 |
瀏覽器與網(wǎng)站服務(wù)器建立連接（TCP）需要一定的時(shí)間。由于瀏覽器可以打開(kāi)的連接數(shù)目是有限的，如果達(dá)到這個(gè)限制他必須等其它連接關(guān)閉之后才能再重新建立一個(gè)新的連接。（更多關(guān)于瀏覽器連接的信息可以參照Parallel downloads across hostnames）。 這個(gè)事件顯示了瀏覽器等其它連接完成的時(shí)間。 |
|
|
連接 |
瀏覽器和web服務(wù)器建立連接。這個(gè)事件只有打開(kāi)新連接時(shí)出現(xiàn)，已有連接重新打開(kāi)使用不包含在內(nèi)。 |
|
|
請(qǐng)求發(fā)送 |
瀏覽器發(fā)送的HTTP請(qǐng)求。只顯示GET方式的請(qǐng)求。 |
|
|
已連接 |
瀏覽器通過(guò)網(wǎng)絡(luò)等待接收數(shù)據(jù)。事件隨著瀏覽器TCP連接的結(jié)束而結(jié)束。 |
| 本地事件 |
描述 |
|
|
緩存 |
瀏覽器成功將內(nèi)容加入到緩存中。 |
|
|
可用數(shù)據(jù) |
可用于瀏覽器呈現(xiàn)的數(shù)據(jù)。由于web服務(wù)器發(fā)送大量的數(shù)據(jù)，如果文件很大那么有可能一個(gè)資源會(huì)出現(xiàn)多個(gè)該事件。 |
|
|
獲取JS |
瀏覽器獲取JavaScript。該事件可能會(huì)延緩其它事件，如果此種情況出現(xiàn)，將會(huì)在其下一行列出。 |
|
|
運(yùn)行JS |
瀏覽器執(zhí)行JavaScript。該事件可能會(huì)延緩其它事件，如果此種情況出現(xiàn)，將會(huì)在其下一行列出。如果獲取JS和運(yùn)行JS中間有時(shí)間間隔，這說(shuō)明源文件中包括有延時(shí)功能的函數(shù)。 |
此外，Page Speed還包括了對(duì)已完成的JavaScript函數(shù)的信息搜集功能，當(dāng)頁(yè)面中的JS函數(shù)一旦運(yùn)行，PageSpeed就會(huì)捕捉到相關(guān)信息。不通過(guò)對(duì)Page Speed進(jìn)行設(shè)置還可以對(duì)未觸發(fā)函數(shù)、延時(shí)加載函數(shù)等進(jìn)行收集。
下面的圖片顯示了7800毫秒時(shí)已經(jīng)加載但還未觸發(fā)的函數(shù)列表：
而下面則顯示是已經(jīng)觸發(fā)運(yùn)行了的JS函數(shù)：
此外Pge Speed還有諸如JavaScript函數(shù)控制、瀏覽器User Agent設(shè)置等更高級(jí)功能。具體使用大家可以與YSlow對(duì)比一下。
相信，用好這兩款工具，對(duì)于站長(zhǎng)和網(wǎng)站開(kāi)發(fā)者來(lái)說(shuō)會(huì)有極大的幫助。
本文網(wǎng)址： http://www.dudo.org/article/NewSoftware/using_google_page_speed.htm
轉(zhuǎn)載請(qǐng)注意出處