Lazy Loadを使ってWordPressの表示速度を改善する方法

ページを表示する際に、一番時間がかかるのが画像です。

表示が遅いと、SEOに影響したり、ユーザーがサイトを離れてしまうこともあるのです・・・。

そこでWordPressにインストールしてほしい、オススメのプラグインに「Lazy Load」というものがあります。

このプラグインには、「画像の読み込みを遅らせる」という機能があります。

  • 「画像の読み込みを遅らせたら使いにくくならない?」
  • 「ブログ訪問者は記事を読みづらいんじゃない?」

と思うかもしれませんが、心配ありません。

この記事では、なぜ画像の読み込みを遅らせたほうがいいのか?

そして、プラグイン「Lazy Load」の設定方法についてお伝えしていきます。

なぜ「画像の読み込みを遅延」したほうがいいの?

「なぜ、画像の読み込みを遅らせたほうがいいのか?」

一見すると、ブログの使い勝手は悪くなるように思えます。

しかし、遅らせないほうがかえって使い勝手を悪くしてしまうのです。

一般的にページを開くと全ての画像が一気に表示される

実際にブログ訪問者があなたの記事を見たときに何が起こっているのかを説明しましょう。

一般的に誰かが記事を見るときに、そのページに含まれている画像が一気に表示されます。

もしも、そのページが

  • 縦にものすごく長いページ
  • 画像が多いページ

だった場合、読み込みにかなりの時間がかかってしまいます。

しかしながら、Googleでは少し前からこのように言われています。

Q: ページの表示速度は米Google (google.com)以外でも導入されているのか?
A: すでにインターナショナルで展開が完了している。
出典:ページの表示速度は日本でもランキング要因になっていた

簡単に言い直すと、「一つひとつのページの読む込みの速度が検索エンジンでの順位に影響している」ということなのです。

つまり、あなたのブログ記事がたまたま縦に長くなったり、画像の多いページだと、読み込みに時間がかかってしまうのであまり好ましくないということです。

そこで画像の読み込みを遅らせる

ここで現れるのが「画像の読み込みを遅らせる」という作業です。

この機能は単に、サイトの全ての画像の表示を遅らせるということではなく、

まだ画面上に表示されていない画像は表示させない。しかし、画面がスクロールされて、該当の画像に近づいたときに画像を表示させる。

という機能なのです。

この機能を追加しておくことで、ページを開いときの読み込み速度は改善されますし、スクロールしときにきちんと画像は表示されます。

今回ご紹介しているWordPressプラグインの「Lazy Load」にはこの「画像の遅延読込」の機能があり、多くの方がWordPressにインストールしています。

WordPressプラグイン「Lazy Load」をインストールしよう

まずは、あなたのWordPressブログに「Lazy Load」をインストールしておきましょう。

Lazy Load

WordPressプラグインのインストール方法は以下の記事を参考にしてください。

スポンサードリンク

設定を施して変更してサイトの利便性を高める方法

「Lazy Load」はインストールして、有効化するだけでも、その効果は発揮されます。

しかし、よりブログ訪問者があなたの記事を読みやすいように工夫しておきましょう。

※ここからは少し難しい設定なので、どうしてもできない場合はしなくてもいいです。

まずはサイドメニューの「プラグイン編集」をクリックします。

lazyloadの編集画面への行き方

次に、画面の右上にある「編集するプラグインの選択」というメニューから「Lazy Load」選択し、「選択」をクリックします。

lazyloadの編集画面への行き方2

選択したら、右端にある「lazy-load/js/lazy-load.js」をクリックします。

lazyloadの編集画面への行き方3

「lazy-load/js/lazy-load.js」をクリックしたら、ファイルを少しだけいじっていきます。

以下の図の赤枠の部分、初期段階では「{distance: 200}」となっています。

lazyloadファイルの編集方法

この部分を「{distance: 400}」に変更しておきましょう。

400に変更した

編集できたら、「ファイルを更新」を押しましょう。

200→400に変更した理由
{distance: 200}というのは、「画像の200px上に来たら、画像を表示する」というルールを指定しています。

しかし、200px上に来てから画像を表示されると、ギリギリすぎて画像が間に合わなかったり、一気にスクロールしたときに画像がちらついてしまいます。

そこで、{distance: 400}にしておくことで「画像の400px上に来たら画像を表示する」ので、余裕をもって画像表示することができます。

まとめ

検索エンジンでの上位表示のために行う施作ではありますが、何よりも「ブログ訪問者の利便性を高めるため」という意識を持って、設定に取り組んでもらえたらなと思っています。

スポンサードリンク