前陣子啟用gzip後，部落格載入速度確實快上不少，但它主要是針對快取出來的html頁面進行壓縮，外部引入檔案如css和javascript仍維持原來大小，而這些加起來還挺多的，今天就再接再勵繼續幫wordpress減肥加速吧…

先用WebSiteOptimization分析網站，javascript加css有136KB
WebSiteOptimization分析一下網站

瘦身後，變成80KB（網頁載入速度可以再快一些了）
WebSiteOptimization瘦身減肥後網站

具體作法有點複雜，但先簡單說明步驟：
(1) 下載gzip.zip，解壓出gzip.php後放到網站根目錄

(2) 修改根目錄的.htaccess，增加gz的識別支援及網址改寫

#識辨gz檔案的支援
<Files *.js.gz>
  AddEncoding gzip .js
  ForceType application/x-javascript
</Files>
<Files *.css.gz>
  AddEncoding gzip .css
  ForceType text/css
</Files>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

#wordpress靜態網址，如果沒有使用，就略過
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

#讀到css和js檔，就重導至gzip.php
RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

#讀到.css，判斷如果瀏覽器支援gzip且.css.gz檔存在，就進行重導
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*).css $1.css.gz [L,QSA]

#讀到.js，判斷如果瀏覽器支援gzip且.js.gz檔存在，就進行重導
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*).js $1.js.gz [L,QSA]
</IfModule>

(3) 開始瀏覽並四處逛逛自己的網站，用以產生js和css的gz檔
產生js和css的gz檔

(4) 閒逛完後，再次改寫.htaccess，把RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]給註解或刪除

上述補充說明：
(1) gzip.php是參考优化WordPress心得(1) Gzip压缩CSS和JS後修改而成，gz檔案的產生路徑我變更為原始檔案所在處

(2) .htaccess的增修是參考Add GZip compression和How to GZip Drupal 6.x’s aggregated CSS and JS files

(3) 有讀到js和css才會交給gzip.php處理，所以要到處逛逛，讓網站可以產生這些gz壓縮檔（注意：如果有使用快取，瀏覽時要按Ctrl+F5來強制更新頁面）

(4) 效能考量，若每次都要透過gzip.php去判斷這些檔案有沒有產生，對主機反而是一種負擔。我想都已經生出來了，就不要再重覆檢查，直接使用就好，所以刪除或註解掉這段敘述

註1：如果js、css或者是wordpress及外掛，有進行更新修改，記得要把RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]加回.htaccess中，再重覆步驟3及步驟4，生成新的gz檔

註2：這篇寫完後都覺得有點麻煩，看來又是初學者止步的文章，留給瘦身熱血者品嚐

註3：下次再玩圖片減肥，從網站分析來看，檔案也很多很大；這些優化加速方法，所有網站都通用，不限wordpress

類似方法參考：Gzipping CSS and Javascript files

其它資料記錄：
．WordPress Optimization Bible
．加速blog：序
．JavaScript Minifier
．Online YUI Compressor
．优化Wordpress-wp终极优化手册

 
  • Hemidemi
  • MyShare
  • Udn
  • funP
  • Furl