2010/9/17 更新:
修改判斷方法。

2010年9月11更新:
大範圍更新。

Gzip壓縮就是將網頁輸出壓縮讓網頁加速開啟,減少等待時間,而wordpress原來有內建gzip壓縮,而後來取消了,以下開始說明一些gzip壓縮的方法。
以下方法幾乎都是建立在Apache伺服器,而裝Wordpress最好是在LAMP(Linux+Apache+Mysql+PHP)的主機,所以過來的文章應該都是建立在這上面。
但在那之前,要檢查有沒有必要模組,才能達到要的功能。
而壓縮通常是使用Apache的mod_deflate模組和mod_gzip模組或者是php的ob_gzhandler 與 zlib。
而ob_gzhandler 與 zlib都是php的zlib模組。
要判斷是否可用這兩種方法,照以下步驟:
去找php探針,或到
PHP 探針集合包 Ver 13 版
下載。

下載後解壓縮,任選一個上傳,若是選phpinfo1.php,就打開,http://你的網址/phpinfo1.php
找到 PHPINFO,在旁邊找可以點選進去的連結,點選進去,最上面應該是PHP Version加版本號。
首先,搜尋apache2handler,可看到一個表格,最後一個Loaded Modules,格子裡,看有無mod_deflate或是mod_gzip,就代表有無其模組。(如果沒搜尋到apache2handler,則代表運行方式不是apache2handler,可能就要去詢問主機商才知道有無此模組,或者直接去試。)

至於zlib模組,則在http://你的網址/phpinfo1.php,就是一開始點進的探針裡,搜尋Zlib,應該可找到一個表格,旁邊會說有沒有支援。
只是有支援,還不一定可使用zlib方法,詳情看之後的文。

個人建議使用ob_gzhandler的修改Wordpress檔案的gzip壓縮,比較不會出錯。

注意:以下動作記得先備份,很有可能會出現錯誤。

一、Apache的mod_deflate模組

Apache的mod_deflate模組和mod_gzip模組差不多,而最近比較多人使用mod_deflate模組,所以就介紹mod_deflate模組。

1.自架主機

如果是自架主機,可以修改httpd.conf,而我不是自架主機,就沒有測試,可以參考以下文章

啟用Apache2 的mod_deflate(gzip)來壓縮網頁提高傳輸效能
[Apache] 壓縮你的網頁 - mod_deflate/mod_gzip、ob_gzhandler、zlib
Apache2 使用 mod_deflate 增進傳輸效能
Apache。mod_deflate。壓縮網頁。增進傳輸效能

2.使用虛擬主機(反正租的跟免費主機都算這個)

(1)如果是cPanel後台可以去 進階工具 =>網站優化
可以選擇
壓縮所有內容
壓縮指定的 MIME types
,就可以了,但還是要測試一下有沒有成功,只是雖然壓縮所有內容可以連css和js都壓縮,只是每次都壓縮反而會增加主機負擔,不建議使用此方法來壓縮css和js,但可以壓縮指定的 MIME types。

(2)修改.htaccess
因為我無法測試,可自行去研究Apache Module mod_deflate
但還是可以參考以下網頁的Apache 部份

不用外掛,直接啟動WordPress的Gzip網頁壓縮
利用 .htacess 達成網頁壓縮。減少流量

還是一樣不建議一直壓縮css和js,可自行去掉。

ob_gzhandle和zlib都是屬於zlib庫,只是ob_gzhandle是一邊壓縮一邊傳,而zlib是全部壓縮完才傳,所以要用哪個看個人,或者哪個可以用。

二、使用zlib

此時可用php.ini方法,免費空間不一定能改php.ini,可以參考下面的php.ini的方法。

給 WordPress 開啟 Gzip 功能
[Apache] 壓縮你的網頁 - mod_deflate/mod_gzip、ob_gzhandler、zlib
apache 網頁傳送壓縮(ob_gzhandler,zlib)

如果不行使用php.ini來改,可以看下面這篇使用.htacess 來改,

利用 .htacess 達成網頁壓縮。減少流量
[Apache] 壓縮你的網頁 - mod_deflate/mod_gzip、ob_gzhandler、zlib

只是不一定成功,請參考下一篇

在虛擬主機有安裝 SuPHP 情況下啟用 Gzip

三、使用外掛

WP Super Cache、1 Blog Cacher或是hyper Cache等快取外掛都有gzip壓縮功能,除此之外也可安裝GZippy來啟動,hyper Cache的部份可看上篇文章,只是我就是因為hyper Cache的壓縮有衝突,才另外找方法,所以就不特別介紹外掛的方法,而外掛通常是看Zlib有沒有支援,只是有時後有支援Zlib,也開了外掛也沒有檢測出有gzip壓縮,這就看運氣了。

