こんな悩みはありませんか？
- WordPressで作成したサイトの表示を高速化したい
- ソースコードを自分で編集するのは怖い
webサイトを作成する上で、ページの表示速度は非常に大切です。ページの表示速度が遅いと、検索でwebサイトを見つけてくれたユーザーが離れてしまうかもしれないからです。
webサイトの表示は、速ければ速いに越したことはありません！いろいろな対策がありますが、その対策の１つとしてWordPressで用いるプログラムの無駄な部分を削ることが挙げられます。
ただ、専門的な知識が必要ですし、複雑なコードを修正するには莫大な時間がかかります。このような時はプラグイン「Head Cleaner」に任せてしまいましょう！
WordPressで作成されたwebサイトの高速化が期待できるプラグイン「HeadCleaner」を徹底解説します！
[blogcard url=”https://iblab.net/lazy-load/”]
1. webサイトは、表示が速い方が良い！（当たり前ですが。）
あなたのwebサイトの表示に時間がかかると、
- 表示されるまでに、ユーザー（閲覧者）がイライラして離れてしまう
- Googleの評価が下がる（評価が下がると表示順位が下がる）
というような問題が起こります。
1-1. 表示されるまでに、ユーザー（閲覧者）がイライラして離れてしまう
webページが表示されるまでに時間がかかってイライラし、別のwebサイトを見に行った経験はありませんか？
ユーザー（閲覧者）からすれば、あなたのwebサイトはたくさんのwebサイトの１つでしかありません。もっと短時間で表示されるwebサイトがあることを、ユーザーは知っているのです。
ユーザーが待つことができる時間は、わずかに２～３秒と言われます。このたった２～３秒で見切られ、離れていくのです。
本当に良い内容の記事を書いていても、ユーザーに見られなければ何の意味も意味がありません。webページの表示に時間がかかることは、ユーザー獲得の機会を自分から逃してしまっているのです。
ユーザーを逃さないためにもwebサイトの表示されるまでの時間は、速ければ速いほどいいのです。
1-2. Googleの評価が下がる（評価が下がると、表示順位が下がる）
webページの表示に時間がかかると、SEO（検索エンジン最適化）の面でも悪影響を及ぼします。
SEOとはユーザーからキーワード検索された時に上位に表示させるための施策のことです。Googleはwebサイトの表示速度も順位付けの要素であることを公表していますので、webサイトの表示に時間がかかることは、検索順位が低くなることを意味しています。
もちろん、検索順位はwebサイトの表示速度だけで決まるものではありませんが、これも大きく関連しているので意識しておくべきです。
2. webサイトの表示速度が遅くなる原因は？
一般的に言われる原因は、
- サーバの処理速度が遅い
- 使用している画像のデータが大きすぎる
- 画像の他にも、読み込むデータが多い
などと言われています。
2-1. サーバの処理速度
これは、単純にサーバスペック（サーバの能力）に依存しますので、レンタルする時に決まります。自分で決められます。
あまりにも安いレンタルサーバは処理速度が遅く不安定だったりしますので避けましょう。インターネットビジネスラボでは、xserverのx10プランをおすすめしています。当サイトもこのサーバーで動かしていますが、サーバスペックの面で不足はなく、サーバが停止することもほぼなく、快適に使っています。
2-2. 画像のデータの大きさ
デジカメで撮影された画像データは、1つの画像で数メガ～十数メガという大きさになる場合があります。そのような写真を、例えば10枚も使っていたら、それらのデータをスマホで表示させるには数十秒かかるかもしれません！
デジカメで撮影した画像データは確かに鮮明ですが、webで表示させるのであればもっともっと圧縮して小さくしても全く問題ありません。WordPressにアップロードする際、自動的に圧縮してくれるプラグインがありますので、ぜひ活用しましょう！
[blogcard url=”https://iblab.net/wordpress/plugin/compress_jpeg_and_png_images/”]
2-3. 読み込むデータが多すぎる
webサイトは、サーバーに置いてある情報（html、CSSなど）をユーザー側が受け取り（読み込み）、ブラウザ（IE、chromeなど）に表示させ、目で見ることができます。サーバーに置いてあるデータがあまりにも多すぎるとデータを受け取るのに時間がかかってしまうので表示速度が遅くなってしまいます。
サーバーから受け取る情報として、
- 文章などの文字
- 画像ファイル
- HTML/CSSといったWebの見た目を構成するための部品
- 便利な機能や美しい見た目を実装するプログラム（JavaScript）
といったものがあり、これらのデータを組み合わせてブラウザに表示し、ユーザーに情報を提供することができるようになっているのです。
しかし、このプログラムの中には実際には使われていないものがあったりします。これがサーバーからのデータ読み込み時間の増加につながっています。
無駄なデータを排除することでスムーズにデータを読み込むことができます。一つ一つ整理するのは大変ですので、そこで活躍するのがプラグイン「Head Cleaner」です。
3. Head Cleanerを使うメリット
WordPressプラグイン「Head Cleaner」は、WordPressの公式プラグインなので管理画面から簡単にインストールできます。簡単な設定をすれば、あとは自動的にプラグインが処理してくれるので、専門知識は不要！
とても気軽につかうことができます。
最初に設定しておくことでその通りに動作してくれるのも嬉しいポイントです。
無料で導入して、初期設定だけで自動的に表示速度を上げてくれるのが「Head Cleaner」です。
4. プラグイン「Head Cleaner」の導入
この章ではプラグイン「Head Cleaner」の導入方法を解説しています。
わかりやすいように画像を用いて説明していますので順を追って設定していきましょう。
4-1. プラグインを追加
まずはWordPressの管理画面でプラグイン「Head Cleaner」を追加していきましょう。
この画像はWordPressの管理画面です。左側にメニュー項目が並んでいますが、その中から「プラグイン」をクリックしてください。
クリックすると、今インストールされているプラグイン一覧が表示されますが、②の「新規追加」からプラグインを追加することができます。
次にプラグインを検索します。
右上の検索欄に追加したいプラグインの名称を入力して検索します。今回はプラグイン「Head Cleaner」を追加したいので「Head Cleaner」と入力します。
ここがポイント！
複数の検索結果が表示されますので、画像では「Head Cleaner wokamoto」と作成者の名前も加えて検索しています。一発で検索結果に表示させたい場合には「Head Cleaner wokamoto」と検索することをおすすめします。
プラグインが見つかったら「今すぐインストール」をクリックしてインストールしましょう。インストールが完了したら、「有効化」というボタンをクリックして「有効化」してください。
これでプラグインの導入は完了です。日本語にも対応しています。
プラグインのインストールお疲れ様でした。「もう終わり？」と思われる方もいらっしゃるかと思いますが、インストールは完了しています。WordPressでのプラグイン導入はとても簡単ですね。
4-2. Head Cleanerを初期設定する（重要）
インストールしたプラグイン「Head Cleaner」の初期設定を行います。一番重要な項目です。画像通りに設定するだけでOK！
左側のメニューバーから「設定」をクリックして「Head Cleaner」を選択します。
「Head Cleaner」を選択すると、
- CSSとJavaScriptを、サーバ上にキャッシュする
- CSS,JSを自動生成する。
という２つの選択肢が表示されます。ここで選択した内容に従って「Head Cleaner」は動きます。
まずは画像の②、一番上の「CSSとJavaScriptを、サーバ上にキャッシュする」にチェックを入れましょう。
ここにチェックを入れると、それに対する選択項目が新たに表示されますので、画像のようにチェックを入れてください。
さらに詳しく！
項目ごとに解説します。
- 複数のCSSを結合する
- 複数のJavaScriptを結合する
- CSSを最適化する
- JavaScriptを小さくする
- フッタ領域のJavaScriptも対象にする
これらの項目は、プログラムをよりコンパクトにするための方法です。チェックを入れると自動的に最適化されます。
- head内のJavaScriptを、フッタ領域に移動
htmlは基本的に上から順番に読み込むのですが、JavaScriptをフッタ（htmlの最後の方）に移動して読み込みを後に回すことで、それ以外（文章や画像など）の読み込みを優先させることができます。
- Google Ajax Librariesを利用する
Googleが提供している機能で、これを利用するとJavaScriptの動作が早くなります。
- メタタグ ”canonical” を追加
内容が重複し、URLが異なるページがある場合に、どのページが一番重要かをGoogleに伝えるためのタグです。例えば、Aという商品のページ（メインページ）があり、その商品のカラーバリエーション（青色と赤色）のページを別に準備した場合、それぞれの内容はほぼ重複します。その時に、メインページがどのページなのかを示すために使われるタグです。
一般的なブログでは重複することはほとんどないと思いますが、重複せずとも「優先度の高いページ」を知らせる意味で、設定しておきましょう。
5. Head Cleanerの使い方
Head Cleanerは有効化している限りは、自動的に最適化してくれます。
手動で行うことは、必要に応じて「キャッシュファイル削除」くらいです。
キャッシュとは、一度利用したデータを蓄積しておき、次回以降、そのデータを利用する時に素早く参照できるようにするための仕組みです。
例えば「デザインを変えるためにCSSを更新したが、公開ページのデザインは修正されない」というようなことがあります。これは、元のWordPressのデータは更新されたにも関わらず、古いキャッシュが残っているためにデザインが修正されない状態です。
こうした場合は、キャッシュファイル削除をしてみましょう。キャッシュファイルが削除され、最新のデータを読み込み保存することになります。
設定画面を下にスクロールすると「キャッシュファイル削除」の欄があります。ここにある「削除」ボタンをクリックすると削除することが可能です。
簡単にキャッシュを消すことができますね。
6. まとめ
WordPressプラグイン「Head Cleaner」は、ヘッダのソース（CSSやJavaScript）を最適化し、表示速度を向上させるためのプラグインです。
ご自身で最適化するのは至難の業（わざ）。
初期設定さえ行えば、あとはプラグインが自動的に動きますのでお手軽に表示速度を向上が期待できます。
設定項目は、この記事の画像の通りに設定すればOK！インストールから設定まで５分でできますので、ぜひ試してみてください！