【Head Cleaner】Head要素のタグを最適化して表示速度を向上させるプラグイン

WordPressを利用していると、どんどんプラグインが増えていきますよね。もちろん便利なプラグインが多いので仕方ないことですが、それぞれにCSSやJavascriptが吐き出されるので、Head要素の中のソースが複雑になりがちです。

特に、CSSとJavascriptは、読み込みに時間が掛かるコードです。なので、サイトの表示時間が大幅に遅くなることがあるので、注意が必要ですね。そこで役に立つのが、「Head Cleaner」というプラグインとなります。

これは、Head内にあるCSSとJavascriptを結合させたり、他の場所に移したりして、ソースを軽くてシンプルなものにします。また、サーバーにキャッシュさせることで読み込み時間を短縮できるので、Wordpressサイトを高速化することが出来ます。

サイトが重くて困っている人は、ぜひ利用してみてください。

また、以下のプラグインもおススメです。

EWWW Image Optimizer:画像サイズを自動で圧縮する
BJ Lazy Load:画像よりもテキストの表示を優先する

 

Head Cleanerの設定

1

プラグインの新規追加から、「Head Cleaner」と検索してインストール。そして、有効化しましょう。

2

そして、ダッシュボードで、「設定」⇒「Head Cleaner」へと進みます。

3

「CSS とJavaScriptを、サーバ上にキャッシュする」にチェックを入れます。

4

すると、項目が追加されるはずです。

5

上の画像の通りに、チェックを入れていきましょう。

  • 複数のCSSを結合する
  • CSSを最適化する
  • 複数のJavaScriptを結合する
  • JavaScriptを小さくする
  • フッタ領域のJavaScriptも対象にする

これらにチェックをすることで、ソースを最小限にすることが出来ます。記述内容が少なくなるので、読み込み時間の短縮に繋がるはずです。

・<head>内のJavaScriptを、フッタ領域に移動

これにチェックを入れると、JavaScriptの読み込みを後回しにします。そうすると、ページの表示が優先されるので、高速化できるというわけです。

・Google Ajax Librariesを利用する

これは、Googleが提供しているサービスで、JavaScriptの読み込みがスムーズになります。

6

プラグインの「All in One SEO Pack」を利用しているなら、設定が重複するので上のチェックは外しましょう。

7

こちらは、ページの高速化への貢献は少ないですが、サイトの情報が含まれるのでセキュリティ的にチェックを入れておいてください。第三者に重要な情報を抜き出されないようにします。

8

これらは不要ですから、チェックは入れないようにしましょう。

 

不具合が発生したら

「Head Cleaner」は、他のプラグインのCSSとJavascriptも整形してしまいます。なので、相性が悪いプラグインは、上手く動作しないことがあるようです。

9

もしも不具合が発生したら、1つずつ対象外にチェックを入れて、動作確認を行ってください。大部分の問題は、これで解決できるでしょう。

また、テーマをカスタマイズしたり、デザインを変更したとしても、それらが反映しないことがあります。そういった時は、キャッシュファイルの削除を行ってください。

10

「キャッシュファイル削除」の項目で、「削除」をクリックすれば改善できるはずです。

 

以上、「Head Cleaner」の使い方を紹介しました。Webサイトにおいてページの表示速度は、非常に大きな問題です。ユーザビリティや検索順位にも影響しますから、サイトが重くならないように日頃から注意を払いましょう。

サブコンテンツ

このページの先頭へ