ホーム > WordPress > WP MinifyでCSS/JavaScriptをまとめて軽量化、ページの応答速度を向上させる

WP MinifyでCSS/JavaScriptをまとめて軽量化、ページの応答速度を向上させる

2010 年 9 月 26 日 tokkonoPapa コメントをどうぞ コメント

以前 「WordPressテーマ “iNove” のYSlow的サイト最適化」で総合的にページの読み込みを軽量化する方法についてまとめましたが、今回は CSS/JavaScript ファイルの読み込み数が多い Arras Theme を例に、WordPress プラグインの WP Minify で複数のCSSやJavascriptファイルを1つにまとめて軽量化する方法を紹介したいと思います。

まずはそのコアとなる Minify のおさらいですが、次のような機能で HTTP リクエストの「数・量・頻度」を削減し、ページが表示されるまでの時間の短縮を狙います。

  • 複数の CSS や JavaScript ファイルをそれぞれまとめてマージする機能
  • 不要な空白・コメントを除去して軽量化し、gzip エンコードで圧縮転送する機能
  • キャッシュ制御のヘッダ付加や応答（If-Modified-Since に対する HTTP 304 Not Modified）機能

この Minify を WordPress に導入しようとすると、テーマやプラグインを個別に修正する必要が生じるため保守性が悪くなります。WP Minify はこの問題を解決してくれるプラグインなのですが、導入すれば目に見えた効果が即期待できるという魔法の杖では決してありません。

このエントリーでは、トラブルが生じたときの対処方法はもとより、より効果的に使いこなすために考慮すべきことをまとめてみたいと思います。

1.WP Minifyの導入と仕組み

インストール自体は WordPress の他のプラグインと同様です。ただし Installation にあるように、gzip 圧縮したファイルをキャッシュしておくディレクトリに書き込み許可を与えることと、キャッシュ・ディレクトリまでの絶対パス $min_cachePath を設定することを忘れないでください。$min_cachePath の設定は、管理パネルから プラグイン » 編集 » 編集するプラグインを選択 » WP Minify を選択し wp-minify/min/config.php を修正します。このファイル Minify エンジンの設定ファイルそのものです。プラグインのバージョンアップに伴い上書きされても良いように、設定はどこかに控えておきましょう。

さてその動作の仕組みですが、おおよそ次の様になっています。

  1. WordPress ページのヘッダーやフッターから CSS や JavaScript ファイルを摘出する。
  2. それらをマージし、軽量化し、圧縮したキャッシュファイルを Minify エンジンを用いて生成する。
  3. WordPress ページのヘッダーやフッターには、摘出された CSS や JavaScript ファイルの代わりに Minify エンジンの呼び出しを挿入する。
  4. Minify エンジンはブラウザ等の要求に対し、必要であればキャッシュを更新し、適切なレスポンスヘッダを組み立て応答する。

WP Minify のオプションはキャッシュ有効期限以外、デフォルトのままが良いと思います。それでも設定してみたいという人のために簡単な解説を載せておきます。

Enable JavaScript Minification
チェックを入れた場合、全ての JavaScript ファイルを抽出し、軽量化し、1つの圧縮された JavaScript ファイルにマージします。
Enable CSS Minification
チェックを入れた場合、全ての CSS ファイルを抽出し、軽量化し、1つの圧縮された CSS ファイルにマージします。
Enable Minification on External Files
チェックを入れた場合、外部の CSS/JavaScript ファイルをダウンロードし、キャッシュし、Minify エンジンに供給します。通常このオプションをオンにするすることは推奨しませんが、Minify の対象外とするファイル設定と組み合わせるとうまく行くかもしれません（未確認）。
Place Minified JavaScript in footer
JavaScript ファイルの読み込みをフッターに移動する場合にチェックを入れます。インラインのスクリプトは移動しないので、大抵の場合エラーとなるでしょう。非推奨です。
Force all JavaScript/CSS calls to be HTTPS on HTTPS pages
HTTPS ページの CSS/JavaScript ファイルは全て HTTPS で読み込ませます。
Combine files but do not minify
ファイルとして1つにマージしますが、軽量化をしません。空白やコメントが削除されないので読み易さを損ないません。デバッグ用に使うと良いでしょう。
Cache expires after every XXXX seconds
キャッシュの有効期限を設定します。1ヶ月ぐらい先にすると吉です。
Additional Javascript files to minify (line delimited)
追加の JavaScript ファイルを設定します（1行に1ファイル）。
Javascript files to exclude from minify (line delimited)
Minify の対象外とする JavaScript ファイルを設定します（1行に1ファイル）。
Additional CSS files to minify (line delimited)
追加の CSS ファイルを設定します（1行に1ファイル）。
CSS files to exclude from minify (line delimited)
Minify の対象外とする CSS ファイルを設定します（1行に1ファイル）。
Extra arguments to pass to minify engine
Minify エンジンにに与える追加のパラメータを指定します。例えば数字をリビジョン番号として与えた場合、（1年の）長い有効期限を設定します。
Automatically set your Minify base per siteurl setting
Minify エンジンに b=... で与えるベース URL を自動で設定します。