四、使用ob_gzhandler

使用這個,可先判斷可否使用ob_gzhandler和ob_start函數。
新增記事本,將檔名存成gzhandler.php(不是gzhandler.php.txt,前面隨便取重點是後面要.php)
內容放上

1
2
3
4
5
6
7
8
9
<?php
if(function_exists('ob_gzhandler'))
{echo "可用'ob_gzhandler'";}
?>
<br/>
 <?php
if(function_exists('ob_start'))
{echo "可用'ob_start'";}
 ?>

存檔上傳到根目錄,開啟gzhandler.php(或你自己取的檔名)(你的網域.gzhandler.php,例如:http://blog.kent.twbbs.org/gzhandler.php)
如果有
可用ob_gzhandler
可用ob_start
那就可以使用ob_gzhandler、ob_start。就可以做以下方式。
(1)修改Wordpress檔案。(建議此種方法)

之前有說到Wordpress以前有內建gzip壓縮,後來不見了,那只是給選項去掉,只要去根目錄的index.php裡的

1
define('WP_USE_THEMES', true);

後面加上

1
ob_start('ob_gzhandler');

即可,也可以加入判斷瀏覽器是否支援Gizp(應該都有支援了,除非是ie6,好像可以支援只是懶的找方法了,與其找方法不如放個警告標語,建議IE 6.0的使用者升級!)

1
if(ereg('gzip',$_SERVER['HTTP_ACCEPT_ENCODING']))

也可以加入不要壓縮的目錄

1
if(substr($_SERVER['REQUEST_URI'],0,10)!='/download/')

其中

1
'/download/'

可改成你不要壓縮的任何目錄。

(2)修改php.ini或.htaccess
這個直接參考以下文章,我沒有去試。

[Apache] 壓縮你的網頁 - mod_deflate/mod_gzip、ob_gzhandler、zlib
apache 網頁傳送壓縮(ob_gzhandler,zlib)

我是使用修改Wordpress檔案的gzip壓縮,只是這樣無法壓縮css和js,所以以下介紹壓縮css和js的方法(只是我不是前面不建議壓縮css和js嗎?前面不建議的原因是那樣設定後每次連線都會重新壓縮一次,這樣不一定會快,而且通常css和js沒什麼在變,這樣很浪費資源,而後面介紹的方法是在你修改完css和js時,先壓縮一份放這,以後都是使用一開始壓縮好的,這樣就不用每次都壓縮,而且還可以不用管ie6)

gzip壓縮js和css

過來就是介紹壓縮js和css的方法

1.建立gzip.php

首先,新增記事本,將檔名存成gzip.php,內容複製以下內容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<?php
 
define('ABSPATH', dirname(__FILE__).'/');
 
$cache = true;//Gzip壓縮開關
$cachedir = 'wp-cache/';//存放gz文件的目錄,確保可寫
 
$gzip = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip');
$deflate = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'deflate');
$encoding = $gzip ? 'gzip' : ($deflate ? 'deflate' : 'none');
 
if(!isset($_SERVER['QUERY_STRING'])) exit();
 
$key=array_shift(explode('?', $_SERVER['QUERY_STRING']));
$key=str_replace('../','',$key);
 
$filename=ABSPATH.$key;
 
$symbol='^';
 
$rel_path=str_replace(ABSPATH,'',dirname($filename));
$namespace=str_replace('/',$symbol,$rel_path);
 
//$cache_filename=ABSPATH.$cachedir.$namespace.$symbol.basename($filename).'.gz';//生成gz文件路徑
$cache_filename=$filename.'.gz';//生成gz文件路徑

$type="Content-type: text/html"; //默認的類型信息
 
$ext = array_pop(explode('.', $filename));//根據後綴判斷文件類型信息
    switch ($ext){
        case 'css':
         $type="Content-type: text/css";
         break;
        case 'js':
         $type="Content-type: text/javascript";
         break;
        default:
         exit();
    }
 
