增加網頁讀取速度

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

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

先挑一個dynamic js loader來做平行下載

https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ

超多的，百家爭鳴，但是每個套件製作的背景目的不同，也適用不同場合，大部分套件都可以幫忙做到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秒後就突然變得有用了。

安裝Sass和Compass

Sass 是一個和 Less 類似的工具，讓css寫起更結構化也更輕鬆。其實兩個只要學會其中一個就夠了，一般人應該跟我一樣都會選 Less 吧，因為Sass的首頁看起來...不像是熟css的設計者寫出來的東西，不是非常好看，不過發現了 Compass 之後我決定改用Sass了，因為他支援很多”潛規則”，而且連縮圖(sprites)也能幫處理，非常兇猛。

安裝Compass和Sass
gem update --system
gem install compass
建立compass project
#export PATH=$PATH:/Users/sushih-wen/.gem/ruby/1.8/bin
#來試試sass語法 compass create project_name --syntax sass
設定config.rb參考官方文件說明
development開發環境設定範例，僅供參考  http_path = "/static/" css_dir = "../static/css" sass_dir = "sass" images_dir = "../static/img" javascripts_dir = "../static/js" output_style = :nested # output_style = :expanded or :nested or :compact or :compressed relative_assets = true line_comments = false preferred_syntax = :sass 當修改sass時讓compass自動編譯成css到css_dir(請先備份原始css)
compass watch
底線開頭的css不會被編譯，所以可以建立一個基本的_base.sass來給其他sass檔案引用
/* _base.sass */ @import compass/reset @import compass/css3 /* hide in phone view */ @media (max-width: 480px) .hidden-phone display: none
之後進production時壓縮css檔，用下面指令覆蓋設定  compass compile --output-style compressed --force

這類工具在自己寫的時後幫助很大，但是在測試一些別的css時就需要做轉換，沒有很爽

如果我是作者可能會增加一個@raw標籤來讓原始css語法相容

延伸閱讀：Sass and Compass in Action