Head Cleaner の使い方と初期設定方法

Head Cleaner とは、WordPressのソース（サイトを表示させる為のファイル）を最適化し、サイトの表示速度を高速化してくれるプラグインです。

ソースを最適化する事により、サーバーとお使いのデバイスとのデータのやり取りの量や回数を減らす事ができるので、結果的に素早くサイトを表示させる事が可能になります。

サイトの表示速度を高速化すればお客様の利便性も高まりますし、SEOにも効果を発揮しますので、ぜひ設定する事をおすすめします。

(※ソースはサイト表示の肝となるデータですので、他のプラグインとの兼ね合い等でまれにサイトが上手く表示されなくなる事があります。必ずWordPressのデータバックアップをとってから作業を開始して下さい。)

Head Cleaner で得られる２つのメリット

Head Cleanerをインストールする事により、大きく２つのメリットを得る事ができます。

１）CSSの最適化：サイトデザインを構成するデータ。
２）JavaScriptの最適化：マウスオンした時に画像を変化させるなど、動的なアクションを構成するデータ。

１）CSSの最適化

CSSとは、サイトデザインを構成するデータです。

例えば何かのWebサイトを閲覧する場合、インターネットを通じてサーバーにアクセスし、そのサーバーからCSSのデータを読み取る事ではじめてサイトを表示させる事が出来ます。ですのでこのCSSのデータが最適化されればされるほど、無駄なやり取りを減らす事ができ、素早くサイトを表示させる事ができます。

２）JavaScriptの最適化

JavaScriptとは、動的アクションを表現するデータです。

例えばサイトの画像にマウスオンした時、画像が光ったり、別の画像に差し替える事などか可能です。その時に動作を指示するのがJavaScriptというプログラミング技術になります。

動きを出すという事で、複雑さやデータのやり取りに負担が生まれます。Head Cleanerを利用すればJava Scriptも最適化する事が可能になり、表示速度を高速化してくれます。

それではインストールしていきましょう。

１. Head Cleaner のインストール

WordPress管理画面から、『プラグイン』⇒『新規追加』を選択。
プラグイン検索窓から『head cleaner』を検索し、『今すぐインストール』をクリック。

『プラグインを有効化』をクリック。

インストール完了です。

２. Head Cleaner の設定方法

それではHead Cleanerの設定方法へ移ります。

WordPress管理画面から『設定』⇒『Head Cleaner』をクリック。

２－１. CSS、JavaScript設定

まずは上から順番に、メインとなるCSSとJavaScriptの設定を進めます。
『CSSとJavaScriptをサーバー上にキャッシュする』をクリック。

クリックすると、新たな選択項目が出現します。ここでは主にCSSとJavaScriptのファイルを小さくし、最適化させる事を指定します。画像通りにチェックを入れて下さい。

２－２. ヘッダーとセキュリティ設定

・メタタグ”generator”を削除
・リンクタグ”RED”を削除
・リンクタグ”wiwmanifest”を削除

これら３つはセキュリティに関する設定なので必ずチェックを入れましょう。

上の項目であるOGP設定等は、オススメプラグインである『All in one SEO Pack』で設定できるのでここでは不要です。

下の項目であるLast Modifiedに関しては前回解説したWordPressのキャッシュを最適化するプラグイン『W3 Total Cache』で設定しているのでここでは不要です。

・W3 Total Cache のインストールと初期設定方法

３. 有効なフィルタの設定

プラグインを多くインストールしていると、お互いが干渉し合って表示に不具合を起こす事があります。（僕も初期の頃は訳も分からず沢山プラグインをインストールし、デザインが崩れたりソーシャルボタンが不具合を起こしたりと、とても焦りました。）

その場合は上記画像にチェック入れる項目は動作しなくなるので、試してみる事をおすすめします。（テーマにもよるので、本当にケースバイケースです。）

４. キャッシュの削除方法

WordPressのテーマをアップロードや、プラグインのアップロードをした場合、キャッシュが保存されたままだと表示が変わらない倍があります。更新ボタンで対処する事の可能ですが、こちらからキャッシュを削除する事でも対処可能です。

まとめ

キャッシュはサイト表示に関わる部分ですので、必ずWordPressのバックアップを取ってから作業を始めましょう。

一つ一つ着実に作業を進める事が重要なのと、最初は本当に苦労しますが、プラグインを通じてITへの理解やスキル身につける事は、後々大きな味方となるのでぜひチャレンジしてみて下さい。

【WordPress表示高速化プラグイン一覧】
・画像圧縮プラグイン / EWWW Image Optimizer
・画像表示を最適化プラグイン / BJ Lazy Load
・データキャッシュプラグイン / W3 Total Cache
・プラグインの編集前にバックアップを取ろう / BackWPup
・WordPressおすすめプラグイン16選