if($cache){
    if(file_exists($cache_filename)){//假如存在gz文件
 
 
        $mtime = filemtime($cache_filename);
        $gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
 
        if( (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) &&
            array_shift(explode(';', $_SERVER['HTTP_IF_MODIFIED_SINCE'])) ==  $gmt_mtime)
            ){
 
            // 瀏覽器cache中的文件修改日期是否一致,將返回304
            header ("HTTP/1.1 304 Not Modified");
            header("Expires: ");
            header("Cache-Control: ");
            header("Pragma: ");
            header($type);
            header("Tips: Cache Not Modified (Gzip)");
            header ('Content-Length: 0');
 
 
        }else{
 
            //讀取gz文件輸出
            $content = file_get_contents($cache_filename);
            header("Last-Modified:" . $gmt_mtime);
            header("Expires: ");
            header("Cache-Control: ");
            header("Pragma: ");
            header($type);
            header("Tips: Normal Respond (Gzip)");
            header("Content-Encoding: gzip");
            echo $content;
        }
 
 
    }else if(file_exists($filename)){ //沒有對應的gz文件
 
        $mtime = mktime();
        $gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
 
        $content = file_get_contents($filename);//讀取文件
        $content = gzencode($content, 9, $gzip ? FORCE_GZIP : FORCE_DEFLATE);//壓縮文件內容
 
        header("Last-Modified:" . $gmt_mtime);
        header("Expires: ");
        header("Cache-Control: ");
        header("Pragma: ");
        header($type);
        header("Tips: Build Gzip File (Gzip)");
        header ("Content-Encoding: " . $encoding);
        header ('Content-Length: ' . strlen($content));
        echo $content;
 
        if ($fp = fopen($cache_filename, 'w')) {//寫入gz文件,供下次使用
                fwrite($fp, $content);
                fclose($fp);
            }
 
    }else{
        header("HTTP/1.0 404 Not Found");
    }
}else{ //處理不使用Gzip模式下的輸出。原理基本同上
    if(file_exists($filename)){
        $mtime = filemtime($filename);
        $gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
 
        if( (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) &&
        array_shift(explode(';', $_SERVER['HTTP_IF_MODIFIED_SINCE'])) ==  $gmt_mtime)
        ){
 
        header ("HTTP/1.1 304 Not Modified");
        header("Expires: ");
        header("Cache-Control: ");
        header("Pragma: ");
        header($type);
        header("Tips: Cache Not Modified");
        header ('Content-Length: 0');
 
    }else{
 
        header("Last-Modified:" . $gmt_mtime);
        header("Expires: ");
        header("Cache-Control: ");
        header("Pragma: ");
        header($type);
        header("Tips: Normal Respond");
        $content = readfile($filename);
        echo $content;
 
        }
    }else{
        header("HTTP/1.0 404 Not Found");
    }
}
 
?>

上傳到根目錄。

2.修改.htaccess

*過來可以有兩種作法,一種是就由gzip導到gz檔去,第二種就是利用.htaccess導到gz檔去。
若要由gzip導到gz檔去,則直接跳到(2)就完成了(不用做 4.再次修改.htaccess的步驟),而依序做下去就是利用.htaccess導到gz檔去,利用.htaccess導到gz檔可少掉導入gzip.php的動作。

(1)識辨gz檔案的支援
在.htaccess最上方加入

1
2
3
4
5
6
7
8
<Files *.js.gz>
  AddEncoding gzip .js
  ForceType application/x-javascript
</Files>
<Files *.css.gz>
  AddEncoding gzip .css
  ForceType text/css
</Files>

(2)判斷是否讀到css和js檔,是的話就重導至gzip.php$
在.htaccess裡加上

1
RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

只是前面要有

1
RewriteEngine on

若沒有則自行加上,一個.htaccess一個RewriteEngine on就夠了。

故若選擇由gzip導到gz檔去,那這裡就完成了,以後要修改css或js檔則要先去刪除掉所在資料夾裡的相同檔名的gz檔,例如xxx.css會產生xxx.css.gz,而若wordpress升級前可先去刪掉除wp-content資料夾,其他資料夾裡的css.gz或js.gz,外掛升級或佈景升級則去其資料夾刪掉其css.gz或js.gz,若覺得一個一個找很麻煩,可修改gzip.php的24、25行,將24行取消註解,25行註解掉,就變成以下情形

1
2
//$cache_filename=ABSPATH.$cachedir.$namespace.$symbol.basename($filename).'.gz';//生成gz文件路徑
$cache_filename=$filename.'.gz';//生成gz文件路徑

這樣所有的gz檔就會都在wp-cache這個新增的資料夾內。(這個方法只適用於由gzip導到gz檔去)

(3)加入讀到.css,判斷如果瀏覽器支援gzip且.css.gz檔存在,就進行重導的程式碼
在之前那段之下加上

1
2
3
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*).css $1.css.gz [L,QSA]

(4)加入讀到.js,判斷如果瀏覽器支援gzip且.js.gz檔存在,就進行重導的程式碼
在之前那段之下加上

