WordPressで作成したページの表示速度を改善するプラグインUnveil Lazy Load

large_2684002442
photo credit: BottleLeaf via photopin cc

ページの表示速度って超重要だよ!

皆さんは、ページのリンクをクリックしてから、ページの読み込みが完了するまで何秒待てるでしょうか?

3秒?5秒?10秒?

どこかの凄い人達の調査によると、1秒、2秒の違いで、ページビューが全然違うそうです。

ページビューはともかく、自分達のwebサイトを見に来てくれた人達が、出来るだけストレスを感じないようにしたいものです。

とにかく速いに越したことはありません。

ちなみに速度はこういったサイトで計測できます。

このブログのとある記事のデータを見てみましょう。

スクリーンショット 2014-05-30 0.20.12まあ、決して速くはないですね…。

特に画像の読み込み関係に時間を取られていることがわかります。

ページの表示速度を上げる方法は幾つもあります。

  • 画像を圧縮してサイズを小さくする
  • キャッシュを利用する
  • etc…

幾つもある方法を片っ端から適用しても良いのかもしれませんが、そこは出来るだけ手間をかけずに、簡単に改善したいのが人情です。

そこで今回はインストールして有効にするだけ!という超お手軽プラグインをご紹介したいと思います。

その名もUnveil Lazy Loadです。

このプラグインは、画像の読み込みを後回しにしてくれます。

HTMLやCSSの描画が先に完了していれば、画像が少し遅れて表示されても、体感的には早く感じるという効果が見込めます。

また読み込みを後回しにするだけでなく、jQueryを利用して、表示速度も改善してくれるそうです。

試しにこのブログのトップページを開いてみてください。

画像が最後の方でまとめて表示されていくのがわかると思います。

 

 

理屈は置いておいて早速インストールしよう!

前置きが長くなりましたが、要するにインストールするだけで表示速度を改善してくれるプラグインだから、入れておいて損はないよねっていう話です。

WordPressのダッシュボードページから、プラグイン→新規追加と進みます。

検索ボックスに”Unveil Lazy Load”と入力して検索しましょう。

スクリーンショット 2014-05-29 23.58.14検索結果に表示された”Unveil Lazy Load”をインストールします。

スクリーンショット 2014-05-29 23.58.32インストールが完了したら、いつものように有効化しましょう。

以上でインストールは完了です。

設定は特に必要ありません。

どこか適当なページを開いて、効果を確認してみましょう!

 

まとめ

いかがでしょうか?

素のWordPressのページよりもだいぶ早くなった気がしませんか?

今回は画像の遅延読み込みのプラグインをご紹介しましたが、次回はもう一つ別の高速化方法をご紹介したいと思います。

ちなみにこのブログでは現在、

  • 画像の遅延読み込み → 対応済
  • 画像の圧縮 → 未対応
  • サーバ側でのキャッシュ → 対応済

となっております。

個人的には十分な描画速度だと感じているのですが、御覧の皆さんはいかがでしょうか?

ご意見、ご感想を頂けますと幸いです!

今回は以上です!

Pa!!