画像の遅延読み込みとは？導入するメリットやデメリット、よくある問題をわかりやすく紹介

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

画像の遅延読み込みとは、利用ユーザーがWebサイトを閲覧する際に、画像を必要とするまで読み込みを開始せず、必要に応じて画像を読み込むことです。画像とWebサイトを一度に読み込もうとすると、サイトが表示されるまで時間がかかってしまいます。

スクロールで画面表示内に画像が表示されるまであえて画像を読み込まない「画像の遅延読み込み」をすることで、Webサイトの画像以外のCSSやJSファイルの読み込みを最優先し、Webサイトの表示速度を早めることができます。また、Webサイト下部にある必要のない画像部分の読み込みがなくなるため、不必要なネットワークの読み込みがなくなります。

Lazy Loadとは？

Lazy Load(レイジーロード)は、画像の遅延読み込みを実行するためのJavaScriptライブラリです。Lazy Loadは複雑な知識を必要とせず、jQueryとの依存性がないため、様々なWebサイトに導入可能です。

本来のWebサイト閲覧と異なり、ダミーの画像を組み込むことで本来の画像の読み込みとは違う状態に組み替えます。そうすることで、画面スクロールで画像が画面内に表示されるまで画像の読み込みを行わず、表示速度を高速化する技術が使用されています。Webサイトの画面表示速度が上がることで、WebのSEO対策ができて検索上位に持ち込むことが可能です。

Lazy Loadを導入する2つのメリット

Lazy Loadを実際に導入することで、画像の遅延読み込みができるだけでなく、Webページ所有者と利用ユーザーの両方にとって嬉しいメリットがあります。メリットとして大きく挙げられるのが以下の通りです。

以上の2つのメリットについて、詳しく説明していきます。

メリット1.ページの表示速度が上がる

画像の読み込みを遅らせることで、Webサイトのページの表示速度を上げることができます。表示速度が重要な理由として、ページの表示速度はユーザーを集めるためにとても重要な役割があるからです。

Googleの調査では、ページの表示速度が遅くなるほどユーザーの離脱率が高くなったという結果がでています。実際にページの読み込み時間が1〜3秒で32%の離脱率、1〜5秒で90%、1〜6秒で106%、1〜10秒で123%も上がると分かりました。

ページの表示速度が遅くなるその主な原因は、Webページ内の画像の容量が大きいことが挙げられます。

Web検索をかけた際に検索上位に上げるためには、ユーザーの負荷を減らしてページ内に引き止めること、ページの表示速度が重要になります。画像が多く使われるECサイトなどでは特に有効です。

メリット2.データ転送容量を節約できる

データの転送容量が節約できることは、ユーザーにとって嬉しいメリットです。PCで検索する場合はあまり問題ありませんが、多くのユーザーがスマートフォンから検索するため、データの転送容量が少ないことでスマートフォンのデータ使用容量が減らせます。

スマホで検索する時代だからこそ、データ転送容量の節約はユーザーのストレスも同時に減らすことにつながります。

Lazy Loadを導入する2つのデメリット

しかしLazy Loadを導入することはメリットばかりではありません。Lazy Loadを利用することで起こるデメリットは以下のものが挙げられます。

以上の2つのLazy Loadの導入によって生まれるデメリットについて詳しくみていきます。

デメリット1.ページにずれが生じるケースがある

関数の位置を間違えることでLazy Loadが正しく実装されずにレイアウトのズレや空白部分の表示、画像が表示されないといったことでページのずれが生じる可能性があります。

Lazy Loadの実装にはjQuery、HTML、CSSといった知識が必要です。プログラミングの知識がない場合には、コードの組み込みやエラーの修復方法がわからない等で、簡単に実装できない可能性があります。

デメリット2.ページ表示が間に合わない場合がある

Lazy Loadの実装が上手く行われなかった場合に、画像を読み込もうとするリトライ回数が何度も実行されます。それにより、本来のページ表示速度より遅くなる可能性があります。

Lazy Loadは画像の遅延読み込みによってページ表示速度の向上が図れるのに対し、間違った実装で改悪してしまうことを考慮しなければいけません。

Lazy Loadを実装する3つの方法

Lazy Loadを実際に実装しようとする際には、どのプログラミングやツールを使うかによって異なり、主に以下の3つの方法が挙げられます。