参考情報

2.Arras Themeを試す

Arras ThemeArras Theme はフィーチャー記事のスライドショーが特徴的なテーマです。superfish を使ったドロップダウンメニュー、2カラム/3カラムレイアウトの切り替え、背景画像のカスタマイズなど、多彩なオプション設定が可能です。最近は WordPress 3.0 専用のテーマ Arras もリリースされました。

Arras ThemeのYSlowスコアこのテーマ、唯一の難点といえば CSS ファイルと JavaScript ファイルの読み込みの多さではないでしょうか。私の環境で YSlow を計ってみたところ、スコアが69、グレードはDでした。7本の JavaScript ファイルと5本の CSS ファイルが読み込まれています。以下にその例を示します。コンディショナルタグが使われており、IE6ではさらに増えます :-? 。

ヘッダ部で読み込まれるJavaScriptの例

<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<script type='text/javascript' src='http://example.com/wp-content/themes/arras-theme/js/superfish/hoverIntent.js?ver=2.8.6'></script>
<script type='text/javascript' src='http://example.com/wp-content/themes/arras-theme/js/superfish/superfish.js?ver=2.8.6'></script>
<script type='text/javascript' src='http://example.com/wp-content/themes/arras-theme/js/jquery.equalheights.min.js?ver=2.8.6'></script>

フッタ部で読み込まれるJavaScriptの例

<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/ui.core.js?ver=1.7.1'></script>
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/ui.tabs.js?ver=1.7.1'></script>
<script type='text/javascript' src='http://example.com/wp-content/themes/arras-theme/js/jquery.cycle.min.js?ver=2.8.6'></script>

ヘッダ部で読み込まれるスタイルシートの例

<link rel="stylesheet" href="http://example.com/wp-content/themes/arras-theme/css/blueprint/screen.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="http://example.com/wp-content/themes/arras-theme/css/blueprint/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="http://example.com/wp-content/themes/arras-theme/css/styles/default.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="http://example.com/wp-content/themes/arras-theme/css/layouts/2c-r-fixed.css" type="text/css" />
<link rel="stylesheet" href="http://example.com/wp-content/themes/arras-theme/user.css" type="text/css" media="screen,projection" />

WP Minify有効後のArras Theme YSlowスコアWP Minify 適用後はどうでしょう。YSlow スコアは79、グレードは C に向上しています。Make fewer HTTP requests の項目が D から A になったのが効いているのでしょう。JavaScript ファイルは1本に、CSS ファイルは2本に減り、また gzip 圧縮転送エンコードにより、両者合わせて123KBの転送量が38.6KBと、およそ1/3となりました。またそれぞれの読み込みは次の様に変わっています。

ヘッダ部のJavaScriptファイル

<script type='text/javascript' src='http://example.com/wp-content/plugins/wp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/arras-theme/js/superfish/hoverIntent.js,wp-content/themes/arras-theme/js/superfish/superfish.js,wp-content/themes/arras-theme/js/jquery.equalheights.min.js,wp-includes/js/jquery/ui.core.js,wp-includes/js/jquery/ui.tabs.js,wp-content/themes/arras-theme/js/jquery.cycle.min.js&b=&m=1285466013'></script>

ヘッダ部のCSSファイル

<link rel='stylesheet' href='http://example.com/wp-content/plugins/wp-minify/min/?f=wp-content/themes/arras-theme/css/blueprint/screen.css,wp-content/themes/arras-theme/css/styles/default.css,wp-content/themes/arras-theme/css/layouts/2c-r-fixed.css,wp-content/themes/arras-theme/user.css&b=&m=1285466013' type='text/css' media='screen' />
<link rel="stylesheet" href="http://example.com/wp-content/themes/arras-theme/css/blueprint/print.css" type="text/css" media="print" />

特に CSS ファイルは、メディア（画面用と印刷用）をきちんと分けてマージをしているのが分かります。

3.他のプラグインと干渉する場合の解析方法と対処

WP Minify は何らかの理由で他のプラグインの動作を妨げてしまう場合があるようです。そんな時は該当する CSS や JavaScript ファイルを Minify の対象外に設定する必要があります。どのファイルが干渉しているかは Firebug や FirePHP を用いて解析します。例えば Firebug の接続パネルで、赤字でハイライトされたリクエスト（レスポンスが 400 Bad Request）を見つけた場合、次のようにして問題部分を確定させます。
HTTP レスポンスが 400 Bad Request の場合

  1. 赤字の URL を右クリックして「URL をコピー」します。
  2. そのままアドレスバーにペーストして呼び出すと HTTP/1.0 400 Bad Request が返されることを確認します。
  3. URL 中 f=file1,file2,... のカンマで区切られたファイルを1つずつ外しながら、エラーを起こしているファイルを特定します。
  4. エラーを起こしているファイルが特定できたら、WP Minify のオプション Javascript (or CSS) files to exclude from minify に該当ファイルを指定して Minify の対象外とします。

参考情報

