ブログで3秒ルールはアウト!ワードプレスの表示高速化プラグイン

auto

「3秒ルール」は食べ物を落としても3秒以内に拾えばセーフという「魔法の3秒」
でもブログの表示スピードにはあてはまらなかった!

あなたのブログの表示スピード、3秒を超えていませんか?

目標1秒最低2秒、3秒でさようなら!

ブログを訪れる人が画面表示に待てる時間は、最大で2秒と言わています。

3秒以上でイライラから画面を閉じる人が40%も増えてしまうそうな。読者さんに向けて一生懸命に書いた文章が読まれもしないなんて、ナンテコッタイ!

これはワードプレスに限らずに、どのブログもどのホームページにも言えることです。いつまでたっても白い画面じゃ、読む気が失せますよね。

参考URL 海外SEO情報ブログ

表示スピードをあげるべき理由

ブログ記事を読まずに去っていく人を逃さないためでもありますが、SEO的にも有効だと言われています。

「読まずに去っていく人が多い=需要がないブログ、質の悪いブログ」とGoogle様に判断されて、検索順位が下がることもありえるってことです(><)

表示速度を専用サイトで確認しよう

表示速度チェックはGoogleが提供している「PageSpeed Insights」と、Yahooが提供している「Yslow Grade」があります。その両方を同時にチェックできるのがGTMetricsです。

さっそく調べてみた評価が・・・

高速化プラグイン導入前の速度
Page load time:4.23s
つまり表示速度4.23秒

はい、アウトーーーー!!!
どうりでスマホで自分のブログをみたら遅いなってかんじたハズさ・・・。

ブログ表示の高速化3つの改善案

画像の容量を小さくする

画像容量が大きいほど表示させるのに時間がかかるので、画像容量はできるだけ小さいほうが好ましいです。

ブログに画像をアップロードするときに、容量を気にしている人は少ないかもしれませんね。

「えーもうワードプレスに沢山画像をアップしちゃってるけど、どーすんの?」という方は、後で説明するプラグインを使えば、一発変換できるので安心してください^^

ブログ構成要素をすっきりさせる

ブログやサイトは大まかに言って「HTML」「CSS」「JavaScript」という構成になっています。

「HTML」はブログを形作る骨組みで表示が早いです。「CSS」「JavaScript」はブログのデザインや見た目を変えるなど特殊な効果をだす役割なので、HTMLに比べて表示させるまでに時間がかかります。

この構成要素を最適化していないと、最初にJavaScriptの表示がはじまりブログ表示の初動が遅くなってしまいます。

高速化プラグインをつかって、この構成要素の順番を変えるとブログ表示の初動を改善できます。

キャッシュを表示させる

1度訪れたことのあるブログやサイト情報をサーバーに一次保存し、次回そのサイトを訪れたときは一次保存したデーター(キャッシュ)を表示させる方法です。

毎回毎回新しいデーターを表示させないので、表示スピードが大幅に早くなります。

サイトデザインを大きく変更した場合は、キャッシュクリアをしないとブログを訪れた人には、古いキャッシュが表示されしまうことがあるので注意が必要です。

以上3つの改善を行えるプラグインを解説していきますね。

[ad#plugin]

高速化プラグイン一挙紹介

EWWW Image Optimizer の導入

アップロードする画像を全自動で圧縮し、画像容量を小さくしてくれるプラグイン。
嬉しい事にすにでアップロードしている画像の容量も1クリックで瞬時に小さくしてくれます!

1・ダッシュボードの「 設定 →  EWWW Image Optimizer 」をクリック

2・画面を下にスクロール。General Settings 内の 「 disable pngout 」にチェックをつける。OptiPNGという圧縮ツールを使うための設定です。

Image-Optimizerの設定

 

3・さらに下へスクロール。Optimization Settings の 「 Remove metadata 」にチェックをつける。画像に紐付いているテキスト情報を削除します。

Image Optimizer設定

4・画面最下部の「 Save Changes 」をクリックして保存します。

設定は以上でおわりです♪ あとは画像をアップロード後、自動で圧縮されるので快適♪

[ad#redcheck]アップロード済の画像を一括圧縮する方法

1・ダッシュボードの「 メディア → Bulk Optimize」をクリック

2・im・・・というボタンがあるのでクリック(画像とりわすれました^^;)

3・「 Start Optimizing 」をクリック

 Image-Optimizer管理画面

5・全画像が圧縮されます。

Image-Optimizerで圧縮中 [ad#redcheck]画像の表示を遅らせるプラグイン「 Lazy Load 」

WEBサイトの表示はページ→画像の順ですが、データーをサーバーからダウンロードしてくるのは画像が先です。

「 Lazy Load 」を入れて画像のダウンロード遅くさせることで、画面表示が早くなります。

画像が「ふわっ」と表示されるので、なんかいい感じ♪にもなります。

Head Cleanerの導入

WEBページの構成をスッキリ整理してくれるプラグイン。

1・ダッシューボードの「 設定 → Head Cleaner 」をクリック。

2・下記の画像のとおりチェックをつける。

headcleaner設定画面

3・更新をクリックして完了

headcleaner保存

Quick Cacheの導入

サーバーにキャッシュを保存して、素早くページを表示してくれるプラグイン。

無料版と有料版がありますが、今回は無料版「 Quick Cache (Speed Without Compromise) 」を解説します。

1・ダッシュボードから「 Quick Cache 」をクリック

2・「 ENable/Disable 」の「 YES 」をクリック。(以後、画面を下にスクロールして設定を変えていきます)

 quickcache設定1

3・「 Client-Side Cache 」の「 YES 」をクリック。

quickcache設定2

4・「Get Requests」の「 YES 」をクリック。

quickcache設定3

5・「RSS, RDF, and Atom Feeds」の「 YES 」をクリック。

quickcache設定4

6・「 Save All Chnges 」をクリックして保存で完了です。

 quickcache設定5

 

高速化プラグイン導入後の成果

[ad#checkgreen]プラグイン導入前

高速化プラグイン導入前の速度 [ad#checkgreen]プラグイン導入後

高速化プラグイン導入後の速度

表示速度2.71秒
2秒台に改善♪♪  評価もそれぞれ1ランクアップしました!

1秒台への挑戦

いつかは夢の1秒台になりたい!!

ですが、Yslow Grade の評価が低い項目を調べてみても、素人には解決方法さっぱりわかりませんでした^^;

現段階ではこれが最高評価としておいて、今後運営を続けていくうちに、評価が下がってくるようならまた対策を考えてみます。

本日のまとめ

今回紹介したプラグインを導入することで、ページ表示スピードの大幅な改善が見込めます。それぞれのプラグインの役割は、以下のとおりです。

  • 画像の容量を小さくする
  • ブログ構成要素をすっきりさせる
  • キャッシュを表示させる

無料ブログだと制限があって、これらの作業をするのはとても難しいです。自分で管理が出来ないって結構なリスクですよね。

ワードプレスなら簡単にプラグインで設定できるのが嬉しい^^

ブログの表示スピードは、記事を読んでくれる読者さんのためにもなるし、SEO対策としても大切です。

ぜひ、あなたのワードプレスにも導入しましょう!

*メールアドレス
*お名前(HN可)