2012年10月19日

增加網頁讀取速度

這篇主要討論靜態檔案下載,首先先裝Google PageSpeed ,有chrome版和firefox版,而且有貼心的正體中文,也可以用一些測速網站工具像是http://tools.pingdom.com/fpt/來當做評量參考,真的只要參考就好,拿個90分就可以了

簡單說增加網頁讀取速度不外乎平行下載、壓縮、快取和把檔案放近一點

先挑一個dynamic js loader來做平行下載
超多的,百家爭鳴,但是每個套件製作的背景目的不同,也適用不同場合,大部分套件都可以幫忙做到parallel loading, conditional executing,有些還會動態幫忙讀取css,任君挑選,不會選就先用$LAB爽一下,有在用RequireJS的當然繼續用,需要fall back機制可以用YepNope

這裡我有一個問題,傳統上認為靜態檔案合併比較好,因為節省訪問和處理時間,但是當平行下載是可行的(瀏覽器現在根本都原生支援平行下載),在給定延遲時間和反應時間下,應該會有一個檔案大小的臨界點,超過這個臨界點之後整體下載速度就會輸給平行下載了吧?所以這個臨界點是我們需要關心的嗎?

另外檔案合併有一個明顯的壞處,當修改部分檔案的時候,使用者必須重新下載整份檔案,喪失快取的好處,所以什麼時候要合併哪些檔案還是要自己思考一下

『壓縮』的部份主要是compress和gzip

compress css 大家應該都用scss/sass, compass或是less了,當然也可以用線上工具像是
http://www.csscompressor.com/

compress javascript首推uglify-js,自己寫個bash來做combine,也有一些線上工具可以使用http://jscompress.com/

gzip和cache就交給nginx來設定。設定cache的時候有個兩難,一般來說會設定有query_string的request做cache,不然萬一檔案需要修改,又清除不了瀏覽器cache,可能要改路徑或檔名了,但是另一方面有些proxy對於有query_string的請求不會做cache,所以也是要思考一下

『檔案放近一點』原來說的是用類似Google CDN的服務,只有非常有名的套件像是jQuery之輩有救援到。自從Amazon S3+CloudFront出現後,一般平民也可以是可以享用高級全球化部屬,其中js和css等當然也可以壓縮後放在S3上面,但是有個小問題就是S3到目前還不會做gzip,摳憐喔,解決方法就是直接先gzip -9之後再丟上去,順便改一下Accept-Encoding就行了,但是衍生的問題是有些使用者還在用民國初年不會解壓縮的瀏覽器,這部分就是需要偉大的開發者使用愛心判斷式+fall back strategy來救使用者於水火了。

以上方法僅供參考,沒事不需要做網頁讀取加速,一方面網站會慢通常不是靜態檔案在慢,而且沒用的網站也不會因為加速2秒後就突然變得有用了。