3 ways to compress CSS files using PHP

サイトのパフォーマンスを上げる、PHPでCSSファイルを圧縮転送する各種方法

1. ob_start で gzhandler を使う方法
<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>
body{ background-color:#000000; }
<?php if(extension_loaded('zlib')){ob_end_flush();}?>

gzip圧縮なので、無理にphpにする必要もないですが、まず基本の方法。でもまだ不十分ですね。

2. 1の方法に、Expiresヘッダーを追加してローカルにキャッシュさせる方法
<?php
ob_start ("ob_gzhandler");
header ("content-type: text/css; charset: UTF-8");
header ("cache-control: must-revalidate");
$offset = 60 * 60 * 24 * 30; // 30 日間 
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
$css = "body{ background-color:red }";
echo $css;
ob_end_flush();
?>

Expiresをつければ、その間のサーバへのCSSアクセスを減らすことができ、パフォーマンスはかなりあがります
ブラウザでの表示も高速化しますね
注意として、期間を長くしすぎると、Expiresが利きすぎてCSSが更新されないということ。
HTMLからCSSを呼び出す際のCSSファイル名を変える必要があります。

3. 複数のCSSファイルを１つにまとめて改行、スペースを取り除いて出力
<?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
    /* remove comments */ 
    $buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer); 
    /* remove tabs, spaces, newlines, etc. */ 
    $buffer = str_replace(array("rn", "r", "n", "t", ' ', ' ', ' '), '', $buffer); 
    return $buffer;
}

/* your css files */
include('master.css');
include('typography.css');
include('grid.css');
include('print.css');
include('handheld.css');

ob_end_flush();
?>

2と3を組み合わせて、圧縮＆連結しつつExpiresヘッダーを出すようなものがよいかもしれませんね。
さらには、includeするCSSを引数で指定できるようにすれば、なかなかよさそうです。

関連エントリ

• サイトがGZip圧縮されているかを調べる
• 複数のJavaScriptファイルを１コネクションでスッキリ一括読み込みする方法
• JavaScriptやCSSをWEB上で簡単圧縮するサービス「Compressor」
• サイトのパフォーマンス向上をアドバイスしてくれるFirefox拡張「YSlow for Firebug」
• PHPでファイルのZIP圧縮をする際に便利に使えるクラスライブラリ