画像の遅延読み込みで表示速度の高速化アイキャッチ画像

画像の遅延読み込みで表示速度を高速化する

みなさんこんにちは。今回は画像の遅延読み込みというテクニックを紹介します。画像はほとんどのWebサイトで利用するものの、速度が低下しやすい原因に最もなりやすいパーツです。遅延読み込みというテクニックを利用して表示をすこしでも改善させましょう。

画像の遅延読み込みとは?

画像の遅延読み込みとは、画面にその画像を表示するまで取得を遅延させることができるブラウザの仕組みのことです。遅延読み込みを設定しない場合、画像はサイトの初期表示時(アクセスした瞬間)に読み込まれますが、遅延読み込みを設定するとスクロールをして、実際に端末に画像が表示されるときに画像を取得します。英語でLazy Loadingといいます。反対に初期表示時に画像をすべて取得することを Eager Loadingといいます。

Eager / lazy loding の説明
遅延読み込み(Lazy Loading)ではすべての画像を読み込まないため、通信量が削減する

今回の記事はLazy Loading を使おうという試みです。遅延読み込みのメリットとしては、初期表示時は、その端末に最初に表示される画像だけが取得されるため、初期表示のレスポンスが早くなります。したがって読者からするとサイトの反応速度が速くなったように感じられます。デメリットとしてデザインが崩れやすいこと、またページの閲覧中に表示がガクつく、スクロールされる場合があります。後者はWebブラウザが初期表示するときにサイトの高さを推定して計算するのですが、遅延読み込みをすることで、画像の正確な高さの取得が遅延されるため、スクロールの高さ計算が修正されることにより発生します。ちなみにこのガクつく問題は画像だけの話題ではないです。非同期的に設定されるパーツであれば発生します。

あらゆる端末(PCやスマホ)で画像のサイズが固定であれば、おそらく発生しませんが、レスポンシブなWebサイトであれば、端末のサイズによって、画像のサイズが変わるとガクつき問題が発生しやすくなります。これを完全に解決しようとすれば、端末に応じた高さを事前に与えてあげておく必要があります。imgタグの高さや幅が与えられていないことによる場合が多いため確認しておくと良いでしょう。

設定が有効かどうか確認方法

さてLazy Load が有効になっているかどうかの確認ですが、Lighthouse や PageSpeed Insights による警告が最も分かりやすいのではないでしょうか。Lighthouseってなんだっけ?という方はこの記事よりご確認ください。

有効になっていないことでパフォーマンスの向上が見込める場合には以下のような警告が表示されます。

Defer offscreen images という警告が遅延読み込みができていない証拠

画像の遅延読み込みの設定方法

本サイトおすすめのプラグインであるW3 Total Cacheでの設定方法は、パフォーマンス > 一般設定より「画像の遅延読み込み」にチェックを入れればOKです。また画像の遅延読み込みはブラウザの機能で提供されるため遅延読み込みさせたい img タグにloading="lazy"のプロパティを設定してもよいです。

パフォーマンス > 一般設定 > 画像の遅延読み込み にチェック

上記にチェックを入れると各 img タグに lazyloaded というクラスが追加されます。これで遅延読み込みができています。簡単ですね。

img タグに lazyload

また個人的に利用している人が多いであろう画像最適化のプラグイン EWWW Image Optimizer ではデフォルトオンになっています。両方利用している場合は片方だけ設定すれば問題ありません。

EWWW Image Optimizer ではデフォルトオン

無駄なプラグインを入れたくない!という方は Lazy Load Plugin というプラグインが有名なので、ぜひ利用をしてみてください。

さいごに

さて遅延読み込みの設定はいかがだったでしょうか。設定を有効にしたらぜひ一度Webサイトをシークレットモードで開くことをお勧めします。非常に重い画像などが遅延されることで表示に違和感を抱く場合があるためです。

なお、類似のテクニックとして、プログレッシブ画像読み込みという手法もあります。これは低画質の画像を先に表示し、本来の解像度の画像を遅延させて読み込むことです。デメリットは画像をより多く用意し、また一枚の画像を取得するために、複数回のWordPressへのアクセスが必要になります。対策として例えばJPEGにはプログレッシブモードという仕組みがあり…と、そこまで踏み込むと本記事の想定レベルをはるかに超えるので、興味のある方は上記のキーワードで検索をかけてみてください。

それでは次の記事でお会いしましょう👋