Lazy Loadとは？使い方やHTML・JSでの設定方法、SEOの影響など

Lazy Loadとは、画像を遅延読み込みさせるJavaScriptライブラリです。今回はLazy Loadに焦点を当て、その概要や重要性、メリット・デメリット、導入・実装方法などをご紹介します。気になるポイントを一挙確認してしまいましょう。

Lazy Loadとは？

Lazy Loadとは、画像を遅延読み込みさせるJavaScriptライブラリです。

ユーザーがページをスクロールし、画像が画面に入ったタイミングで画像を読み込ませるテクニックで、重要画像の表示を高速化させる施策とも言えるでしょう。

Lazy Loadはどのように動作するのか？

Lazy Loadは、ページの読み込み時に画面外の画像を遅延読み込みすることで、初期ロード時間を短縮する技術です。具体的には、以下のような流れで動作します。

ページの HTML が読み込まれる際、Lazy Load を適用した画像の src 属性は空か、代替の画像（ローディング画像など）に設定
JavaScript で画面のスクロールイベントを監視し、画像が表示領域に近づいたタイミングを検知
表示領域に近づいた画像の src 属性を、実際の画像 URL に動的に書き換え
ブラウザが画像を読み込み、表示

このように、Lazy Load はページの初期ロード時に画面外の画像を読み込まず、必要になったタイミングで遅延読み込みを行うことで、ページの表示速度を向上させます。ただし、JavaScript が無効な環境では画像が表示されない可能性があるため、noscript タグ内に通常の img タグを記述するなどのフォールバック対策が必要です。

Lazy Load の動作を理解することで、適切に実装し、ページパフォーマンスを最適化することができるでしょう。

Lazy Loadの重要性

基本的に、ブラウザは表示されたページに含まれるすべての画像を一度に読み込もうとします。

画像ファイルの容量が多いほど、画像の読み込みに時間がかかるため、ネットワークやサーバーに負担がかかりやすいです。ネットワークやサーバーに負荷をかけないための制御技術としてLazy Loadが普及し始めました。

Lazy Loadを活用すると、ユーザーが実際に見ている画面外にある画像は読み込まれません。
ユーザーが画面をスクロールし、画像が画面に表示されそうになった時点で読み込みし始めます。

なお画像の読み込み速度については、Googleが提供する無料ツール「PageSpeed Insights」で計測できます。気になる方は調べてみましょう。

【公式ページ｜PageSpeed Insights】

Lazy Loadのメリット

Lazy Loadを活用すれば、画像の読み込み時間が短縮されたり、少なくなったりします。
そのため、Webページ全体の表示速度が向上し、同時にユーザビリティも向上します。

ページの高速表示は、ユーザーストレスの軽減やUXの向上につながります。
逆にユーザビリティが低いとページ離脱につながる原因となります。

Googleが2017年に行った調査では、ページ速度が1秒から3秒になると直帰率が32％に上がり、6秒になると106％まで上がるという結果を報告しています。
【出典：ウェブに関する主な指標レポート】

また、ページの高速表示は、SEOにおいても効果的です。
Googleはページの表示速度を検索ランキング決定の要素としています。
そのため、Webサイト運営において軽視できない観点と言えるでしょう。

Lazy Loadのデメリット

Lazy Loadのデメリットは、クローラー(検索エンジンが検索順位を決定するための要素をWebサイトを巡回して収集してくるロボット)に画像を認識してもらえない場合があることです。

クローラーは人間のようにスクロール動作は行いません。
そのため、遅延処理で読み込ませた画像を認識できない場合があります。

画像を遅延読み込みは、ユーザーから見ると大きなメリットになりますが、クローラーから見るとデメリット要素になるため注意が必要です。

しかし、Googleは、クローラーが遅延処理で読み込ませた画像を認識できない場合に備えて、回避策を用意しています。
詳細は、以下のGoogle公式ページをご参照ください。

