【Head Cleaner】headやフッタを整形して高速化するプラグイン

WordPressにはさまざまなthemeがありますので、中にはソースの作りが最初から高速化されているものもあります。

が、プラグインなどを複数インストールすることでhead内がゴチャゴチャとし始め、インストールすればするほどbodyまでの行数が長くなってしまいます。

ユーザーにストレス無くサイトやページを閲覧して貰う為にも、SEO対策としてもサイトの高速化は考え無ければならない一つの議題となっています。

Head Cleanerはプラグインの追加などで冗長気味なheadを整形、JavaScript をフッタ領域に下げるなどにより高速化を期待できます。

Head Cleanerの導入

ダッシュボードのプラグイン新規追加から、【Head Cleaner】と検索して表示されたHead Cleanerをインストールします。無事インストールが完了したら有効化。

有効化すると左メニューにHead Cleanerが追加されるので、そこから設定メニューに進みましょう。

設定項目は「CSS と JavaScript を、サーバ上にキャッシュする」、「 内の JavaScript を、フッタ領域に移動」などを簡単に設定出来ます。

僕の環境では「”パラノイアモード” を有効にする。HTMLソースから無駄を省き、できるだけサイズを小さくしようとします。」にチェックを入れると、FirefoxからのアクセスでCSSが全部きかなくなってしまいました。

チェック項目を少しずつ試してみて、ブラウザでの表示に問題がないようにコントロールしていくと良さそうです。

ちなみに、僕のブログでは上の項目にチェックを入れると良い感じでした。

YSlowでスピードチェック

折角高速化したので、高速化を実感してみたいと思います。

ソース上はかなりキレイになっていますので、期待しつつサイトの表示スピードを計測できるFirefoxアドオンを利用してみたいと思います。

前準備

Firefoxをインストールされていない方は、下記からダウンロードしてください。

・Firefox

インストール後、Firefoxのアドオン追加から、Firebugを追加します。（スピード計測のYSlowの動作に必要です）

続いて、YSlowをインストールします。
インストール後、右下にスピードメーターが表示されます。

YSlowが導入された後、スピードメーターのアイコンをクリックするとサイト読み込み速度の計測が可能です。

計測実行は【Run Test】をクリックします。

Head Cleanerの導入前

■項目：Grade
こちらはHead Cleanerの導入前に計測したものです。

■項目：components
続いてcomponentsの項目。

■項目：Statistics
そして、Statisticsの項目です。

スピードメーター上でも読み込んだファイルサイズなどが表示されています。

Head Cleanerの導入後

■項目：Grade
導入後の計測結果はこちらになっています。Gradeは変化ありませんが、performance scoreは1ポイントだけ増加しています。

■項目：components
続いてcomponentsの項目。ファイルの読み込み総数が50kb程度軽くなっているのが分かります。

■項目：Statistics
こちらの方が、ファイルの読み込み総数の変化を感じられますね。

スピードメーター上でも簡易データが得られます。
上記の結果同様、軽量化が出来ているのがわかります。

Java scriptを削除

賛否両論ではありますが、ブラウザ上で問題なく表示されることを確認できたので、思い切ってJS（Java script）を削除する項目にチェックを入れてみました。

■項目：Grade
Gradeは変わりませんが、performance scoreは79と大幅に上昇。

■項目：components
総データ読み込み量も大幅に軽量化できていますね！

■項目：Statistics
グラフで見ると一目瞭然ですね。

簡易データを確認するだけでも、軽量化されているのが良くわかります。

導入前、導入後、Javascript削除後の軽量化実績を比較するとこんな感じです。

もし設定をミスってしまい、CSS総崩れ、、、なんてことになっても、設定メニューにある【アンインストール】をクリックすれば、Head Cleanerでの設定を初期化してくれます。（プラグイン本体をアンインストールする機能ではありません）

自分のWordPressの環境に合わせて設定していく必要はありますが、体感読み込み速度も確実に上がっていましたので、ユーザーにもクローラーにも『待たせない』サイトを用意したい場合は導入を検討されてみても良いのではないでしょうか？