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