それぞれの実装方法について以下に簡単に説明していきます。

1.loading属性で実装

loading属性はブラウザの標準機能における画像の遅延読み込みをサポートします。Webページ内のHTMLにloading属性を実装することで、遅延読み込みのタイミングを自分で指定して実行します。

loading属性の実装で、img要素（画像）やiframe要素（YoutubeやGoogle Map等）を簡単に遅延読み込みすることが可能です。loading属性では次の3つの遅延読み込みを設定することができます。

コードの組み込みは難しくなく、以下の例のように書き込みます。

＜例＞

▼img要素の場合

<img src="画像URL" loading="lazy" alt="…" width="200" height="200">

<iframe src="ページURL" loading="lazy"  width="200" height="200">

画像サイズの指定は必須ではありませんが、ユーザビリティを考慮する際に設定しておくと効果的です。

また、値を変える場合は、「lazy」を「eager」「auto」に変更するだけで大丈夫です。現在対応可能なブラウザは以下の5つです。

（参考URL: https://caniuse.com/loading-lazy-attr）

以上以外のブラウザでloading属性を実装しても遅延読み込みが実行されないので、気をつけなければいけません。

2.JavaScriptのライブラリで実装

loading属性に対応していないブラウザには、JavaScriptライブラリの「Layzr.js」でLazy Loadを実装できます。実装の手順は以下の通りです。

一度Lazy Load Remasteredのダウンロードを終えたら、head内もしくはbody内に以下のJavaScriptタグを設定します。

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>

そしてimgタグの書き込みですが、<class=”lazyload”>を忘れずに以下のようにコードを埋め込みます。

<img class”lazyload” width="200" height="200" data-src=”画像URL” alt="…" />

<iframe class=”lazyload” data-src=”ページURL”></iframe>

最後に以下のlazy()関数を呼び出して実装完了です。

<script>lazyload();</script>

3.WordPressのプラグインで実装

Webサイト作成でWordPressを利用している場合は、既にWordPressに搭載されているプラグイン機能で遅延読み込みを簡単に実装することが可能です。

WordPressではimg要素とiframe要素に「loading=”lazy”」が自動的に組み込まれる仕組みなので難しく考える必要がありません。WordPressのプラグインは複数ありますが「Lazy Load–Optimize Images」が軽量かつシンプルな仕組みで初心者に扱いやすいプラグインです。

Lazy Loadでよくある2つの問題

Lazy Loadを利用する中で、上手くコードが組み込まれずにLazy Loadが実行されない、エラーが発生するなど、正しく実行されない問題が発生しています。Lazy Loadでよく発生する主な2つの問題についての原因と対策を紹介いたします。

画像がすぐに読み込まれてしまう

「data-src」の部分を「src」のみでコードを組み込むことで画像がすぐに読み込まれる原因です。画像の遅延読み込みを実行するためには、「data-src」属性で画像を指定しなければいけません。

また、画像を読み込む前にブラウザが画像サイズを認識できるように、width / height属性で高さと幅をimgタグ内に指定したり、min-heightプロパティをCSSに記述したりすることで以上の問題を対策できます。

画像の読み込みが遅い

Lazy Loadは表示外の画像の読み込みを遅延させる機能があるものの、画像の読み込みを早めるシステムではありません。そのため、画像ファイルのサイズが大きい場合は、画像ファイルの読み込みに時間がかかる可能性があります。

画像の読み込みが遅いと感じた際は、画像ファイルのフォントを変えたりサイズを圧縮したりして見直す必要があります。

まとめ

画像の遅延読み込みは、Webサイトの画像の表示を遅らせることでページ表示速度が向上し、利用ユーザーにとって利用しやすいサイトにすることができます。

遅延読み込みのプラグでも、Lazy Loadは様々なサイトに実装しやすいことから、多くの人に利用されています。ページの表示速度はSEO対策には欠かせない要素なので、遅延読み込みを利用したことがない人はLazy Loadを一度Webサイトに実装して対策してみてください。

あわせて読みたい

サイトスピードの改善に成功！PageSpeed Insightの調査結果を元にした施策7選 当記事では、サイトの読み込みスピードが与える影響を紹介した上で、計測ツール「Google PageSpeed Insights」の見方や使い方を解説します。また、実際のメディアサイトで読み込みスピードを改善したいくつかの施策もご紹介します。