画像の遅延読み込みとは？設定する方法や導入できないときの対処法も解説
執筆者
マーケティングサポート「バンソウ」のメディア管理人
株式会社クリエイティブバンクのマーケティングサポート「バンソウ」のメディア管理人。得意分野は、SEO全般・サイト分析・オウンドメディア・コンテンツマーケティング。バンソウはクライアント様のBtoBマーケティングをサポートするサービスです。詳しい内容はこちらをご覧ください。
そもそも画像の遅延読み込みとは
画像の遅延読み込み（lazyload）とは、Webページ内の画像を一度にすべて読み込むのではなく、画面に表示されている範囲内の画像のみを都度読み込んで表示させることを指します。
表示されていない部分の画像は読み込まないため、アクセス時に読み込むデータ量を削減でき、表示速度を高速化できるのです。
画像の遅延読み込みを導入するメリット
画像の遅延読み込みを設定する最大のメリットは、Webページの表示速度を高速化できることです。
2018年にGoogleが行った調査によると、画像表示が1秒から5秒になると直帰率が90％増加し、1秒から10秒になると123％増加したという結果が出ています。
出典：New Industry Benchmarks for Mobile Page Speed｜Think With Google
表示速度を高速化することで直帰率を低下させられる可能性があり、これは十分メリットになるといえるでしょう。
またWebページの表示速度は、ユーザビリティの観点だけではなくSEOの観点から見ても外せないポイントです。
パソコンからではなくスマホからのアクセスが増加傾向にあることから、Googleはスマホからのアクセスにおけるユーザーエクスペリエンスの向上を推奨しています。
モバイルフレンドリーなWebページの作成に、表示速度を高速化する画像の遅延読み込みは一役買うシステムであるといえるでしょう。
参照：モバイルファースト インデックスに関するおすすめの方法｜Google 検索セントラル
上位表示に直接関わる要素ではないものの、ユーザーにとって利用しやすいWebページであれば滞在時間も増え、離脱も減り、直帰率が下がることは予想できます。
直帰率が低いということはユーザーの満足度がある程度高いと考えられ、良質なWebページであるとも判断できます。
このような判断材料のひとつとなる点も、設定するメリットだといえるでしょう。
画像の遅延読み込みを導入するデメリット
画像の遅延読み込みを設定するデメリットは、クローラーが画像を読み込めない可能性があることです。
クローラーは、スクロールしてWebページを表示させるという行動を取らないため、遅延読み込みをさせた画像を読み込むことができません。
クローラーに画像を読み込んでもらえないケースが発生する点はデメリットと呼べるでしょう。
ただし、このケースにはGoogle公式から対策方法が発信されていますので、その方法を一部抜粋してご紹介します。
詳細については、下記リンクをご覧ください。
- 画像や iframe にネイティブ遅延読み込みを使用する
- IntersectionObserver API とポリフィルを使用する
- ビューポートに表示されるデータのみを読み込む JavaScriptipt ライブラリを使用する
引用：遅延読み込みコンテンツを修正する｜Google 検索セントラル
画像の遅延読み込みを設定する方法
ここからは、画像の遅延読み込みを設定する方法を2つご紹介します。
それぞれの方法にあるメリットとデメリットや、使い分けについてもあわせて紹介しますので、設定をご検討の方はぜひご覧ください。
<img>タグに「」を入力する
画像の遅延読み込みを設定する1つ目の方法が、画像を表示させる<img>タグに、 直接「」を入力する方法です。
入力例は以下のとおりです。
<img src="ex.jpg" alt="△△△" width="800" height="450">
遅延読み込みを設定すると、CLSと呼ばれるレイアウトがずれてしまう現象が発生してしまうことがあります。
この現象を防止するためにも、例のように「width」と「height」で画像サイズを設定しましょう。
loading属性には、lazyのほかに以下の2つの値も設定できます。
- eager：ページを表示したときに画像を読み込む
- auto：ユーザーの接続速度に応じてlazyもしくはeagerか自動選択する（初期値）
<img>タグに「」を入力する方法のメリットとデメリットは以下のとおりです。
| メリット | ブラウザの標準サポートの範囲内であり、ライブラリ追加も不必要 |
| デメリット | <img>タグに記述を追加するだけで実装可能 古いバージョンのブラウザやIEには未対応 カスタマイズできない <img> <iframe>タグに対してのみ使用可能 |
JavaScriptのライブラリを使用する
JavaScriptのライブラリを利用して画像の遅延読み込みを設定する方法もあります。
まずはJavaScriptのライブラリである「lazysizes」をダウンロードしましょう。
ダウンロード方法は、以下の3つです。
【CDNを用いる方法】
- ❶Cdnjsにアクセスし、該当タグの横にある</>マークをクリックし、コピーする
- 引用：lazysizes - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
❷htmlの<head>内に、コピーしたscriptタグを貼り付ける
【公式ドキュメントを用いる方法】
- ❶lazysizes公式ドキュメントにアクセスし、「Code」→「Download ZIP」の順に選択する
引用：GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScriptipt without configuration.
❷ダウンロードしたファイルから「lazysizes.min.js」を探し、作業中のフォルダ内に格納する
❸htmlの<head>内に、ダウンロードしたファイルを読み込むためのscriptタグを記入する
※src属性内は、ファイルを格納している場所に応じて書き換えてください
例）<script src="./lazysizes.min.js"></script>
【npmを用いる方法】
- ❶npmにアクセスし、「lazysizes」を検索する
-
引用：npm
❷「npm install lazysizes --save」もしくは「bower install lazysizes --save」を実行する。「npm i lazysizes」を実行してインストールする
❸JavaScript（jsファイル）でライブラリをインポートする
続いて、<img>タグに画像の遅延読み込みを記入します。
手順は以下のとおりです。
- ❶遅延読み込みを設定したい<img>タグのsrc属性をdata-src属性へと書き換える
❷class属性にlazyloadを記入する
<img>タグは以下のようになります。
<img data-src="image.jpg" class="lazyload" alt="△△△" width="××" height="〇〇">
JavaScriptを使用するメリットとデメリットは以下のとおりです。
| メリット | 古いバージョンのブラウザやIEにも対応 オプションが多く、読み込み方法もカスタマイズ可能 <img>タグ以外も遅延読み込みを設定できる機能あり |
| デメリット | scriptを読み込むため、初期の表示速度が遅くなる可能性が高い 実装に手間がかかる |
どう使い分ければよい？
「」の場合、ほとんどのブラウザに対応していることから、基本的には「」を使用するのがよいでしょう。
ただし、古いブラウザを使う場合や機能性を重視して使用したい場合は、JavaScriptを使用するのがおすすめです。
WordPressで画像の遅延読み込みを導入する方法
続いて、WordPressを使用しているケースで画像の遅延読み込みを設定する方法をご紹介します。
WordPressの場合、標準機能として画像の遅延読み込みが設定されています。
エディター画面にて画像を挿入すると、1枚目には後述する「decoding="async"」が自動付与され、2番目以降の画像には順次「」が自動で付与されるようになっています。
ただし、テンプレートファイル（phpファイル）に直接記入した<img>タグには自動付与されません。
カスタムHTMLで<img>タグを記入した場合は、「width」と「height」が設定されているケースでのみ、「」が付与されるようになっています。
プラグインで設定する方法もありますが、標準機能に搭載された現在では、使用する理由は薄まっているといえるでしょう。
decoding=”async”で画像の非同期デコードを行う方法
非同期デコードとは、画像の読み込み時にほかのコンテンツの読み込み（レンダリング）を妨害しないようにするためのものです。
通常、画像をデコードしている間はページの読み込みが遅くなり、表示速度も低下してしまいます。
しかし「decoding="async"」を使うことにより、バックグラウンドでのデコードが可能となり、レンダリングを妨げないようにできるのです。
記入例は以下のとおりです。
<img src="example.jpg" decoding="async" alt="△△△" width="××" height="〇〇">
decoding属性には、以下の2つの値も設定できます。
- sync：デコード中はほかのレンダリングをしないようにする
- auto：ブラウザによって最適な方法を自動選択する（初期値）
遅延読み込みの設定できないときの対処法
画像の遅延読み込みが設定できないときは、以下の方法をお試しください。
画像サイズをリサイズする
画像の遅延読み込み設定ができない場合、原因としてファイルや画像のサイズが大きすぎることが考えられます。
この場合は、画像のファイルを圧縮したり、画像サイズを小さくリサイズしたりすることで設定できるようになる可能性が高いといえます。
関数を呼び出すタイミングを変更する
画像の遅延読み込みは、関数を呼び出すタイミングを誤ると、画像が表示されなかったりうまくWebページが読み込まれなかったりすることがあります。
自分でコードを記入している場合はこのケースに該当することが多いため、関数を呼び出すタイミングが適切かどうかを確認して変更しましょう。
一般的には<body>～</body>内の最後に呼び出すのがよいとされています。
画像の遅延読み込みに関するFAQ
最後に、画像の遅延読み込みに関してよくある質問とその答えをまとめました。
画像の読み込みが遅い
画像の読み込みが遅い場合は、先述したように、ファイルを圧縮するか画像サイズをリサイズしましょう。
画像の最適化をすることで改善する可能性があります。
画像がすぐに読み込まれる
画像を「img src=」で指定している場合、画像がすぐに読み込まれる現象が発生することがあります。
この場合は、「img data-src=」で画像を指定しましょう。
また、あらかじめ「width」「height」属性を使って画像サイズを指定しておくのもおすすめです。
まとめ
この記事では、画像の遅延読み込みについてご紹介しました。
遅延読み込みを設定することで、画像を挿入している箇所までスクロールされたタイミングで画像を読み込むようになるため、Webページの表示速度の高速化につながります。
閲覧したいWebページの表示速度に時間がかかってしまうと、多くのユーザーが離脱してしまうという結果も出ているため、表示速度はユーザー満足度を上げるためにも欠かせない要素といえます。
まだ画像の遅延読み込みを設定されていない場合は、適宜取り入れてください。
