最終更新: 2007-06-16 (土) 21:00:28
このページをDeliciousに追加 このページをはてなブックマークに追加 このページをlivedoor クリップに追加 このページをYahoo!ブックマークに追加

スタイルシートの非 PHP 化による負荷軽減

目次

概要

PukiWiki のスタイルシートは Web サーバにかなりの負荷をかけます。 なぜかというと、スタイルシートのファイルのくせに PHP のコードを含んでいるからです。 dump2html.inc.php プラグインを利用した負荷軽減 と同じ理屈ですが、PHP のコードを含んでいると次のようなデメリットがあります。

  • ブラウザキャッシュが効かない
  • PHP のコードを解釈、実行する分のオーバーヘッドがある

特に、ブラウザキャッシュが効かないというのが致命的です。 拡張子が .php のファイルは PHP のファイルとして扱われますが、 PHP は意図的にブラウザキャッシュが効かないように制御をしています *1。 そのため、1つのページを表示するごとに、 10,000 バイトくらいのスタイルシートが、毎回 Web サーバから転送し直されてしまいます *2

 

ということで、スタイルシートのファイルから PHP のコード部分を除去すれば、 ブラウザキャッシュが効くようになり、かなりの負荷軽減になるはずです。 ここでは、PukiWiki に標準添付されている pukiwiki.css.php を改造してみます *3

方針

pukiwiki.css.php を見てみると、PHP のコードは先頭部分に集中しています。 該当部分を以下に抜粋します。

<?php

// Send header
header('Content-Type: text/css');
$matches = array();
if(ini_get('zlib.output_compression') && preg_match('/\b(gzip|deflate)\b/i', $_SERVER['HTTP_ACCEPT_ENCODING'], $matches)) {
	header('Content-Encoding: ' . $matches[1]);
	header('Vary: Accept-Encoding');
}

// Default charset
$charset = isset($_GET['charset']) ? $_GET['charset']  : '';
switch ($charset) {
	case 'Shift_JIS': break; /* this @charset is for Mozilla's bug */
	default: $charset ='iso-8859-1';
}

// Media
$media   = isset($_GET['media'])   ? $_GET['media']    : '';
if ($media != 'print') $media = 'screen';

// Output CSS ----
?>

この PHP のコードは、大雑把に言って3つの作業を行っています。

  • header の出力
  • 変数 $charset の設定
  • 変数 $media の設定

基本的には、この部分をバッサリ削ってしまえば良いのですが、 この後で $charset や $media の値が使われている箇所があるので、 それを1つ1つ対処していきます。

スタイルシートの修正

$charset の設定

pukiwiki.css.php を見ていくと、こういう行があります。

@charset "<?php echo $charset ?>";

$charset には Shift_JIS か iso-8859-1 という値が入っているので、 この @charset 行は次のように書き換えます。

@charset "Shift_JIS";

この行が本当に必要なのか分かりませんが、とりあえずこうしておきましょう *4

$media の設定

$media の値は pukiwiki.css.php 中で次のように利用されています。

td.menubar {
<?php   if ($media == 'print') { ?>
	display:none;
<?php   } else { ?>
	width:9em;
	vertical-align:top;
<?php   } ?>
}

このように $media の値によって場合分けをしています。 しかし、印刷用のスタイルシートというのを別に作れば、この場合分けは不要になります *5。 つまり、

  • pukiwiki.css
td.menubar {
	width:9em;
	vertical-align:top;
}
  • pukiwiki.print.css
td.menubar {
	display:none;
}

のように分離して、

<link rel="stylesheet" type="text/css" media="screen,print" href="skin/pukiwiki.css" />
<link rel="stylesheet" type="text/css" media="print" href="skin/pukiwiki.print.css" />

のように読み込めば良いのです。

余計な PHP タグの削除

pukiwiki.css.php の中をずっと見ていくと、変な箇所があります。

ul.popular_list {
<?php
/*
	padding:0px;
	border:0px;
	margin:0px 0px 0px 1em;
	word-wrap:break-word;
	word-break:break-all;
*/
?>
}

ul.recent_list {
<?php
/*
	padding:0px;
	border:0px;
	margin:0px 0px 0px 1em;
	word-wrap:break-word;
	word-break:break-all;
*/
?>
}

この php タグは明らかに無意味なので削除します。

ダウンロード

以上の修正を施した pukiwiki.css, pukiwiki.print.css を置いておきます。

pukiwiki.css.php と差し替えて使う場合には、pukiwiki.skin.php を以下のように書き換えて下さい。

<link rel="stylesheet" type="text/css" media="screen,print" href="<?php echo SKIN_DIR ?>pukiwiki.css" />
<link rel="stylesheet" type="text/css" media="print" href="<?php echo SKIN_DIR ?>pukiwiki.print.css" />
*1 キャッシュ制御の PHP コードをきちんと書けばブラウザキャッシュが効くようになりますが、かなり面倒です。
*2 しかも、screen 用と print 用ということで同じファイルを2回も。ものすごくムダ。
*3 私が知っている範囲では、Monobook for PukiWiki スキン はこの辺の対策がされています。
*4 なぜ Shift_JIS なのか疑問に思ったのですが、どうも BugTrack/55 - PukiWiki-dev の影響のようです。
*5 @media を使えば1つのスタイルシートにまとめることもできます。

(Counter:1, Today:1, Yesterday:0)
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   最終更新のRSS