【公式ページ｜遅延読み込みコンテンツをGoogleが認識できるようにする】

Lazy Loadの導入方法

Lazy Loadのライブラリは、GitHub(ソフトウェア開発のプラットフォーム)で公開されています。

Lazy Loadを導入する手順は以下です。

①Lazy LoadのJavascriptタグを配置する
②img要素に<class=”lazyload”>とsrc属性を記述する
③lazyload()関数を呼び出す

なお詳細は、以下の公式サイトにて確認可能です。
【https://github.com/tuupola/lazyload】

ブラウザによっては標準でサポートされている

Lazy Loadはブラウザの標準機能として、多くのブラウザにサポートされています。2019年にGoogle ChromeはLazy Loadをネイティブでサポートするようになり、JavaScriptを使わずに実装可能になりました。

これに続き、他の多くのブラウザもLazy Loadへの対応を進めており、2023年時点でIEとOpera Miniを除くほぼ全てのブラウザがLazy Loadに対応しています。ただし、Lazy Loadがサポートされていない古いブラウザには引き続きJavaScriptを使用した対応が必要です。

Lazy Loadの実装方法

ここでは、Lazy Loadの実装方法について解説します。

loading属性で実装する

loading属性とは、ブラウザ(Chrome)の標準機能で、画像の遅延読み込みをサポートするものです。
この機能を活用すれば、img要素やiframe要素を簡単に遅延読み込みさせることができます。

loading属性は、以下の3つの値をサポートします。

値	概要
lazy	画面外の画像を遅延読み込みする
eager	画像を早急に遅延読み込みする
auto	ブラウザ側に遅延読み込みを任せる

【例：img要素】

・<img src=”画像のURL” loading=”lazy” alt=”..”/>
・<img src=”画像のURL” loading=”eager” alt=”..”/>
・<img src=”画像のURL” loading=”auto” alt=”..”/>

【例：iframe要素】

なおLazy Loadの対応ブラウザは以下です。
loading属性を使用する際は、必ず確認しましょう。

【参考サイト：Lazy Loadの対応ブラウザ】

JavaScriptのライブラリで実装する

非対応のブラウザで、loading属性を使用したい場合、JavaScriptライブラリ「Layzr.js」で実装できます。

具体的な手順は以下です。

①「Lazy Load Remastered」からファイルをダウンロードする
②Javascriptタグの設定を行う
③<class=”lazy load”>とsrc属性をimgタグに記述する
④lazyload()関数を実行する

WordPressのプラグインで実装する

WordPressの場合は、すでに搭載されているプラグイン機能で遅延読み込みの実装が可能です。
なおWordPressでは、img要素やiframe要素に「loading=”lazy”」が自動追加される仕組みになっています。

WordPressのプラグインは複数あります。
本記事では、設定がシンプルかつ軽量で利用できる「Lazy Load–Optimize Images」をおすすめします。

なお対象となる画像については、Wordpress公式サイト「Lazy-loading images in 5.5 – Make WordPress Core」をご確認ください。

Lazy Loadを活用しWebサイトの検索順位を引き上げよう！

このページでは、Lazy Loadに焦点を当て、その概要や重要性、メリット・デメリット、導入・実装方法などについて解説しました。

画像の遅延読み込みは、ユーザビリティの向上やSEO対策に有効です。
WebサイトやページのSEO対策に励む方は必ず意識したい観点と言えるでしょう。

またLazy Loadの実装については、各々の環境に合わせてチョイスしてみてください。
特にWordpressの場合は、自動でタグを追加する機能が搭載されているため簡単に実装できます。

今ずぐLazy Loadを活用し、Webサイトの検索順位を引き上げましょう。

「Lazy Load」やSEOなどお悩みの場合は株式会社ipeにご相談ください。株式会社ipeではSEOでの大手クライアント実績多数！SEOを検討する際にはぜひ一度ご相談ください。