画像の遅延読み込みとは
簡単にいうと、画面外にある画像の読み込みを抑制することです。
スクロールしてimg要素が画面内に入ったときにクライアント側でsrc属性を書き換えて読み込みを開始します。
画像の遅延ロード、lazyloadなどとも呼ばれます。
WEBページをレンダリングするときにはHTML構造や同期スクリプトが読み込まれて(DOMContentLoaded)、続いて画像や非同期スクリプトなどのファイルが読み込まれます(Load)。
通常はDOMContentLoadedからLoadまでの間に画面外の画像も読み込まれてしまいますが、最初のレンダリングでは不要な通信ですよね。
これを抑制し、スクロールに合わせて読み込むことでユーザーフレンドリーにします。
特に画像の多いサイトや縦に長いランディングページなどでは大変有効な手法です。
メリット
- 最初のレンダリングが終わるまでの時間が短くなる
- 不要な通信が減るのでユーザーフレンドリー
- スピードアップデート以降のSEO対策として有効
画像が多いページの場合、最初のレンダリングが終わるまでの時間が劇的に短くなります。
さらに、Loadをトリガーにした処理が組み込まれている場合は効果てきめんです。
例えばロード画面が閉じるまで2秒後がいいか、4秒後がいいかを考えてみてください。
デメリット
- 読み込まれるまでの間は代替画像や空白で表示される
- 画像が読み込まれたときに要素の高さが変わり、以降の要素の座標が変わってしまうことがある(※1)
- クローラーはスクロールイベントを起こさないため、画像を使ったSEOとは相性が悪い(※2)
※1: width属性、height属性を適切に指定するなどの方法で回避できます。
※2: 構造化データに画像URLを含めることで対策が可能です。
すこし手間ではありますが、対策は可能です。
ライブラリ・プラグイン
lazysizes.js(非同期読み込み)
- jQuery非依存
- 非同期読み込みができる
- APIの機能が豊富
- 必要な機能に合わせてプラグインによる拡張が可能
- レスポンシブ対応
- iframe対応
- 背景画像の遅延読み込み対応
- scriptやcssの遅延読み込み対応(要拡張)
- 画像の幅や高さをアスペクト比から計算(要拡張)
- その他拡張多数
非同期で読み込めるため、最初のレンダリング時間を短くするという目的に適っています。
製作者はhtml5shivを作った方とのことで、信頼性も高いです。
遅延読み込みを初めて使うならlazysizes.jsがおすすめです。
lazyload.js 1.x (jQuery依存)
jQueryプラグインで、通称 jquery.lazyload.js
現在はjQuery非依存の2.x系が公開されており、あえてこちらを使う意味はないので割愛します。
lazyload.js 2.x (同期読み込み)
- jQuery非依存
- 非同期読み込みができない
- シンプルゆえにカスタマイズしやすい
- jQueryオブジェクトから呼び出し可能
- レスポンシブ対応
- 背景画像の遅延読み込み対応
最初のレンダリング時間を短くするという目的から考えると、非同期読み込みができない点は残念です。
しかし、実装がシンプルでわかりやすく、jQueryオブジェクトから呼び出せる点は取り回しが良いです。
javascriptをゴリゴリ書いてカスタマイズしたい玄人にはlazyload.jsがおすすめです。
slick.js, swiper.js, scroll-out.js
slick.jsやswiper.jsといえばスライダーを作るときなどに便利なライブラリですが、標準で画像の遅延読み込みオプションが使えます。
他にも、スクロールエフェクトを付けられるscroll-out.jsでは一手間加えるとlazyloaderとして使えます。
- [jQuery] カルーセルライブラリ slick.js の lazyLoad を理解する
- swiper.jsドキュメント lazy loading
- Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut
まとめ
- 画像の遅延読み込みはユーザーフレンドリーでSEO対策としても有効
- 代替画像や画像の幅や高さ、構造化データなどに気を配る必要がある
- 初めて使うならlazysizes.jsがおすすめ
- カスタマイズして使うならlazyload.js(2.x)がおすすめ
- slick.js、swiper.js、scroll-out.jsなどはlazyloaderとしての機能を持たせられる
- lazyloadはオンデマンドが基本、必要に応じて画像をプリロードしよう。
本当は使い方の解説までいきたかったのですが、長くなりますので今回はここまで。
次のエントリではlazysizes.jsの使い方を取り上げます。