【WordPress】 HEAD内のソースを軽量化するプラグイン「Head Cleaner」

headcleaner_header

この記事は約 3 分で読めます。


1.「Head Cleaner」とは

Head Cleanerは、HTMLのHEAD要素のタグを最適化してサイト表示を高速化できるプラグインです。読み込みにかかる時間が速くなることによりSEO効果を発揮します。
具体的には、JavaScriptとCSSのキャッシュ化、HEAD内のJavaScriptの整理・統合・フッターへの移動ができます。
とても便利なプラグインですが、1点注意点としては、他のプラグインが生成したJavaScriptコードに変更を加えるので、他のプラグインが正常に動作しなくなる場合もあります。その場合は、プラグインの設定でフィルタの対象外に指定しましょう。

headcleaner_14

2.サイト表示を高速化するメリット

2-1.コンバージョンを向上させる

サイトを開いて中々表示されないとストレスを感じますよね?
やはりページの表示が遅くなると、ユーザーはストレスを感じてしまいページから離脱してしまいます。
高速化することによってユーザーのサイト内での回遊率が上がり、サイトの内容への理解が深まり、コンバージョンの向上へつながります。

2-2.SEOに効果有り

Googleは2012年の時点でサイト表示速度がランキング要因の一つであることを公表しています。
Googleによる検索順位を決める多様なファクターがありますが、サイト表示の高速化によってランキングの順位を上げる効果はあります。

3.「Head Cleaner」のインストール方法

headcleaner_01
1.プラグイン>新規追加の画面へ移動します。
2.キーワードに「Head Cleaner」と入力し、検索します。
3.「Head Cleaner」が表示されるので、「今すぐインストール」をクリックし、インストールします。


4.プラグインの設定画面で「プラグインを有効化」をクリックします。

以上でインストールは完了です。
次は設定をしていきましょう。

4.設定方法

headcleaner_04
設定>Head Cleaner をクリックすると、設定画面が表示されます。

4-1.CSS と JavaScript の最適化をしよう

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

headcleaner_05

headcleaner_07

すると詳細が表示されます。
それぞれ上記の図のようにチェックを入れて下さい。

CSS とJavaScript のソースを必要最低限まで単純化する為のチェック項目

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

ソースの読み込みの順序を最適化する為のチェック項目

  • 内の JavaScript を、フッタ領域に移動

WordPressの表示やJavaScriptの動作をスムーズにする為のチェック項目

  • Google Ajax Libraries を利用する

4-2.ヘッダータグの最適化をしよう

headcleaner_08
特にここはチェック不要です。
プラグインの【All in One SEO Pack】をインストールしていたら、そちらの方が機能的に優れてるので【All in One SEO Pack】で設定しましょう。

4-3.セキュリティ対策をしよう

headcleaner_09
上記の図のように3つの項目にチェックを入れて下さい。
これらのタグを残したままにしていると、セキュリティ上危ないです。
第三者でもサイトの重要な情報を読み取れてしまう為、管理画面にアクセスされてしまう恐れがあるからです。

4-4.その他の設定

次の3つの項目はチェック不要です。

headcleaner_10

4-5.もし正常に動かなかった時の対処法

インストールしているプラグインの組み合わせによっては、正常に動かない場合があります。
そのような場合は有効なフィルタの対象外に一つ一つチェックを入れていきながら動作を確認していきましょう。
もし【WordPress Popular Posts 】プラグインをインストールしている場合は、項目の「wp_print_head_scripts」の対象外にチェックを入れると解消されます。

headcleaner_11

headcleaner_12
CSS と JavaScript の最適化をしようで「<head>内の JavaScript を、フッタ領域に移動」にチェックを入れると、上記の図の通り「<head>部で有効な JavaScript」の一覧が表示されます。
この一覧の中に「jquery」という表記のあるものには、表示不具合の原因になるため「フッタに移動」のチェックを外しましょう。

5.キャッシュ・ファイルのリセット方法

headcleaner_13
もしプラグインやテーマが最新バージョンに更新された場合、【Head Cleaner】のキャッシュを削除しなければ変更が反映されない場合がある。その場合は、「キャッシュファイル削除」の「削除」をクリックして下さい。
これで、キャッシュ・ファイルは削除されます。

6.まとめ

ソースを最適化する事により、サーバーとのデータのやり取りの量や回数を減らす事ができるので、素早くサイトを表示させる事が可能になります。
サイトの表示速度を高速化すればユーザーの利便性も高まりますし、SEO効果が発揮されるので、ぜひ設定する事をおすすめします。

LP(ランディングページ)制作の教科書4ステップガイド

本書を読むとできるようになること
・LPの基礎知識と制作手順が分かります。
・ユーザーが求めるLPデザインの制作方法が分かります。
・LPのコンバージョン率UPさせるコツが分かります。

主な内容
1.LP(ランディングページ)とは?
・1-1.Web サイトとLP の目的の違い
・1-2.制作の流れ
2.戦略設計
・2-1.ターゲットユーザー像(ペルソナ)の設定
・2-2.競合調査
3.情報設計
・3-1.シナリオを考える
・3-2.レイアウトを考える
4.デザイン
・4-1デザインに入る前の3 ステップ
・4-2.デザインの5つのコツ
・4-3.訴求力の高いファーストビューの制作方法
・4-4.効果的なコンバージョンエリアの制作方法

ダウンロード

最新の記事情報が取得できます。