Movable Type 備忘録

 CSS ファイルの圧縮転送

  • Feb232008
  • Vote:
    http://bizcaz.com/archives/2008/02/23-230140.php
  • Categories: Tools
  • Tags:
  • Social Bookmark

こんばんわ^^

今日は暖かかったですね (●´∀`●)
そのせいか、ウチの猫タンは外に出たがって(いつもだけど)、うるさいのなんのって (; ̄∇ ̄A

とりえあず庭に出してあげるのですが、風が強かったこともあって落ち葉と戯れてました。
明日は寒くなるらしいです (´Д`;)

さて、CSS を gzip 圧縮して転送する方法を、K's Labo さんとこでご紹介されてたので実際にやてみました。

キャッシュ機能も付いてるので、毎回圧縮/展開が行われることはありません。
前にも同じようなことやったことあったのですが、その時とコードが似てるなぁと思って、わたしのメモ帳を検索したらやっぱり同じコードだった (●>∀<●) きゃは

CSS を gzip 圧縮して転送

前提条件として、お使いのサーバで PHP が使える必要があります。
今時のサーバなら PHP はどこでも使えるかと思いますが一応念のため (; ̄∇ ̄A

  1. テンプレートモジュール作成
    gzip 圧縮/解凍する以下の PHP コードをテンプレートモジュールとして保存します。
    テンプレートモジュール名称は任意で構いません。たとえば「gZip Handler」などで保存します。

    1. <?php
    2.     ob_start ("ob_gzhandler");
    3.     header("Content-type: text/css");
    4.     header("Cache-Control: must-revalidate");
    5.     $offset = 60 * 60;// 60 × 60(sec)
    6.     $ExpStr = "Expires: " .
    7.     gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
    8.     header($ExpStr);
    9. ?>

    赤い字の部分はキャッシュ有効時間(秒)を指定してます。
    上記では 1 時間だけキャッシュするようになっていますが、各自のお好みで変更してください。

  2. CSS ファイル名変更
    インデックステンプレート一覧内にある各 CSS ファイルの先頭(1 行目)に以下を追加します。

    1. <mt:include module="gZip Handler">

    赤い字の部分には、先ほど作成したテンプレートモジュール名称を指定します。
    そして、CSS の出力ファイル名を xxx.css から xxx.php のように拡張子を変更して保存します。

  3. 各テンプレートの HTML ヘッダ( <head>~</head> )内で記述している、CSS 読込みの記述を以下のように変更します。

    1. <link rel="stylesheet" href="http://bizcaz.com/styles.php" type="text/css" />

    赤い字の部分のように、拡張子を .css から .php に変更します。

以上です。
後はブログ全体を再構築して完了です ( ̄∇ ̄)b

複数の CSS を読込んでる人は、2、3 をそれぞれで行う必要があります。

 Trackback Pings(0)

No trackbacks found.

 Comments(2)

#1: Posted by かわぐち @ February 28, 2008 [REPLY]
user-pic

おひょっ、かわぐちです。

いつもの事ながら、丁寧な解説ですねぇ~。
素晴らしい!

私も見習わなくては・・・。あせあせ

#2: Posted by Author Profile Page bzbell @ February 29, 2008 [REPLY]
user-pic

>>1 かわぐち さん

こんばんわ^^

誰でも分かるように・・・と心がけてはいるのですが、どうも爪が甘いといいますか、微妙に分かりづらかったりするようですあせあせ
文章ってムズかしいですのグウグウ

 Post a Comment

 

コメント用フィード