[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. Movable Type
  2. その他
    1. アイデア
  3. ウェブ
    1. Weblog
    2. Webデザイン
    3. ちょっとイイ話
    4. へぇー(トリビア・雑学)
    5. オモロ
      1. オモロテキスト
      2. オモロニュース
      3. オモロ動画
      4. オモロ画像
    6. ニュース
  4. コンピュータ・エレクトロニクス
    1. PC
      1. Firefox
  5. マンガ・アニメ・ゲーム
    1. アニメ
      1. 新世紀エヴァンゲリオン
    2. オタク
    3. ゲーム
    4. マンガ
      1. 週刊少年ジャンプ
        1. DEATH NOTE
        2. HUNTER×HUNTER
        3. SKET DANCE
  6. 本・音楽・映画・TV
    1. TV・芸能
    2. 映画
  7. 食・健康・生活
    1. ファッション
    2. 食べ物