PukiWiki/負荷軽減・高速化/スタイルシート

最終更新: 2007-06-16 (土) 21:00:28

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

▲

目次 †

▲

概要 †

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

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

特に、ブラウザキャッシュが効かないというのが致命的です。拡張子が .php のファイルは PHP のファイルとして扱われますが、 PHP は意図的にブラウザキャッシュが効かないように制御をしています *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 のコードは、大雑把に言って３つの作業を行っています。

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

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

▲

スタイルシートの修正 †

▲

$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.tar.gz

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" />