【画像の遅延読み込み】ページの表示速度を向上させるlazyload.jsの使い方【高速化】

画像の遅延読み込みとは

遅延読み込みとは画面内に入ってきた画像のみ（タイミングは調整できます）読み込みます。

それ以外の見えていない画像は読み込み待ち状態となります。

つまり余計な画像を読まないためページの表示速度が速くなります。

デモ

まずは下記のデモを御覧ください。
スクロールするを遅れて画像が読み込まれてるのが確認できるかと思います。

lazyload.js

遅延読み込みを可能にするlazyload.jsというライブラリをご紹介します。

このlazyload.jsはバージョン1.x系と2.x系があるのですがこの記事では2.x系を紹介します。

2.x系の特徴としてjQueryを必要としません。

lazyload GitHub

インストール

以下の方法からインストールしてください。CDN(scriptタグ)、NPM

CDNの場合

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>

NPMの場合

npm i lazyload@2.0.0-rc.2

import 'lazyload';

HTMLを準備

<img src="/path/to/default.jpg" data-src="/path/to/image.jpg" class="lazyload" alt="サンプル">

lazyloadの準備として下記3点を設定します。

• data-src属性を付与し、それに遅延読み込みさせたい画像のパスを記述
• classにlazyloadと設定（※class名は任意）
• src属性にダミー画像のパスを設定

src属性のダミー画像とは遅延読み込み前に表示される画像です。
※src属性に何も設定されていないとw3cのチェックでエラーがでます。

実行

let images = document.querySelectorAll(".lazyload");
lazyload(images);

1. document.querySelectorAllにhtml側で設定したclass名（ここではlazyload）を設定
2. 1をiamges変数に設定（※変数名は任意）
3. imagesを引数に設定しlazyloadを実行

これでlazyloadclassが付与されている画像が画面に入ってくるとdata-srcの画像のパスがsrcにセットされ画像が読み込まれます。

かんたんですね！

オプション

以上でlazyloadの実装方法は終了ですが、オプションがいくつかありますのでその解説をやっていきます。
オプションを設定することで遅延読み込みのタイミングを調整することができます。

オプションは3つあります

以下を例に解説します。

let images = document.querySelectorAll(".lazyload");
lazyload(images, {
  root: document.querySelector('.js-lazyloadArea'),
  rootMargin: "100px 0px",
  threshold: 0.2
});

lazyloadの第2引数にオプション用のオブジェクトを渡してあげることで使用可能です。

root

遅延読み込みを監視する要素
rootで指定した要素に画像が入ってきたときに読み込まれます。

デフォルトはnull
つまり見ている画面のことを指します。

この設定はほとんどの場合変更する必要がありませんが変更する場合はdocument.querySelector()などでで監視したい要素を指定します。今回の例では.js-lazyloadAreaという要素を指定しました。
その後その要素に対してcssでoverflow: scroll;を設定します。
するとその要素内でスクロールすると遅延読み込みを実行することができます。

rootMargin

rootの範囲を拡張できます

デフォルトは"0px"

記述方法はcssのmarginのショートハンドと同じ方法で記述できます。
"100px 0px 50px 0px"
"50px"
など
ただし単位は必須です。

今回の例ではrootMargin: "100px 0px"と設定しています。
つまり上下100pxを拡張しているので遅延読み込みのタイミングが100px早くなります。

個人的おすすめ設定は
"0px 0px 300px 0px"
です！下方向に300px拡張することで画面に入って来る頃には読み込みが終わっているので本来の挙動（遅延読み込み無し）に近くなるからです。（画像を読込中の状態が見えてしまうとおかしいため）

threshold

遅延読み込み対象の画像がrootに何%侵入したかを判定し読み込みを開始

デフォルトは0

記述方法は0から1の間で設定。

例：
0だと少しでもrootに侵入すると読み込み
0.1だと10%rootに侵入すると読み込み
0.５だと50%rootに侵入すると読み込み

これはちょっと分かりづらいですね（笑）
下記に図を用意しましたのでそちらで解説します。

図のrootの設定はnullです

最後に

今回ご紹介したlazyload.jsはIntersectionObserverというAPIを使用しています。
オプションもそれに沿ったものとなっています。興味がある方は調べて見るのもいいかもしれません。

因みlazyload.js実装後と実装前ではPageSpeed Insightsの点数が8点ほど上がりました。