“CSSは上、JSは下” を簡単に – Head Cleaner 使い方のコツ
Yahoo! Developer Network の Best Practices for Speeding Up Your Web Site にはWebサイト高速化のルールがおよそ35項目に渡り解説されています。
Header Cleaner は乱雑なページの <head> ～ </head> 内を整形し、上記35のルールに則り
- スタイルシートは <head> ～ <head> に配置
- Javascriptはページ下部に配置
- スタイルシートやJavascriptファイルをgzip圧縮
- 複数のスタイルシートやJavascriptファイルを結合し、HTTPリクエスト数を削減
- スタイルシートやJavascriptにExpiresヘッダを追加、適切にキャッシュを制御
- インラインで記述されたスタイル設定やスクリプトを外部ファイル化
- 重複したJavascriptファイルなどを削除
- 不要な meta タグを削除
などを行い、ページアクセスを高速化してくれるWordPressプラグインです。仕組みが分かればそれほど難しさはないのですが、使いこなすにはちょっとしたコツが必要です。今回はそんなコツをまとめてみました。
スタイルシート、Javascriptの配置換えや結合をすると不具合が生じる場合
「対象外」の選択
<?php wp_head(); ?> より下に該当部分を記述する必要があります。
またページ中の特定位置に記述されたスクリプトがさらに外部スクリプトに依存している場合、読み込み順によってはエラーとなることがあるでしょう。このような時はそのスクリプトを配置換えや結合の対象外とすれば回避できる場合があります。Header Cleaner の設定メニューの「有効なフィルタ」から対象外とするフィルタを選んでみましょう。フィルタのリストの上半分はWordPressテンプレートやテーマ関連、下半分はプラグイン関連です。フィルタの名前から類推しましょう。
また例えば1つのプラグイン中で整形の対象と対象外とを分けて設定したい場合には、新たなフィルタを定義して「有効なフィルタ」リストに加えましょう。例えば
function add_inline_css() {
// 対象外とするコードを出力
...
}
add_action('wp_head', 'add_inline_css');
などを該当プラグインのコードに追加すればリストにあわられますので、チェックを入れればOKです。
スタイルシートは media 毎に結合される
当然のことながら異なる media に対するスタイルシートは結合しません。対象メディアが記述されていない <link> タグを効率よく結合するために、「CSS と JavaScript をサーバ上にキャッシュする」をチェックすると現れる「CSS に適用するデフォルト media 属性」に適切な属性を入れてあげましょう。
Javascriptファイルが思うように結合してくれない
<head> 内で読み込みが指定されていないスクリプトファイルは結合してくれないようです。例えば Syntax Highlighter 系のプラグインは複数のJavascriptファイルが必要となりますが、ページの最後で読み込んでいるため結合されません。プラグイン側で対応するしかないでしょう。Closure Compiler + minify などで予め結合させちゃいましょう。これについては WordPressテーマ “iNove” のYSlow的サイト最適化
も参照してみてください。
サーバーがgzip圧縮転送に対応していない
「CSS と JS を gzip 圧縮転送」にチェックを入れると wp-content/plugins/cache ディレクトリに以下のような .htaccess ファイルが生成されます。
# BEGIN Head Cleaner
<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /homepage/blog/slow/wp-content/cache/head-cleaner/
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} "\.(css|js)$"
RewriteCond %{REQUEST_FILENAME} !"\.gz$"
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz [L]
</ifmodule>
# END Head Cleaner
つまり Apache の mod_rewrite 設定で .css や .js ファイルにアクセスした場合 .css.gz や .js.gz に転送しているわけです。
一方LaCoocanではサーバーがZeusであるためこの設定が効きません。またZeusではエンコードネゴシエーションという機能がありファイル拡張子の置き換えが出来るのですが、サーバー管理者でなければ設定できません。そのような場合には「CSS, JS を動的生成する」にチェックを入れましょう。Head Cleaner 自身がgzip圧縮されたデータを返すようなコードを生成してくれます。
キャッシュの有効期限を適切に設定したい
「CSS, JS を動的生成する」にチェックを入れていない場合は .htaccess でキャッシュの有効期限を適切に設定しましょう。LaCoocanユーザーの方は「LaCoocanの.htaccessで出来ること (2)」を参照してください。一方「CSS, JS を動的生成する」にチェックを入れた場合は Head Cleaner が Expires ヘッダを挿入してくれます。ファイル head-cleaner.php から文字列 HC_EXPIRED_JS_CSS を探し適切な有効期限を設定しましょう。デフォルトでは30日となっています。
アンインストールって!?
「Head Cleaner 設定」の「”Head Cleaner” の設定をすべて消去する」はプラグインをアンインストールするわけではありません。プラグインを色々差し替えていると「有効なフィルタ」リストに不要な項目が溜まってきます。これらをリセットするために「アンインストール」を使いましょう。リセット後は記事のページをリロードし再び設定ページに戻ってくれば、必要な項目だけになっているはずです。
どう使いこなすか?
実は私の場合、「<head> 内の JavaScript をフッタ領域に移動」と「メタタグ “canonical” を追加」しかチェックを入れていません。つまりタイトルどおりの機能しか使っていません。CSS Tidy や YUI Compressor、Closure Compiler などを使い手作業で軽量化をはかり、各プラグイン側に minify によるファイルの結合・gzip転送・キャッシュ制御を組み入れています。このように個別のプラグインで対応するより Head Cleaner 1つで全てを改善する方が遥かに効率は良いのですが、閲覧者に対するHTTPのデータ転送量を最少にすることとは別問題です。極端な場合、各ページでちょっとずつ読み込むスタイルシートやスクリプトが異なる場合、新しいページに移動するたびに全てのファイルを読み込まなければならず、せっかくキャッシュを設定しても効果が薄くなってしまいます。
即ちページ遷移を想定すれば、ファイル数が少ない限り（Google Page Speedでサイトを高速化(2) | Screw-Axis
によれば、出来れば2つ、多くて3つのファイル）、適当に分割しておいた方が効率が良いという考え方で私は運用しています 
最近のコメント