使用 Google Page Speed 給你的網(wǎng)站提速

CevenCheng 2011-08-03

展開全文

使用 Google Page Speed 給你的網(wǎng)站提速

2010-03-16

Google Code官方釋出新項目：Google Page Speed,。這個項目的理由也非常簡單,，因為Google是高性能Web應(yīng)用的佼佼者，希望通過這個項目將Web前端優(yōu)化的一些經(jīng)驗分享給整個社區(qū),。

項目的開發(fā)者基本上是Google的工程師,，這里需要提到的一個人：Steve Souders。他曾經(jīng)效力于Yahoo,，是YSlow項目的開發(fā)者之一,，而且還是Firebug Work Group 成員之一。他一直以來致力于高性能Web應(yīng)用領(lǐng)域,。更加有趣的是,，在Stanford CS系就開了這么一門課：High Performance Web Sites (CS193H) 。另外,，他還寫了兩本書,，都在O’reilly出版，分別是High Performance Web Sites 與 Even Faster Web Sites,。

Page Speed是什么

Page Speed是Firefox的擴展,，準確地說是Firebug的擴展,。Firebug的強大功能相信大家都知道的,，Page Speed就是對其進行了進一步擴展，集成的功能包括：

頁面性能綜合分析,，可以針對頁面提供綜合報告和建議
內(nèi)置JavaScript以及圖片優(yōu)化,，包括JS Minify
改進的資源請求顯示，對于Firebug Net模塊的改進顯示
頁面請求活動視圖,，以直觀的圖標方式顯示各請求的加載時間順序以及每個請求各部分的時間消耗，開發(fā)人員可以根據(jù)這些數(shù)據(jù)找到性能的瓶頸
JS性能優(yōu)化,，可以分析出未被調(diào)用的以及可以延遲調(diào)用的函數(shù)

安裝與使用

插件地址在這里,。

安裝好以后，打開Firebug,，可以看到新增的兩個標簽頁：Page Speed與Page Speed Activity,。

其中，Page Speed標簽頁包括兩個功能：Analyze Performance與Show Resources,，其中Analyze Performance是Page Speed的核心功能,。點擊以后Page Speed開始工作，幾秒鐘以后就會得出一份詳細的性能分析報告,。

其中各項按照重要性進行排序，展開每一部分，可以得到詳細的報告,。其中,，紅色圖標表示未進行優(yōu)化,，黃色表示可以進行進一步優(yōu)化,，綠色表示已經(jīng)進行優(yōu)化,。

其余部分的功能可以在Google Code的官方主頁上找到,，這里就不贅述了，只重點介紹Analyze Performance這一功能,。

性能優(yōu)化技巧

使用gzip壓縮

這里放在第一,，是性能優(yōu)化效果最顯著的一步。所謂gzip壓縮是一種開發(fā)的壓縮算法,，目前的主流瀏覽器(Firefox, Safari, Chrome, IE4及以上)與主流服務(wù)器(Apache, Lighttpd, Nginx)均對其有很好的支持。gzip壓縮是通過HTTP 1.1協(xié)議中的Content-Encoding : gzip來進行標記說明,，其可以明顯減少文本文件的大小,，從而節(jié)省帶寬和加載時間。我做過的一個實驗,，發(fā)現(xiàn)啟用gzip后,，jquery 1.2.6 minify版本的大小從54.4k減少到16k，減少了70%,。gzip適用的情況包括：

HTML\CSS\JavaScript文件,，gzip算法對于文本文件的效率比較高，而jpg/gif/png/pdf等二進制文件本身已經(jīng)進行了一次壓縮,，再使用gzip的成效已經(jīng)不明顯了,。而且gzip壓縮需要消耗服務(wù)器的資源，而解壓縮需要消耗瀏覽器的資源,，對于比較大的二進制文件具有非常高的性能消耗,；
盡量使用一種大小寫方式，要么全部大寫,，要么全部小寫,。學過數(shù)據(jù)結(jié)構(gòu)和算法的同學一定知道壓縮其本身就是對冗余信息熵進行壓縮，如何數(shù)據(jù)原素的類型種類太多,，其信息冗余度會降低,，從而壓縮率降低,；
過小的文件(通常小于150個字節(jié))不宜進行g(shù)zip壓縮，因為gzip會在文件頭加入相關(guān)信息,，對于小文件反而會增加文件的長度,；

