遅延読み込み【lazy loading】レイジーロード

概要

遅延読み込み（lazy loading）とは、プログラムの高速化手法の一つで、資源が実際に必要になってから読み込みや初期化を行うこと。Webブラウザがページ内の画像などの読み込みを表示範囲が遷移してくるまで遅延させる仕組みなどを指すことが多い。

Webページには画像や動画など様々な要素を埋め込み表示することができるが、従来のWebブラウザの動作では資源の読み込みを指示するタグに出会ったら即読み込みを開始する仕組みだったため、多数の画像など配置されていると前方の要素の表示が速やかに完了せず、閲覧体験を損ねていた。

遅延読み込みを実装したページでは画像などの読み込みはすぐには開始せず、利用者がブラウザの表示範囲（ウィンドウ）を移動させて実際に表示が必要になった段階で読み込みを行う。最初に表示される最上部（ファーストビュー）はすぐに読み込みと表示が実施される一方、後方の領域は必要になるまで待機させられる。

Webページの遅延読み込みはスクリプトなどで実装するのが一般的だったが、2019年にGoogle Chromeがloading属性を追加し、imgタグやiframeタグでloading="lazy"と指定するだけでその要素を遅延読み込みすることができるようになった。現在ではHTML5規格に取り込まれて主要なWebブラウザが対応している。

(2023.5.2更新)