WordPress最適化

表示速度を高速化!「Head Cleaner」の設定方法

Head Cleanerの画像

 

こんにちは。
必死に張り切る ひしはり です。

 

ひしはり
ひしはり
ブログの表示速度が遅いんだけど
どうしたら改善されるの?

表示速度を改善できる
便利なプラグインってあるの?

本記事では
このような疑問にお答えします。

 

本記事の内容

❶ 表示速度を高速化!「Head Cleaner」の設定方法

❷ 不具合が起こった場合の対処法

❸ キャッシュファイルの削除

 

ブログを運営し出して
しばらくすると、
「最近なんだか
ブログの表示速度が遅いな」
とか
「なんだかページが重たいな」
感じることがあります。

本記事を読めば、
そんな悩みを解決してくれる
「WordPress」
高速化プラグイン
「Head Cleaner」
かんたんに設定できて
あなたのブログの表示速度を
高速化することができますよ!

 

この記事を書いている人

この記事を書いている私はブログ歴4年目

現在は本業のサラリーマンの傍ら副業ブロガーとして活動しています。

Twitter(ひしはり人生再構築ブロガー)のフォロワーは1800人ほど。

表示速度を高速化!「Head Cleaner」の設定方法

疾走するバイクの画像

 

「WordPress」で作成した
サイトやブログは、
HTMLで作成した
サイトなどと比較すると
表示速度がどうしても
遅くなってしまう傾向があります。

ページの表示速度が遅いと
せっかく訪問していただいた
読者がページを見ることなく
離脱してしまうことに
なりかねません。

そういったことを防ぐためにも
サイトやブログの表示速度は、
非常に重要な要素といえます。

今日ご紹介する
「WordPress」プラグインの
「Head Cleaner」は、
サイトやブログの「ソース」の中で
特に容量の大きい
次の2つを最適化してくれます。

 

【CSS】

「 Cascating Style Sheets」
頭文字をとったものであり、
「スタイルシート」とも呼ばれます。

サイトやブログのデザインや
レイアウトなどの
見た目に関することを
指定する言語です。

 

【JavaScript】

動的なWebページを
作成することのできる
プログラミング言語です。

地図や
グラフィックアニメーションなどを
表示することができます。

 

ちなみにここで使用される
「ソース」という言葉は、
「ソースコード」の略で
人間の言葉で書いた
コンピュータプログラムのことです。

それではさっそく
「Head Cleaner」
設定方法をご紹介して行きます。

まずは「WordPress」
「Head Cleaner」
インストールするために
「WordPress」の管理画面の
左メニューから「プラグイン」
「新規追加」をクリックします。

 

Head Cleaner設定画像

 

右上にある「検索フォーム」
「Head Cleaner」
入力して検索し表示されたら
「今すぐインストール」
「有効化」の順にクリックします。

 

Head Cleaner設定画像

 

有効化されると管理画面の
左メニューの「設定」の中に
「Head Cleaner」の項目が
追加されているはずなので、
クリックして設定画面へ進みます。

 

Head Cleaner設定画像

 

設定画面へ移動したら
最初に一番上の
「CSSとJavaScriptを、
サーバ上にキャッシュする」
チェックを入れます。

するとさらに詳細設定の
項目が表示されます。

ここでは以下の画像のように
それぞれの項目に
チェックを入れて下さい。

 

Head Cleaner設定画像

 

以下の5項目に
チェックを入れることで、
「CSS」「JavaScript」
ソースを必要最低限なところまで
単純化してサイトやブログの表示速度を
向上させることができます。

 

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

 

以下の項目に
チェックを入れることで、
ソースの読み込みの順序を
最適化させることができます。

 

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

 

続いて以下の項目に
チェックを入れることで、
「WordPress」の表示や
「JavaScript」の動作を
「Google」のサービスを使用して
スムーズにさせることができます。

 

  • Google Ajax Libraries を利用する

 

