Rails Front-End 優化

Update(2008/3/24): Yahoo 有份投影片值得一看:

| View | Upload your own

因為 Registrano hosting 在國外的關係，先天速度就慢了一個太平洋。所以如何讓網頁能夠快點 loading 完並且 display 出來變得非常重要且感受明顯。我們可以使用 Firefox 的 YSlow 或 safari web inspector 來檢測實際下載的瓶頸在哪裡。教材則有 O’Reilly High Performance Web Sites 一書值得一讀，裡面的 guideline 有十四點如下:

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put Stylesheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicates Scripts
13. Configure ETags
14. Make Ajax Cacheable

第2點在台灣可以試試 WebAMP 的 reverse proxy 服務。

第4點 Gzip 強烈建議務必裝上 (CPU比網路速度快多了XD)，設定如下:

# For Apache, add this to your VirtualHost section:
# Deflate
AddOutputFilterByType DEFLATE text/html text/xml text/plain text/css application/x-javascript text/javascript;
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

#You may also need to load the deflate_module if it wasn't already included with your server.

第8點強烈建議壓縮你的 JavasScript 檔案，在 Rails 中可以使用 bundle_fu plugin。 (已知一個地雷是 bundle_fu 跟底下的 asset_host 衝突，請依照這個 comment 自己 patch 一下)

第3點跟第13點的設定則是:

<Directory "/your_rails/public">
  FileETag none
  ExpiresActive On
  ExpiresDefault "access plus 1 year"
</Directory>

Rails 還有個功能是可以設定 asset_host，方便你把靜態檔案(即 /public 目錄)用更快速便宜的 web server 提供 (別讓 mongrel 直接提供這些靜態檔案啊)，像 Registrano 就乾脆把所有靜態檔案放在另一台網路稍快的 server 上:

# /config/environments/production.rb
config.action_controller.asset_host  = 'http://asset.example.org"  

Rails2 更支援可以同時分散到四台 asset0~asset3，只要加%d (當然你的 DNS 也要設好，最簡單的作法可以指到同一台 server)

# /config/environments/production.rb
config.action_controller.asset_host  = 'http://asset%d.example.org"  

好處是可以讓 browser 同時平行下載 (單一 domain 的下載最多同時兩個 persistent connections, see HTTP連線管理一文)，因此如果你的網站靜態檔案(如圖檔)很多的話，應該會有不錯的效果。不過在 Registrano 實測效果並沒有很好，這是因為 DNS Lookup 也要花時間(即上述第9點)

P.S. 使用 asset host 的一個副作用是 cross domain 問題，因此吃了不少 Javascript library 苦頭。