Lazy Loadとは？メリットや注意点・実装方法を解説

表示高速化
2021-10-22
更新日: 2024-4-12
yuta.tanaka

TanakaYuta SEO Div. コンサルタント

現在までに100社以上のSEO対策に従事し、様々なジャンル・キーワードで上位表示を実現。薬機法管理者の資格を有しているいること、SEOライターとして自身でもライティングができることから、広告表現が難しい医療・美容・健康を得意領域としている。「成分名」や「〇〇効果」などの難関キーワードでの上位表示実績多数。SNSでの情報発信にも力を入れており、約10,000名のフォロワーを獲得している。

執筆者の投稿をみる

Webサイトで大量の画像を使用していると、読み込みに時間がかかり、Webページの表示速度が低下してしまいます。結果的に、ユーザーの画面操作に支障が出たり、表示速度が遅いことによって検索エンジンからの評価が下がったりする恐れがあります。それらの解決策の1つが「Lazy Load」です。

Lazy Loadを導入することによって画像の遅延読み込みが可能になるため、その分だけ表示速度を高速化できます。本記事では、Lazy Loadの概要や実装方法、メリットや注意点を解説しますので、ぜひ参考にしてください。

無料の高速化診断、実施中！

「PageSpeed Insightsのスコアが低い…」「どう改善すれば良いかわからない…」
など、表示速度の課題を感じている方に、表示速度が遅いページ一覧と原因・改善施策がわかる無料の高速化診断を実施中！サイトの現状を知りたい方、改善施策が知りたい方は、ぜひお気軽にお申し込みください。

【無料】高速化診断のお申し込みはこちら

1 遅延ロードとは？
2 Lazy Loadとは？
3 Lazy Loadの実装方法
4 ChromeのアップデートによりネイティブのLazy Loadがサポートされた
5 各ブラウザのサポート状況
- 5.1 古いブラウザへの対応には、引き続きJavaScriptでの対応は必要
6 Lazy Loadを実装するメリット
- 6.1 データ容量を節約できる
- 6.2 ユーザーの体感速度が向上する
7 Lazy Loadの注意点
8 Lazy Loadの実装はSEOに効果があるのか
9 まとめ：高速化のためにもLazy Loadを実装しましょう
10 高速化診断 & 表示速度改善でユーザー体験とCVRを向上！

遅延ロードとは？

Lazy Loadを理解する際、先に遅延ロードの概要を理解することが大切です。遅延ロードとは、ユーザーに表示されている範囲内（領域内）の画像のみを読み込む仕組みのことで、表示されていない画像の読み込みは行いません。ブラウザは通常では、imgタグの画像ファイルを一度にすべて読み込む仕組みとなっています。

そのため、画面の範囲外の画像まですべて読みこんでしまうことから、ユーザーからすれば無駄に読み込みが行われているということです。結果的にWebページの表示速度を低下させることにも繋がるため、それらを防ぐ方法の1つが遅延ロードになります。遅延ロードを実装することで、画面の範囲内である必要な画像のみを読み込めます。

Lazy Loadとは？

遅延ロードの概要をご説明したところで、Lazy Loadについて解説します。Lazy Loadとは、上記でご説明した遅延ロードを行うライブラリのことであり、JavaScriptにて記述します。Lazy LoadはjQueryへの依存性もないため、実装は非常に簡単です。

また、実装することによってWebページの表示速度が上がり、検索エンジンからの評価が高まることにも期待ができます。

Lazy Loadの実装方法

Lazy Loadは、GitHubにてソースコードが公開されています。こちらを踏まえて、Lazy Loadを実装する手順は下記のとおりです。

scriptタグの配置
imgタグの記述
lazyload()関数の呼び出し

それぞれの手順を順番に見ていきましょう。

scriptタグの配置

まずは、scriptタグを配置します。これはloadload.jsを読み込むために配置するものであり、head内、body内のどちらでも構いません。

imgタグの記述

次に、デフォルトで動作するimgタグの記述を行います。下記の書き方でないと動作しないため、imgタグの記述には注意が必要です。

なお、画像にはalt属性を記述することを忘れないようにしましょう。alt属性があることによって、検索エンジンが画像の内容を適切に読み込みやすくなるためです。

lazyload()関数の呼び出し

最後に、lazyload()関数の呼び出しを行います。基本的なタイミングとしては、bodyの最後に記述する形で問題ありません。

上記までの手順が完了すれば、無事にLazy Loadが適用されます。

ChromeのアップデートによりネイティブのLazy Loadがサポートされた

ここまで、Lazy Loadの概要や実装方法を解説しました。しかし、2019年のGoogle Chromeのアップデートによって、ネイティブでLazy Loadがサポートされるようになりました。つまり、JavaScriptの記述なしで、Lazy Loadが実装できるということです。

実装方法はとてもシンプルで、遅延読み込みを行いたいリソースに『loading=”lazy”』という記述を加えるだけ。
とても簡単にLazy Loadを実装できるようになりました。
Googleとしてもそれだけ快適なユーザー体験が重要であると認識しているということですね。

また、Chromeに続いて、他のブラウザでもLazy Loadへの対応が進んでいます。

各ブラウザのサポート状況

2023年5月現在、上記画像のようにIE・Orpera Miniを除く、ほぼ全てのブラウザで対応が完了しています。

今後は、古いブラウザや一部のブラウザへの対応を考えないのであればloading属性の記述だけで、遅延読み込みを実装することが可能となります。

古いブラウザへの対応には、引き続きJavaScriptでの対応は必要

古いブラウザのユーザーを考慮するのであれば、もうしばらくの間はやはりJavaScriptによる記述は必要だと言えるでしょう。

Lazy Load自体は高速化に非常に有用であるため、ネイティブ・JavaScript問わず、積極的に実装することを推奨します。

Lazy Loadを実装するメリット

ここからは、Lazy Loadを実装する下記2つのメリットをご紹介します。

データ容量を節約できる
ユーザーの体感速度が向上する

それぞれ順番に見ていきましょう。

データ容量を節約できる

まず、データ容量を節約できることがLazy Loadのメリットです。これは言葉のとおりなのですが、画面外の画像は一切読み込まないため、その分だけ携帯キャリア等のデータ容量を節約できます。

ユーザーの体感速度が向上する

次に、ユーザーの体感速度が向上することもLazy Loadのメリットです。簡易的にご説明すると、通常Webページは下記の手順を経て表示されます。

ユーザーがWebページを見るためのリクエストがWebサーバーに対して行われる
HTMLの確認が始まる
同期スクリプトが読み込まれる
非同期スクリプト・画像が読み込まれる

上記の画像の読み込みに関しては、ユーザーからすれば、画面外の画像がすべて読み込まれている必要はありません。Lazy Loadでは、表示している領域内の画像のみが読み込まれるため、結果的にユーザーの体感速度が向上します。特に、ECサイト等の大量の画像が使用されているWebサイトに有用だと言えるでしょう。

Lazy Loadの注意点

ここまで、Lazy Loadを実装するメリット等を解説しました。ここでは、Lazy Loadの下記3つの注意点をご説明します。

画像がすぐに読み込まれてしまう
画像の読み込みが遅い
画像が読み込まれない

それぞれ順番に見ていきましょう。

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

src属性で画像を指定してしまうと、画像がすぐに読み込まれてしまいます。対策方法はdata-src属性で指定することです。また、画像を読み込む前にブラウザ側が画像サイズを認識できるように、min-heightプロパティをCSSで記述したり、width / height属性をimgタグで指定したりましょう。