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