CSS也來壓縮吧!

沒想到吧!CSS也是可以被壓縮的唷!其實,我朋友曾經問過我,有必要對CSS做這種手段的壓縮嗎?我想,如果CSS又少又精簡,當然可以不需要這麼做,但是如果CSS又大又恐怖的話,我想這樣的壓縮動作也許還可以幫上一點忙吧!

這篇文章的原文,是 The Definitive Post on Gzipping your CSS ,作者於2004年時提出這樣的想法,後來引起不少人的迴響,英文閱讀OK的人,可以直接去該作者的網站閱讀完整的技術文章,裡面有整個程式的詳細說明與來龍去脈。

通常網站越龐大,所使用的CSS就越加的可怕,要是好死不死還碰到對CSS最佳化不擅長的網頁設計師,那個CSS根本就是裝滿肥肉的哥吉拉。這招可以有效的壓縮和減少CSS的檔案大小,大大的降低了網頁下載時的負載,基本上,該作者介紹了兩個減少CSS檔案大小的方法:

第一個方法,要在CSS檔案當中加入一點點的PHP語法,所以請把*.css的副檔名改成*.php,並且在CSS檔案開頭加上下列這串語法:

<?php 
  ob_start ("ob_gzhandler"); 
  header("Content-type: text/css; charset: UTF-8"); 
  header("Cache-Control: must-revalidate"); 
  $offset = 60 * 60 ; 
  $ExpStr = "Expires: " . 
  gmdate("D, d M Y H:i:s", 
  time() + $offset) . " GMT"; 
  header($ExpStr); 
?>

以上語法做了四件事情:

  1. 使用PHP的 ob_gzhandler 送出壓縮檔案,這個函式將會先檢查瀏覽器是否接受gzip的編碼型態,如果不接受,那就給它沒壓縮的檔案
  2. 送標頭,裡面包含了檔案類別與編碼資料
  3. 接著則是送出快取控制設定,這裡面的must-revalidate是確保不管你的文件可以讀取到你所送出的最新資訊
  4. 最後,就是送出Expires的標頭,設定快取檔的有效時間,這裡設定的時間是一小時

這個方法並沒有很漂亮,CSS裡面夾帶了php檔案看起來也不怎麼漂亮,就是實用而已,引用檔案的時候,只要使用:@import url(mycss.php); 引用就可以了。

第二個方法比較漂亮跟優雅,不需要在CSS檔案當中加入其他的程式碼,也不需要改變你的CSS副檔名,而且….它只需要兩個步驟喔!很神吧~不過缺點是,資料夾裡面所有的CSS檔案都會被壓縮喔!

首先,你必須要建立一個PHP檔案,裡面寫入上面那串程式碼,並且幫它命名成’gzip-css.php’;再來,把下面的程式碼加入.htaccess的檔案當中,並且存放在和CSS相同的檔案路徑中:

AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
php_flag zlib.output_compression On

上面這串程式碼,總共做了三件事情:

  1. 首先告訴Apache把所有的css檔案當成PHP輸出
  2. 第二行把gzip-css.php的程式碼加在每個CSS檔案前面
  3. [非必要]第三行將php.ini中的 zlib.output_compression 給打開,告訴PHP要啟動zlib的壓縮功能;因為主機可能不允許你編輯php.ini,所以只有用動態來變更囉!

真的是很神奇呢!不過因為我自己沒有親自試過,所以不確定這兩種作法實際上的差異以及效果,甚至實做時所會遇到的問題,等到我有空親自試過以後,再把一些細節補上吧!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s