使用 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的擴展，準(zhǔn)確地說是Firebug的擴展。Firebug的強大功能相信大家都知道的，Page Speed就是對其進(jìn)行了進(jìn)一步擴展，集成的功能包括：

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

安裝與使用

插件地址在這里。

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

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

其中各項按照重要性進(jìn)行排序，展開每一部分，可以得到詳細(xì)的報告。其中，紅色圖標(biāo)表示未進(jìn)行優(yōu)化，黃色表示可以進(jìn)行進(jìn)一步優(yōu)化，綠色表示已經(jīng)進(jìn)行優(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來進(jìn)行標(biāo)記說明，其可以明顯減少文本文件的大小，從而節(jié)省帶寬和加載時間。我做過的一個實驗，發(fā)現(xiàn)啟用gzip后，jquery 1.2.6 minify版本的大小從54.4k減少到16k，減少了70%。gzip適用的情況包括：

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

如何檢查gzip是否啟用？使用Firebug，在Net模塊中進(jìn)行檢查HTTP Header是否有Content-Encoding gzip標(biāo)記。

最小化JS和圖片

對于JavaScript文件本身具有非常大的優(yōu)化空間。所謂JavaScript壓縮，就是通過一些工具將函數(shù)、變量名進(jìn)行優(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)常使用的方法。當(dāng)請求的資源在瀏覽器本地得到緩存后，第二次請求這些內(nèi)容就可以從直接緩存中取出，減少了連線的HTTP請求。

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

Expires and Cache-Control: max-age. 即內(nèi)容在緩存中的生命有效期。第一次請求后，在生命有效期之內(nèi)的后期請求直接從本地緩存中取，不過問服務(wù)器；
Last-Modified and ETag. 其中Last-Modified標(biāo)記文件最后一次修改的時間，瀏覽器第二次請求是在頭部加入上次請求緩存下來的Last-Modified時間，如何兩次請求期間服務(wù)器的內(nèi)容沒有進(jìn)行修改，服務(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文件的位置后移，如果可能，還可以通過部分代碼進(jìn)行異步加載。另外，對于JS和CSS在必須放置在一起情況，需要報JS放置在CSS之后，這樣CSS與JS文件可以同步下載。

文件拼接

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