June 01, 2004
CSSファイルを圧縮する方法
- 更新: 2007 年 03 月 04 日 15:36
- 2004 年 06 月 01 日 13:32 に asiamoth が投稿
- タグ: MovableType
- カテゴリー: Movable Type
- コメントする
- トラックバック (1)
CSSファイルを利用して、こだわったスタイルにしたい場合、記述が何百行にもなり、CSSファイルが重くなってくる。すると、ページの表示速度も遅くなる、と言う道理。
そこで、PHPを利用して、CSSファイルを圧縮し、読みこんだ時に展開する方法を見つけた。
PHPにあるob_gzhandlerを使ってファイルをgzip圧縮して展開時にCSSフォーマットに戻しています。また、キャッシュを1時間保持するようにもなっているので、毎回スクリプトが走るということもありません。
Stylesheet Stylebook:PHPでCSS圧縮
手順を説明すると、まずスタイルシートのファイル名(拡張子)を「php」に変更する。「styles-site.css」→「style-site.php」のように。
そして、変更したスタイルシート(PHPファイル)の先頭に、下記のコードを追加。
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
$offset = 60 * 60;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
?>
後は、このPHPファイルを読みこむだけ。自分は、下記のようにしている。
<style type="text/css">
@import url("ファイル名.php");
</style>
さて、CSSファイルを圧縮できるなら、他のファイルも可能なはず。というわけで、自分は「Main Index」と「Individual Entry Archive」の先頭にも下記のコードを追加してみた。
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/html");
header("Cache-Control: must-revalidate");
$offset = 60 * 60;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
?>
自分の環境では正常に閲覧可能だけど、他の方はどうだろう?
てか、劇的に表示が早くなる、というモノでもないですよ。おまじないに近い?(笑)
トラックバック
以下1件のトラックバックはこのページのエントリー"CSSファイルを圧縮する方法"を参照しています。
このエントリーのトラックバックURL:
» PHPでコンテンツをgzip圧縮転送する
- June 14, 2007 08:57 PM
- from Open MagicVox.net
Web サーバから送出されるコンテンツを gzip 圧縮することで 転送量の削減とサイトのレスポンス向上が期待できます。 最近の Web ブラウザであ... [続きを読む]
コメント
コメントを投稿
"CSSファイルを圧縮する方法" にコメントを投稿することができます(別ウィンドウが開きます)。