- 表示高速化
- 更新日:

Webサイトで大量の画像を使用していると、読み込みに時間がかかり、Webページの表示速度が低下してしまいます。結果的に、ユーザーの画面操作に支障が出たり、表示速度が遅いことによって検索エンジンからの評価が下がったりする恐れがあります。それらの解決策の1つが「Lazy Load」です。
Lazy Loadを導入することによって画像の遅延読み込みが可能になるため、その分だけ表示速度を高速化できます。本記事では、Lazy Loadの概要や実装方法、メリットや注意点を解説しますので、ぜひ参考にしてください。
無料の高速化診断、実施中!
「PageSpeed Insightsのスコアが低い…」「どう改善すれば良いかわからない…」
など、表示速度の課題を感じている方に、表示速度が遅いページ一覧と原因・改善施策がわかる無料の高速化診断を実施中!サイトの現状を知りたい方、改善施策が知りたい方は、ぜひお気軽にお申し込みください。
目次
遅延ロードとは?
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内のどちらでも構いません。
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
imgタグの記述
次に、デフォルトで動作するimgタグの記述を行います。下記の書き方でないと動作しないため、imgタグの記述には注意が必要です。
<img class="lazyload" width="765" height="574" data-src="img/logo.png" alt="〇〇" />
なお、画像には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タグで指定したりましょう。
画像の読み込みが遅い
Lazy Loadは、画像の配信を早くするための記述ではありません。あくまで、領域外の画像は読み込まないようにするための記述ですので、画像の読み込みが遅い場合は、画像自体のファイルサイズを軽量化させることが重要です。
画像が読み込まれない
画像が読み込まれない場合は、lazyload()関数の呼び出しが早すぎる可能性があります。また、lazyload()関数を呼び出していないかもしれません。必ず、bodyの末尾に記述されているか確認するようにしましょう。
Lazy Loadの実装はSEOに効果があるのか
最後に、Lazy Loadの実装がもたらすSEO効果を解説します。前提として、測定するWebページやWebサイトによって異なる上でご説明すると、Lazy Loadの実装によって、「約2秒」読み込み速度が向上すると言われています。
もちろん、画像があまり使用されていないWebページでは大きな向上は見込めないかもしれませんが、ECサイト等の大量の画像が使用されている場合は、表示速度の向上が見込めるでしょう。
検索エンジンは、表示速度の早いWebサイトを評価します。つまり、Lazy Loadによって表示速度を高速化させることで、結果的にSEOに効果をもたらし、検索順位が上がることに期待ができます。
まとめ:高速化のためにもLazy Loadを実装しましょう
本記事では、Lazy Loadの概要や実装するメリット、実装方法等について解説しました。Lazy Loadは、ネイティブ対応しているブラウザも存在しますが、未対応のブラウザもあるため、現時点ではJavaScriptでの記述は必須だと言えます。
SEOで良い評価を受け、検索順位を上げるためにも、本記事を参考にLazy Loadの実装を始めてみてはいかがでしょうか。
高速化診断 & 表示速度改善でユーザー体験とCVRを向上!
デジタルアイデンティティでは、Webサイトの表示速度に課題を感じている企業様向けに、無料の高速化診断とフロントエンドからインフラまで一貫対応する表示速度改善サービスを提供しています。
表示速度が遅いページ・原因が一覧でわかる高速化診断でサイトの現状を徹底分析。PageSpeed Insightsのスコア改善はもちろん、画像・CSS/JS・サーバー処理・インフラ最適化まで、技術力と実績に裏打ちされた幅広い施策で、SEO評価やCVR、UI/UXを総合的に底上げします。
こんなお悩み、ありませんか?
- まずはサイトの現状を診断してほしい…
- PageSpeed Insightsのスコアが低く、改善したい…
- ユーザー離脱や直帰率が高く、表示スピードが原因かもしれない…
- 高速化に詳しいエンジニアが社内にいない…
- 対策したがスコアが上がらない、改善方法がわからない…
多くの企業サイトやLP、ECサイトなどで成果を上げてきた表示速度改善のプロフェッショナルが、貴社サイトの課題を根本から解決します。