N.Y.C. Tech Library

ホームページの制作テクニックや日常のハックを綴る

WEB制作

【lazyload】画像の遅延読み込みのメリット・デメリット

投稿日:2018年11月26日 更新日:

画像の遅延読み込みとは

簡単にいうと、画面外にある画像の読み込みを抑制することです。
スクロールしてimg要素が画面内に入ったときにクライアント側でsrc属性を書き換えて読み込みを開始します。
画像の遅延ロードlazyloadなどとも呼ばれます。

WEBページをレンダリングするときにはHTML構造や同期スクリプトが読み込まれて(DOMContentLoaded)、続いて画像や非同期スクリプトなどのファイルが読み込まれます(Load)。

通常はDOMContentLoadedからLoadまでの間に画面外の画像も読み込まれてしまいますが、最初のレンダリングでは不要な通信ですよね。

これを抑制し、スクロールに合わせて読み込むことでユーザーフレンドリーにします。
特に画像の多いサイトや縦に長いランディングページなどでは大変有効な手法です。

メリット

  1. 最初のレンダリングが終わるまでの時間が短くなる
  2. 不要な通信が減るのでユーザーフレンドリー
  3. スピードアップデート以降のSEO対策として有効

画像が多いページの場合、最初のレンダリングが終わるまでの時間が劇的に短くなります。
さらに、Loadをトリガーにした処理が組み込まれている場合は効果てきめんです。
例えばロード画面が閉じるまで2秒後がいいか、4秒後がいいかを考えてみてください。

デメリット

  1. 読み込まれるまでの間は代替画像や空白で表示される
  2. 画像が読み込まれたときに要素の高さが変わり、以降の要素の座標が変わってしまうことがある(※1)
  3. クローラーはスクロールイベントを起こさないため、画像を使ったSEOとは相性が悪い(※2)

※1: width属性、height属性を適切に指定するなどの方法で回避できます。
※2: 構造化データに画像URLを含めることで対策が可能です。

すこし手間ではありますが、対策は可能です。

ライブラリ・プラグイン

lazysizes.js(非同期読み込み)

lazysizes.js

  • jQuery非依存
  • 非同期読み込みができる
  • APIの機能が豊富
  • 必要な機能に合わせてプラグインによる拡張が可能
  • レスポンシブ対応
  • iframe対応
  • 背景画像の遅延読み込み対応
  • scriptやcssの遅延読み込み対応(要拡張)
  • 画像の幅や高さをアスペクト比から計算(要拡張)
  • その他拡張多数

非同期で読み込めるため、最初のレンダリング時間を短くするという目的に適っています。
製作者はhtml5shivを作った方とのことで、信頼性も高いです。
遅延読み込みを初めて使うならlazysizes.jsがおすすめです。

lazyload.js 1.x (jQuery依存)

lazyload.js 1.x

jQueryプラグインで、通称 jquery.lazyload.js
現在はjQuery非依存の2.x系が公開されており、あえてこちらを使う意味はないので割愛します。

lazyload.js 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として使えます。

まとめ

  • 画像の遅延読み込みはユーザーフレンドリーでSEO対策としても有効
  • 代替画像や画像の幅や高さ、構造化データなどに気を配る必要がある
  • 初めて使うならlazysizes.jsがおすすめ
  • カスタマイズして使うならlazyload.js(2.x)がおすすめ
  • slick.js、swiper.js、scroll-out.jsなどはlazyloaderとしての機能を持たせられる
  • lazyloadはオンデマンドが基本、必要に応じて画像をプリロードしよう。

本当は使い方の解説までいきたかったのですが、長くなりますので今回はここまで。
次のエントリではlazysizes.jsの使い方を取り上げます。

-WEB制作
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

svgラインアニメーションを使おう

さて、皆さんsvg使ってますか? 少しとっつきにくいsvgですが、使えると表現の幅が広がります。 今回は、簡単に使えるsvgラインアニメーションをご紹介します。 svgの詳しい仕様についてはW3Cのド …

【lazyload】lazysizes.jsの使い方 – 基本編

javascript 前回は画像の遅延読み込み(lazyload)の概要をご紹介しました。 今回は画像の遅延読み込みを実現するlazysizes.jsの基本的な使い方をご紹介します。 目次 準備npm …

ストロークフォント風アニメーションを作ろう

前回はsvgラインアニメーションをご紹介しました。 今回はsvgアニメーションを使ったストロークフォント風アニメーションです。 See the Pen lineAnimation by vivus-i …