4.本当に速くなったのか？

WebWaitでの計測結果 その1お手軽に計るには例えば WebWait の様なサイトで、WP Minify プラグインの無効／有効を切り替えて計測してみるのが良いでしょう。ここで明らかに差異が出ればハッピーなのですが、Arras Theme を LaCoocan で動かした場合、右の様に WP Minify 適用後の方が若干遅くなりました :-( 。ローカルで計ったワケではないので正確ではないと思いますが、効果が出なかったので、すぐに WP Minify をアンインストールすべきでしょうか？

5.効果的に使うために検討すべき事

一般にプラグインを導入すればそれだけ PHP の実行オーバーヘッドが増加し、WordPress がブラウザからの要求を受けてから HTML を吐き出すまでの処理時間は長くなります。また Minify エンジン自体も PHP プログラムなので、ある程度の実行オーバーヘッドが生じます。次の2つのグラフは WP Minify の適用前後の Firebug 接続パネルのタイムラインの観測結果です。赤いラインはそれぞれ CSS ファイルの読み込みを表しています。最初の HTML を取得するまでは適用前の方が短く、また Minify 実行のオーバーヘッドにより、適用後の方が CSS の読み込みに132msを費やしています。

WP Minify 適用前のタイムライン

WP Minify 適用前のタイムライン

WP Minify 適用後のタイムライン

WP Minify 適用後のタイムライン

以上の観測から分かる通り、実は PHP の実行オーバーヘッド分とファイルのマージによる HTTP リクエスト削減数とのバランスを良く考えなければならないのです。

またページの遷移も考慮すべき事柄の1つです。例えばページ1ではファイル1とファイル2を、ページ2ではファイル1とファイル3を読み込んでいる場合、ページ1からページ2に遷移した時、本来キャッシュ設定が適切であればページ2ではファイル3だけ読み込めば良いはずです。ところが Minify でマージすると、ページ1とページ2で異なるファイルを読み込むことになり、ここでもオーバーヘッドが生じる事になります。

つまりサーバー性能やページ構成をよく考えた上でその適用を図ることが重要だと思います。

6.WP MinifyのMinifyエンジンだけを使う

インストールと動作確認のためだけに WP Minify を使い、その後は Minify エンジンを単独で使ってしまおうというものです。この方法は直接テーマテンプレートファイルを書き換えたりプラグインを個別に書き換えたりする必要があるので、万人にお勧めできる方法ではありませんが、Minify エンジンの README.txt / GROUPS: FASTER PERFORMANCE AND BETTER URLS に記載のあるグループ化機能を直接使うのが最も 速い ハズです。

例えば Arras theme の場合、WP Minify のインストールディレクトリ wp-content/plugins/wp-minify 下にある Minify エンジン min のグループ設定ファイル groupsConfig.php を次の様に編集しアップロードします。

<?php
/**
 * Groups configuration for default Minify implementation
 * @package Minify
 */

/**
 * You may wish to use the Minify URI Builder app to suggest
 * changes. http://yourdomain/min/builder/
 **/

return array(
	'arras-js' => array(
		'//wp-includes/js/jquery/jquery.js',
		'//wp-content/themes/arras-theme/js/superfish/hoverIntent.js',
		'//wp-content/themes/arras-theme/js/superfish/superfish.js',
		'//wp-content/themes/arras-theme/js/jquery.equalheights.min.js',
		'//wp-includes/js/jquery/ui.core.js',
		'//wp-includes/js/jquery/ui.tabs.js',
		'//wp-content/themes/arras-theme/js/jquery.cycle.min.js',
	),
	'arras-css' => array(
		'//wp-content/themes/arras-theme/css/blueprint/screen.css',
		'//wp-content/themes/arras-theme/css/styles/default.css',
		'//wp-content/themes/arras-theme/css/layouts/2c-r-fixed.css',
		'//wp-content/themes/arras-theme/user.css',
	),
);

各ファイル先頭の // は DOCUMENT_ROOT へのパスを示すショートカットです。この設定により、ファイルグループ arras-js、arras-css を使って次の様に直接 Minify エンジンを呼び出すことが出来るようになります （Minify エンジンへのパス wp-content/plugins/wp-minify/min/ は使用環境に合わせて下さい）。

<link rel="stylesheet" type="text/css" href="<?php echo get_bloginfo('url') ?>/wp-content/plugins/wp-minify/min/?g=arras-css" media="screen" />
<script type="text/javascript" src="<?php echo get_bloginfo('url') ?>/wp-content/plugins/wp-minify/min/?g=arras-js"></script>

これをテーマのテンプレートファイル（例えば header.php）に埋め込み、また（プラグインを含めて）元の CSS、JavaScript 読み出しを削除（あるいはコメントアウト）すればOKです。

※Arras Theme の場合、header.php、function.php、library/styles.php の3つのファイルを修正する必要があります。

結果は次の様に、10回の平均で100msほどかろうじてオリジナルより速くなりました（一番右の結果） ;-) 。

WebWaitでの計測結果 その2

カテゴリー: WordPress タグ: , ,