使用 Page Speed 工具作 Web 優化

現在有工具可以幫忙分析了,要做 Web 優化的門檻已經沒有這麼高了!

Web 一直以來都是人們使用 Internet 的重心,隨著各式各樣的服務產生,一般人花在 web 上的時間又更多了,「web 讀取速度」漸漸成為無形的使用體驗一部份。試想,如果訪客在開你 web 的每一頁都要花過多時間等東西(圖片、CSS、JavaScript)下載,那這樣的使用體驗肯定不會太好。

所以網頁開發者便開始研究不少 High Performance Web Sites 的議題,或許也用過 Y!Slow 這個工具來作優化。但不知道是不是因為大家過去太不瞭解 web、瀏覽器,web 優化的技巧層出不窮,HPWS 的原作者甚至又寫了一本 Even Faster Web Sites,也就順勢地推出另一個分析工具--Page Speed

Page Speed 也是一個 firebug 的外掛,也就是說,要使用這個工具,你必須先裝好 Firefox 瀏覽器以及 firebug 這個附加元件。接著,當你在瀏覽網頁時,就可以開啟 firebug 面板,上頭就有了 Page Speed 的功能頁籤。


Page Speed 在 firebug 中的功能頁籤

Page Speed 的功能很多,要做 web 優化至少要會按下「Analyze Performance」的按鈕,讓這個工具去分析一下目前瀏覽的頁面效能表現如何,測量的標準便是 HPWS 及 EFWS 兩本書所使用的規則:


按下Analyze Performance

分析完的結果(慘不忍睹)

當工具完成分析後,它就會根據不同的規則來說明你的網站有哪些造成瀏覽器讀取效能下降,打開每個規則內的說明,也會有一些建議改進的方法,比方說當這工具覺得你的 CSS 檔案可以做一下壓縮減少傳輸量,它就會列出每個 CSS 有多少的進步空間:


Page Speed 的建議事項

如果你要接受它提供的建議,可以點下 minimized version 取得壓縮後的結果,再把它部署到你的網站中。

照這個工具所提供的功能,就算你不是很懂怎麼做 web 優化,但照著 Page Speed 的建議按表操課就可以做非常多的優化了!身為網站開發者,這是千萬不能不裝的工具啊~

  • jaceju

    感謝大神的分享~

  • 太棒了~有了這個工具,做主題時就可以用來優化。

    抱歉,再順便問個與文章無關的問題,為什麼 Feed 輸出都只有文章標題了?

    • 我想大概是 FeedBurner 出點小錯了吧 @@