如何檢查gzip是否啟用？使用Firebug,，在Net模塊中進行檢查HTTP Header是否有Content-Encoding gzip標記,。

最小化JS和圖片

對于JavaScript文件本身具有非常大的優(yōu)化空間。所謂JavaScript壓縮,，就是通過一些工具將函數(shù),、變量名進行優(yōu)化(其實就是盡可能縮短變量名長度)，消除多余字符(比如空格,、換行符,、注釋等)，最終得到的代碼可以在分析和執(zhí)行上得到性能提升,。壓縮后得到的代碼對于機器而言是可讀的,，對于人來說就不行了，因為文件內(nèi)容已經(jīng)面目全非,。所以壓縮一般用于生產(chǎn)期的代碼,，不能使用于開發(fā)期。

同樣的道理,，圖片內(nèi)容中也有一定的冗余信息,，比如文件頭部的一些內(nèi)容描述(這些內(nèi)容在jpg)圖片上尤其如此。通過一定的工具(比如GIMP)可以去除這些信息,，從而節(jié)省一定的空間,。

幸運的是，Page Speed已經(jīng)內(nèi)置了這些功能,，我們不需要找第三方的工具。

比如jquery.form.js,，最小化后減少11.9kb,，減少54.8%的空間。點擊minified version,，在新窗口中可以看到Page Speed為你優(yōu)化好的版本,，直接更新到服務(wù)器就可以了。

啟用瀏覽器緩存

這是經(jīng)常使用的方法,。當請求的資源在瀏覽器本地得到緩存后,，第二次請求這些內(nèi)容就可以從直接緩存中取出，減少了連線的HTTP請求,。

HTTP 1.1提供的緩存方法主要有兩種：

Expires and Cache-Control: max-age. 即內(nèi)容在緩存中的生命有效期,。第一次請求后,，在生命有效期之內(nèi)的后期請求直接從本地緩存中取，不過問服務(wù)器,；
Last-Modified and ETag. 其中Last-Modified標記文件最后一次修改的時間,，瀏覽器第二次請求是在頭部加入上次請求緩存下來的Last-Modified時間，如何兩次請求期間服務(wù)器的內(nèi)容沒有進行修改,，服務(wù)器直接返回304 Not Modified,，瀏覽器接到以后直接使用本地緩存。否則,，服務(wù)器會返回200以及更新后的版本,。ETag是服務(wù)器對于文件生成的Hash散列，其生成算法與最后一次修改的時間相關(guān),。瀏覽器第二次請求發(fā)送上次的ETag信息,，服務(wù)器通過簡單的比對就知道是否應(yīng)該返回304還是200。

JavaScript延遲加載

通常瀏覽器在解析HTML時遇到JS文件會先下載,，解析執(zhí)行后才會下載后面的內(nèi)容,，期間自然會造成一定的延時。為了提高性能,，盡可能將JS文件的位置后移,，如果可能，還可以通過部分代碼進行異步加載,。另外,，對于JS和CSS在必須放置在一起情況，需要報JS放置在CSS之后,，這樣CSS與JS文件可以同步下載,。

文件拼接

這里主要包括JS/CSS等文本文件和圖片。對于文本文件,，盡可能將同一類型放置到一個文件中,，減少HTTP請求。對于CSS背景圖片,，可以使用Sprit技術(shù)將圖片拼接到一起,，然后使用background-position屬性選擇對應(yīng)的圖片。Google首頁上的這個圖片就是一個很好的例子,。