亜細亜ノ蛾 - Weblog

[SiteSearch Google]

June 01, 2004

CSSファイルを圧縮する方法

[ad]

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);
?>

自分の環境では正常に閲覧可能だけど、他の方はどうだろう?

てか、劇的に表示が早くなる、というモノでもないですよ。おまじないに近い?(笑)

Google Adsense

コメント

コメントを投稿

"CSSファイルを圧縮する方法" にコメントを投稿することができます(別ウィンドウが開きます)。

トラックバック

以下1件のトラックバックはこのページのエントリー"CSSファイルを圧縮する方法"を参照しています。

このエントリーのトラックバックURL:

» PHPでコンテンツをgzip圧縮転送する

  • June 14, 2007 08:57 PM
  • from Open MagicVox.net

 Web サーバから送出されるコンテンツを gzip 圧縮することで 転送量の削減とサイトのレスポンス向上が期待できます。 最近の Web ブラウザであ... [続きを読む]

過去の記事

カテゴリィ一覧
  1. その他
    1. 食・健康・生活
  2. ウェブデザイン・文章
    1. Movable Type
  3. ウェブ上で見つけたページ
  4. コンピュータ・エレクトロニクス
    1. PC
      1. Firefox
    2. カメラ・デジタルカメラ
  5. マンガ・アニメ・ゲーム
    1. エヴァンゲリオン/ ヱヴァンゲリヲン
    2. マンガ
      1. DEATH NOTE
      2. HUNTER×HUNTER
      3. SKET DANCE
      4. バクマン。
  6. 本・音楽・映画・TV
    1. 映画