head-cleanerは、wordpressで作ったブログ等のヘッダー情報を最適化して高速化するためのプラグインです。 このプラグインをインストールすると、重複した定義の削除やJavascriptやCSSのキャッシュを作って高速化します。 見た目にも、無駄なインデントを削除して見やすく整理してくれます。 ブログの高速化はSEOにも大切な項目ですので、ぜひこのheadcleanerプラグインをインストールすることをおすすめします。
はじめに
head-cleanerは、インストールしただけでは動作しません。 これからhead-cleanerの設定方法を説明します。また、headcleanerをインストールすることで正しく動作しなくなるプラグインなどもありますので、こちらのトラブルシューティングについても後述します。
head-cleanerのインストール
head-cleanerのダウンロードは、以下の記事を参考にしてください
ダウンロードしたhead-clearnerは、サーバーの/wp-content/plugins/にアップロードしてください。 上記フォルダにアップロードすると、wordpress管理画面のインストール済みプラグインに、head-clearが表示されますので、有効化をしてください。
キャッシュフォルダを作成する
head-cleanerプラグインは、JSやCSSのためにキャッシュをつくります。設定をおこなう前にこのキャッシュフォルダーを作成します。 作成するフォルダーは以下のとおりです。
| / | (ブログ等のルート） | |||||||
| └ | wp-content | |||||||
| └ | cache | ←なかったら作成する | ||||||
| └ | head-cleaner | ←作成する | ||||||
| ├ | css | ←作成する | ||||||
| └ | js | ←作成する | ||||||
上記のとおりフォルダを作成したら、書き込みの権限を与えてください。
head-cleanerの設定画面
以下の画面を参考にhead-cleanerの設定をします。 
設定項目と設定値
CSS と JavaScript を、サーバ上にキャッシュする
/wp-content/cache/head-cleaner の中に Head Cleaner で設定したキャッシュを生成して、読み込み時はこれを利用するようにします。 コレは必ずチェックを入れましょう。Head Cleaner 以外で かなり高度な効率化をおこなっていたりしない限りは必ず高速化に役立つ効果のある項目です。 この項目をチェックを入れると、CSSとJavaScriptのキャッシュについての補足項目が増えますので 続いて設定していきましょう。
CSS, JS を動的生成する
名前で勘違いしそうですが、これは Head Cleaner側で生成したキャッシュの有効期限を設定し、 そして Head Cleaner側でgzip圧縮転送する設定です。 個人的には、設定した背景画像などがIEなどのブラウザでうまく表示出来ない時があり、 チェックは外しています。ただ、特に問題ない場合は、チェックした方が速くなります。
CSS に適用するデフォルト media 属性
ここは、レイアウトが崩れたりしてない限りいじる必要のない項目です。 CSSを読み込む際には、CSSの中でも種類別に出来るよう media属性 というものが設定出来ます。 もしCSSを結合するにチェックを入れた上で表示のズレ等が起こった場合、ここで適切なmedia属性を設定することで影響を最小限に避け改善が可能です。
複数の CSS を結合する
一つにまとめる事で回線の転送リクエストを減らせます。結果 速くなります。 ですので取り敢えずチェックを入れてみましょう。 レイアウトが崩れるようならチェックを外し、「キャッシュを削除」により作られたキャッシュを消せば 元に戻ります。
CSS を最適化する
元ファイルからキャッシュを作る上で、CSSなどに書いてある個人的な説明メモなどの不要な物を消す設定です。問題ないならチェックをしましょう。 CSSを変更すれば、キャッシュしたCSSにもスグに変更が反映されます。
CSS に含まれる画像の URL を、データスキーマ URI に変換する
データスキーマURL対応のブラウザ（Firefox、Safari、Opera など）の場合は、 CSSで読み出す小さい画像は、データスキーマURLとすることで、動作を軽くする設定です。 とりあえずチェックを入れておきましょう。
複数の JavaScript を結合する
一つにまとめる事で回線の転送リクエストを減らせます。結果 速くなります。 ですので取り敢えずチェックを入れてみましょう。 レイアウトが崩れるようならチェックを外し、「キャッシュを削除」により作られたキャッシュを消せば 元に戻ります。
JavaScript を小さくする
元ファイルからキャッシュを作る上で、jsなどに書いてある個人的な説明メモなどの不要な物を消す設定です。問題ないならチェックをしましょう。 js変更すれば、キャッシュしたjsにもスグに変更が反映されます。
フッタ領域の JavaScript も対象にする
キャッシュを作る上でフッターの部分も対象に含めるかです。 個人的には、チェックを入れてません。 自分が使ってる動的プラグインなどで うまく動作がしないヤツ（wp-jquery-lightbox など）があるので基本OFFにしています。
内の JavaScript を、フッタ領域に移動
ページを読み込む時 CSS以外のスクリプト関係のデータが上の方に記述してある場合、スクリプトを読み終わるまで、コンテンツ読み込みがストップしてしまいます。 ですので基本的に JavaScript などは、ページ下部の方に記述するとページを徐々に描画することを可能にしつつ、同時に、ダウンロードを並列化できるようになりますので速くなります。 また、設定画面下部にある「
部で有効な JavaScript」オプション設定で、個別にヘッダーに移動するか削除するか設定することができます。Google Ajax Libraries を利用する
jQuery を WordPress 同梱のモノではなく、より高速に読み込める CDN 上に配置されている Google Ajax Libraries から取り込むことができます。 コレも基本的にはチェックしておきましょう。
XML宣言を付与
IE6 以外の時は先頭に xml 宣言を付与するようにします。個人的には、チェックをしません。 すでに、HTML5で宣言を記入していますのでHTMLの種類の宣言は必要ありませんので。 まぁ、チェックいれても宣言がすでに書いてある場合は、書いてある方が優先されるようですので あまり気にしなくてもよいと思います。
メタタグ “canonical” を追加
メタタグ ”canonical” を追加する設定です。SEO的に大切な記述です。ページの評価などに影響があります。基本的には、チェックしておきましょう。
“パラノイアモード” を有効にする。HTMLソースから無駄を省き、できるだけサイズを小さくしようとします。
HTML ソースから、改行や余分な空白・コメントなどを消去して、できるだけファイルサイズを小さくしようとします。これは、wordpressが管理者モードの場合有効となりません、ログアウトしてからお試しください
デバックモード
デバックモード
有効なフィルター
プラグイン毎に、対象外と削除のオプションを指定することができます
部で有効な JavaScript
「
内の JavaScript を、フッタ領域に移動」をチェックした場合に、個別Javascript毎に設定するオプション ※こちらの設定項目は、たなぶろぐさんのものを引用させていただきました。トラブルシューティング
キャッシュが作成されない
head-cleaner用のキャッシュフォルダーの書き込み属性を再度確認しましょう。フォルダが作成されていても書き込み権限がないとつくられません。
キャッシュが巨大になる
動的にスクリプトを吐くほかのプラグインが原因です。 wordpres popular post等のプラグインがこれに該当します。原因のプラグインが確定したら、head-cleanerの「有効なフィルター」設定を無効にしましょう。
LightBoxプラグインが有効にならない
WP-jQuery-Lightboxプラグインを使うようにしましょう。
Google Analyticsコードが勝手に削除対象となる
HeadSpace2プラグインなどでGoogle Analyticsコードをヘッダーに埋め込んでいる場合には、勝手に削除対象となってしまうようです。下記のコードを参考にheader.phpに手動で埋め込みましょう
<!-- google analystics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '(あなたの解析コード)']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
