WordPress設定

Head Cleaner コードを軽量化して表示速度を向上させるプラグイン 設定方法と使い方

  /
Head Cleaner コードを軽量化して表示速度を向上させるプラグイン 設定方法と使い方 アイキャッチ

ワードプレス(WordPress)のブログサイトのページ表示速度の向上が期待できるプラグイン「Head Cleaner」を解説します。

この記事を見ることで得られるメリット
  • Head Cleanerの使い方と設定方法がわかります
目次
  1. Head Cleanerで実現できること
  2. Head Cleanerのインストール方法
  3. Head Cleanerの使い方
  4. Head Cleanerはブログ・サイトの表示が崩れる不具合が発生する
  5. まとめ

Head Cleanerで実現できること

ブログ・サイトのWoredPressのHTML、CSS、JavaScriptのコードを軽量化してページ表示速度を高速化が期待できるプラグインが「Head Cleaner」です。

「Head Cleaner」と他のページ表示速度を高速化させるプラグインと違う点は、コードを軽量化するのとキャッシュ機能の2つの機能を併せ持っている点です。

  • HTML、CSS、JavaScriptのコードを軽量化
  • CSSとJavaScriptをキャッシュする

この2つの機能を含んでいるプラグインとは競合を起こして不具合を起こすので、どちらか一方だけを有効化させる必要があります。

2022年5月現在、「Head Cleaner」は最新のWoredPressのバージョンに対応しておらず、ブログ・サイトの表示が崩れます。

5年以上も更新(アップデート)されていないためセキュリティの安全性も低いため使用は控えることを強くおすすめします。

Head Cleanerのインストール方法

Head CleanerプラグインをWordPressにインストールする方法を解説します。

WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面
  1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
  2. 「新規追加」をクリックします
  3. 検索ボックスに”Head Cleaner”と入力すると下に検索結果が表示されます
  4. ”Head Cleaner”の「今すぐインストール」ボタンをクリックします
"Head Cleaner"のインストール完了画面“Head Cleaner”のインストール完了画面

↑Head Cleanerのインストールが完了すると有効化ボタンが表示されるのでクリックします。

"Head Cleaner"を有効化すると表示される画面“Head Cleaner”を有効化すると表示される画面

これでHead Cleanerのインストールと有効化が完了しました。

Head Cleanerの使い方

Head Cleanerをインストールして有効化した状態では何も設定されていないため機能していません。当記事の設定項目を参考に設定してください。

設定を変更する前にWoredPress全体のバックアップを取得することをおすすめします。
イチオシのバックアップ用プラグインは「BackWPup」です。
「BackWPup」の使い方と設定方法はこちらの記事を参照してください↓
BackWPup バックアッププラグインの設定方法と使い方

ここからはHead Cleanerの設定方法を解説します。

WoredPressのダッシュボード(管理者画面)の「設定」内の「Head Cleaner」をクリックWoredPressのダッシュボード(管理者画面)の「設定」内の「Head Cleaner」をクリック

↑Head Cleanerの設定画面に入るにはWoredPressのダッシュボード(管理者画面)の「設定」内の「Head Cleaner」をクリックします。

Head Cleaner 設定

Head Cleanerの設定は1つの画面内で完結するのでシンプルです。

Head Cleanerの設定画面(未設定状態)Head Cleanerの設定画面(未設定状態)
  1. CSSとJavaScriptを、サーバ上にキャッシュするにチェックマークを入れます
  2. 更新ボタンを押します。

そうすると、新たな設定項目が表示されます。

Head Cleanerの設定画面(設定状態)Head Cleanerの設定画面(設定状態)
  1. 項目にチェックマークを入れます※チェックマークを入れる箇所は下記に詳細記載しています
  2. 更新ボタンを押します。
  • 複数のCSSを結合する
  • CSSを最適化する
  • 複数のJavaScriptを結合する
  • JavaScriptを小さくする
  • フッター領域のJavaScriptも対象にする
  • <head>内のJavaScriptを、フッタ領域に移動
  • Google Ajax Librariesを利用する

※メタタグ”canonical”を追加にはチェックマークを入れなくても大丈夫です。

Head Cleanerの効果

Head Cleanerを導入する前と後でどの程度表示速度が向上したのか、効果を測定してみました。

Head Cleanerのページ表示速度向上の効果を測定する場合は、「PageSpeed Insights」という表示速度検証サイトを利用します

スマホ環境

Head Cleaner導入前に「PageSpeed Insights」で測定したスマホ環境のパフォーマンスHead Cleaner導入前に「PageSpeed Insights」で測定したスマホ環境のパフォーマンス
Head Cleaner導入後に「PageSpeed Insights」で測定したスマホ環境のパフォーマンスHead Cleaner導入後に「PageSpeed Insights」で測定したスマホ環境のパフォーマンス

Head Cleaner導入後のほうが約10％パフォーマンスが低下しました。

さらにHead Cleaner導入後に画面の表示が崩れる不具合が起きました。

Head Cleanerはブログ・サイトの表示が崩れる不具合が発生する

Head Cleanerを設定後、崩れたブログ・サイトの画面Head Cleanerを設定後、崩れたブログ・サイトの画面

↑PCのWebブラウザで表示すると最上部にPHPのエラーが表示されています。※赤枠部分

2022年5月時点でHead Cleanerは5年以上も更新されていないため、最新のPHPとWoredPressのバージョンに対応しておらず、ブログ・サイトの表示が崩れます。

最新のWoredPressバージョンではHead Cleanerプラグインは使用出来ないので注意してください

まとめ

Head Cleanerはアップデートが5年以上実施されておらず、最新のPHPとWoredPressに対応していないため、まともに使用できません。

なので、Head Cleanerの導入は諦めて、他のコード最適化プラグインやキャッシュプラグインの導入を検討してください。

コード最適化プラグインは「Autoptimize」をおすすめします。
JavaScript非同期/遅延プラグイン「Async JavaScript」と組み合わせると更に効果的です。
設定方法等はこちらの記事を参考にしてください↓
Autoptimize コードを最適化して高速化するプラグイン 設定方法と使い方
Async JavaScript 非同期・延期プラグインの設定方法と使い方

キャッシュ用プラグインは設定が簡単で気軽に導入できる「WP Super Cache」がおすすめです。

「WP Super Cache」の詳しい解説はこちらの記事を参考にしてください↓
WP Super Cache ページ表示速度高速化キャッシュプラグイン 設定方法と使い方

ページ表示速度高速化の関連記事

Hyper Cache ページ表示速度高速化キャッシュプラグイン 設定方法と使い方

Comet Cacher ページ表示速度高速化キャッシュプラグイン 設定方法と使い方

Cache Enabler ページ表示速度高速化キャッシュプラグイン 設定方法と使い方

W3 Total Cache ページ表示速度高速化キャッシュプラグイン 設定方法と使い方

WP Fastest Cache ページ表示速度高速化キャッシュプラグイン 設定方法と使い方

Flying Scripts by WP Speed Matters スクリプトの実行を遅らせページ表示速度を高速化するプラグイン 設定方法と使い方

Head Cleaner コードを軽量化して表示速度を向上させるプラグイン 設定方法と使い方

EWWW Image Optimizer 画像ファイルサイズを圧縮して高速化するプラグイン 設定方法と使い方

こちらの記事もおすすめ