続いて以下の3項目ですが、
これに関しては、
チェックは不要です。

 

  • XML宣言を付与
  • メタタグ “canonical” を追加
  • OGP(Open Graph Protocol) 対応のメタタグを追加

 

続いて以下の3項目ですが、
これに関しては、
「WordPress」
セキュリティー強化のために
チェックを入れておきます。

 

  • メタタグ “generator” を削除
  • メタタグ “generator” を削除
  • リンクタグ “wlwmanifest” を削除

 

これらのタグを削除せずに
そのままにしていると
第三者にサイトやブログの
重要な情報を読み取られてしまう
危険性があります。

続いて以下の4項目ですが、
これに関しては、
チェックは不要です。

 

  • IEコンディショナルタグを削除
  • メタタグ “Last Modified” を追加
  • “パラノイアモード” を有効にする。
  • デバッグモード

 

以上で「Head Cleaner」
設定は完了です。

不具合が起こった場合の対処法

修理する男性の画像

 

すでに「WordPress」
インストールしている
プラグインと「Head Cleaner」
干渉してしまい不具合が
起こってしまう場合があります。

プラグイン全般に
いえることですが、
プラグイン同士の
相性があるんですね。

 

ひしはり
ひしはり
なんか人間と同じですね(笑)

 

こればっかりは、
インストールして
有効化してみてからでないと
わかりませんので、
新しいプラグインを導入した場合は、
サイトやブログのページが
正常に表示されているか
必ず確認するようにしましょう。

「Head Cleaner」の導入により
不具合が発生した場合は、
面倒ですが以下の
「有効なフィルタ」
チェックボックスに
1つずつチェックを入れて
動作確認を行ってください。

どのフィルタが干渉しているか
わかった場合は、
チェックボックスに
チェックを入れて
対象外に指定します。

続いて前述の項目で設定した
「<head> 内のJavaScriptを、
フッタ領域に移動」
チェックを入れると
以下のように
「<head> 部で有効な
JavaScript」の一覧が
表示されます。

この一覧の中に「jquery」という
記載が含まれている
ファイルがあれば、
不具合の原因になりますので、
「フッタに移動」のチェックは
外しておきましょう。

 

Head Cleaner設定画像

 

サイトやブログの表示速度を
高速化できる別のプラグインも
以下の記事でご紹介していますので
合わせてぜひ、参考にどうぞ!

 

高速化の画像
表示速度を高速化!「W3 Total Cache」の設定方法ブログの表示速度を高速化できる「W3 Total Cache」の設定方法を知りたいですか?本記事では初心者の方にもわかりやすく画像付きで「W3 Total Cache」の設定方法をご紹介しています。ブログの表示速度を高速化できる「W3 Total Cache」の設定方法を知りたい方はぜひ、記事をご覧ください!...

 

キャッシュファイルの削除

掃除機の画像

 

また「WordPress」
使用していますと、
お使いのプラグインやテーマなどが
最新バージョンに更新される
場合があります。

その場合「Head Cleaner」
「キャッシュファイル」
削除しておかないと
変更が正常に反映されない
場合があります。

必ず上記の
「削除」ボタンをクリックして
古いキャッシュファイルを
削除する習慣を
つけるようにしましょう。

まとめ

 

今日はサイトやブログの
ページを構成するソースを
最適化して表示速度を
高速化してくれる
「WordPress」プラグインの
「Head Cleaner」
設定方法について
ご紹介しました。

サイトやブログを
運営していく上で
ページの表示速度は、
非常に重要な要素です。

ただページの表示速度が
抜群に早くても
記事の内容が
お粗末なものであれば
意味がありません。

逆に記事の内容がすばらしくても
ページの表示速度が遅ければ
読者は記事を読むことなく
離脱して行ってしまいます。

価値ある内容の
記事やコンテンツを
読者にストレスを感じさせない
表示速度で提供していくことが
何よりも重要なことになります。

ページの表示速度の問題は
しっかりと対策を
して行きたいものですね。

少しでも表示速度を改善したいと
必死に張り切る ひしはり でした。
今日は、ここまで。

関連記事