利用Apache mod_deflate模組壓縮網頁,節省頻寬加速術!

好一陣子沒有撰寫新文章,是因為一直在重建+重灌這台小小的Eeebox網頁伺服器。更換了硬碟後效能的確有明顯的提昇,「320GB, SATA 3Gb/s, 7200rpm, 16MB Cache」還有Free fall sensor的WD Scorpio Black真的很有型呢!(破財了…)

電腦是升級了,但是軟體及設定方面也要好好再調整一下。在Google尋找網頁伺服器優化方法時,掘到一個讓讀取網頁速度加快的技術,名為HTTP compression。整個流程需要Server-side及Client-side的配合,其概念如下:
1. 用戶瀏覽目標網頁時,網頁伺服器那端收到請求後先把資料(html, css, js, etc)壓縮
2. 完成壓縮後把資料傳送到客戶端
3. 客戶端的瀏覽器收到這些壓縮了的資料後,會自動進行解壓
4. 客戶端最後顯示出完整的網頁

壓縮及解壓的過程快得令用戶無法感受到,因此這樣做就可以節省了頻寬去進行網頁資料的接收,代價是雙方的處理器都會多花了資料去進行壓縮及解壓工作。就算用戶使用遠古的瀏覽器,網頁伺服器方面也會自動偵測並傳送未經壓縮的資料,所以不用太擔心兼容性的問題。

如果你是利用Apache自架網頁伺服器的玩家,可能就使用過Gzip模組去壓縮網頁以節省網頁檔案由伺服器送到客戶端的時間。由Apache 2.x版本開始,已經內建了mod_deflate的模組,只需要新增幾行簡單設定到httpd.conf,你的網頁就能籍著HTTP Compression加快30~40%的載入速度了!(效果因人而異,我好像沒有感覺到有非常明顯的改善?)

設定Apache 2.2 mod_deflate的步驟

以下設定是在Windows利用XAMPP安裝Apache 2.2版本的環境下進行:
1. 先使用文字編輯器(如notepad)開啟Apache目錄底下的”confhttpd.conf”
2. 找出以下這一句,並把最前端的「#」號刪除,令Apache可以讀入此行設定:

#LoadModule deflate_module modules/mod_deflate.so

如果找不到這一句就請自行在httpd.conf頂部加入吧!
3. 再加入這段設定:

<IfModule mod_deflate.c>
DeflateCompressionLevel 6
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-httpd-php
AddOutputFilter DEFLATE html htm xml js css php
</IfModule>

DeflateCompressionLevel:壓縮率,範圍是1~9,數字越大代表壓縮率越高,同時意味著伺服器及客戶端需要花更多資料在壓縮及解壓上。(處理壓縮工作的需時會短到一般用戶無法察覺)
AddOutputFilterByType:壓縮的文件種類。(如以上例子中的text/html)
AddOutputFilter:壓縮的檔案種類。(以上例子已包括最常用的html, css, php等副檔名)

4. 另外php方面要壓縮的話,也可以增加以下一行到php資料夾內php.ini設定檔:

output_handler = ob_gzhandler

我的php設定檔裡頭已有「;output_handler =」的一句,拿掉開頭的「;」號,稍加修改就行了。
5. 完成以上設定後,重新啟動Apache的服務,新的設定值便會生效。

MAX的測試結果

實際要測試速度增加了多少的話,最簡單的方法可利用Port80 Software提供的網頁工具作檢查(在Compression Check旁邊輸入目標網址),得出來的數據可作初步參考。老實說我不完全相信這些數據,不過起碼它可以檢查到你的網頁有否套用了HTTP compression,請看看MAX’s A Xanadu的檢查結果:

圖中紅框處Compression status顯示為Compressed(gzip),代表已成功使用了HTTP compression。

圖中紅框處Compression status顯示為Compressed(gzip),代表已成功使用了HTTP compression。

如果只根據此報告去看,MAX的網頁壓縮後的大小下只剩下三成左右(約26KB > 7.5KB),讀取網頁的速度會快3.4倍。不過事實上,壓縮前後我也沒有看到太大分別,使用Webwait所測試出的結果都是在1~2秒之內,估計是因為我是使用Photobucket作儲存圖片的空間吧?這樣我無法控制下載圖片所需時間的這個因素。

Leave a Reply