「画像の遅延読み込み」を実装して表示速度を改善する

画像ファイルの読み込みを遅くして、表示速度改善をする方法について説明していきます。

ページ表示速度の改善については、こちらの記事も参考に▼
◎ページ表示速度を改善してアクセスアップ

Webページの表示が重くなるもっとも大きな要因の一つは画像ファイルです。

1つのページに表示される画像が多ければ多いほど、また画像のサイズが大きければ大きいほど、読み込み時間は長くなる傾向があり、ページの表示時間が遅くなります。

ページ表示速度が遅くなれば、それだけ離脱率も上がりますし、SEO的にも良くありません。

画像が中心のサイトなどは、画像の遅延読み込みを実装する事によって、スクロールしないと表示されない画像を送れて表示させることができます。

こちらのブログでは、遅延読み込みを実装しています。

ページを開いた時、画像が一瞬遅れて表示されてるのがおわかりでしょうか？

画像がスクロールした時など、可視範囲に入った時に読み込んで表示されるため、ファーストビュー（最初の可視範囲）の読み込みが早くなり、ユーザビリティの向上、SEOなどにも効果がある…というわけです。

ワードプレスではプラグインを入れるだけで簡単に遅延読み込みを実装する事が出来ます。

遅延読み込みを実装するプラグインとしては、
「Unveil Lazy Load」
「Lazy Load」
「BJ Lazy Load」

などがあります。

ちなみにこちらのサイトでは、「Unveil Lazy Load」を実装しています。
スロットブログ＆パチンコブログまとめ

ちゃんと遅延読み込みがされているのであれば、どのプラグインでも構いません。

ただし、サイトのレイアウト、他のプラグインなどによっては、不具合を与える場合があります。

それによってレイアウトが崩れたり、他のプラグインが効かなくなったりする事もあります。

そういった場合は遅延読み込みの実装を諦めるか、他のLazy Load系プラグインを使ってみるしかないですね。

各プラグインの使い方・インストール方法は、こちらを参考に。