1
2
3
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*).js $1.js.gz [L,QSA]

這樣就改完.htaccess了
然後上傳回去根目錄。

3.開始自己逛網站

因為要先自己產生gzip壓縮,所以給自己各類型的頁面都逛一次,以確保js和css都有慘產生gz檔。

4.再次修改.htaccess

1
RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

註解掉(前面加上#即可)
變成

1
#RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

所以如果修改了css或者js檔(包括所有更新),去其所在資料夾,先刪掉同名.css.gz或同名.css.gz(例如:修改了style.css,那就先刪掉style.css.gz的檔案),然後取消註解變成

1
RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

再去逛逛自己網站,重新產生gz檔後,再註解掉即可。
如果說要重複測試某檔案,我是建議先不要給註解拿掉,然後先刪掉原來產生的gz檔,完全修改完後,再給註解拿到,產生gz檔後,再加回註解。

加入硬碟快取以優化速度

這是我認為最明顯的方法,之前裝快取外掛,是儲存快取在主機空間以減少資料庫讀取,只是還是要經過網路傳送,而對於佈景的圖片、css、js、swf等檔案本來就很少有變化,所以將其加入硬碟快取,可以減少很多傳輸。
作法也是加入在htaccess檔,裡加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#取消ETag
Header unset ETag
FileETag None

#設定檔案過期時間
#要設定的檔案類型
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|gz)$">
ExpiresActive On
#604800秒=1週
ExpiresDefault A604800
</FilesMatch>

#設定檔案快取時間
#要設定的檔案類型
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|gz)$">
#604800秒=1週
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

我是建議

1
2
3
#取消ETag
Header unset ETag
FileETag None

放在最前面

其中

1
Header set Cache-Control "max-age=604800, public"

是設定快取時間,604800是指一週,如果有改變圖示等檔案,先將其改為0,一陣子再改回來。
兩個FilesMatch 合在一起也可以。

都做完了,當然要去試有無gzip壓縮成功,可以去
http://gzip.zzbaike.com/
http://www.gidnetwork.com/tools/gzip-test.php
http://www.whatsmyip.org/http_compression/
http://aruljohn.com/gziptest.php
http://www.port80software.com/products/httpzip/
等網站,輸入網址就行了,
如果要看css和js有無壓縮
可以去http://www.websiteoptimization.com/services/analyze/
做使用前後的比較。
註解:
之前提到ie6無法支援gzip,最好是加入警告標語,建議IE 6.0的使用者升級!
可參考
在網站加入警告標語,建議IE 6.0的使用者升級!
或直接在(header.php)裡的最底下加入

1
<!--[if lte IE 6]> <div style="background-color:#DDECFF;margin:5px 0 5px 0;padding:3px 10px 3px 10px;border-color:#F6F6F6; border-style:solid;border-width:2px;"> <p>您好,您目前使用的是舊版的<del>IE 6.0網路瀏覽器</del>,建議使用更快、更好用的瀏覽器! 如:<a target="_blank" class="external_icon" target="_blank" href="http://www.google.com/chrome?hl=zh-TW"><u>Google瀏覽器</u> </a><a target="_blank" class="external_icon" target="_blank" href="http://moztw.org/">Firefox</a><a target="_blank" class="external_icon" target="_blank" href="http://www.opera.com/">Opera</a><a target="_blank" class="external_icon" target="_blank" href="http://www.apple.com/tw/safari/download/">Safari</a><a target="_blank" class="external_icon" target="_blank" href="http://www.microsoft.com/taiwan/windows/internet-explorer/?WT.mc_id=hpnav">IE 8.0</a></font></p> </div> <![endif]-->

即可。

參考文章:

網站瘦身wordpress加速大作戰 gzip壓縮js和css
網頁快取!網站速度提升的極至,就是要從硬碟讀取
開啟GZIP,提速WordPress
優化WordPress心得(1) Gzip壓縮CSS和JS
Apache模塊 mod_headers
Apache模塊 mod_expires
Apache模塊 mod_deflate
Apache模塊 mod_rewrite

0 留言

發表留言 »





訂閱網站

廣告讀取中...

網誌統計

文章數: 32 篇
留言數: 33
標籤數: 380 個
分類數: 9 個
分頁數: 4 個
鏈接數: 6 個
總字數: 24736個字

成立時間:
2010年7月28日

最後更新:
2011-10-24 9:40pm
最早文章:
2010-8-13 12:22am
被引用數: 2
Copyright © 2010 - 2012 . 到處閒晃 | Theme Sco v4.0 By:Scorpio
推薦虛擬主機;Tech Support SAW 部落格學院 論壇