Lazy Loadで画像を遅延ロードする方法

大量の画像を含むWebページは、一般に表示速度が遅くなりがちです。
imgタグを使って、普通に実装すると次のような現象が起きてしまいます。

  • 画像の読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る
  • ネットワークやサーバーの負荷が瞬間的にひっ迫する
  • PageSpeed Insightsで低スコアになる

これだと、サイト利用者にとっても、サーバー側にとっても、いいことはないですね。
対処方法として、スプライト画像を使うとか、CDNを使うとか、Expiresヘッダを設定するとか様々な方法がありますが、Webフロント側でお手軽にできる対策が画像を遅延ロードできるJavaScriptライブラリ「Lazy Load」の導入です。

今回は、Lazy Load で画像を遅延ロードする方法を解説します。

画像の遅延ロードって何?

ブラウザは通常、HTMLに含まれるimgタグの画像ファイルを実直にすべて読み込みます。実直に読み込むということは、どんなに長いページでも、ユーザーがほとんど閲覧しない下部の画像でも、読み込んでしまうということです。ほとんど閲覧されないのに、必ず画像を読み込むのはネットワーク的にも無駄ですよね。

そこで、画像の遅延ロードの登場です。

画像の遅延ロードは、ユーザーのブラウザ画面に画像がそろそろ表示されそうな位置に来たら、その時になってネットワークから画像をロードするという仕組みのことです。

画面のスクロール位置に応じて「必要な分だけ画像を取得」するので、とても効率的です。

Lazy Loadの使い方

Lazy LoadはGitHubで公開されています。

https://github.com/tuupola/lazyload

Lazy Loadを導入する手順は、以下の3ステップです。

scriptタグを配置する

まず、loadload.jsを読み込むscriptタグを記載します。

場所はhead内でも、body内でもOKです。

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

imgタグを記述する

imgタグの書き方には注意が必要です。
デフォルトで動作する標準の書き方は以下の通り。

<img class="lazyload" width="765" height="574" data-src="img/example.jpg" />
  • class=”lazyload”を追加
  • src属性ではなく、data-src属性で画像パスを指定する

また、後述しますが、width属性やheight属性、もしくはそれに相当するCSSを書いておくとよいです。

lazyload()関数を呼び出す

最後に、lazyload()関数を必ず呼び出します。
タイミングは、bodyの最後もしくはDOMContentLoadedイベント時とかで良いです。

<script>
    lazyload();
</script>

対象の要素を指定したい場合は、引数で指定もできます。

<script>
    lazyload(document.querySelectorAll("ul.many-images li img"));
</script>

jQueryを使う場合は、jQuery.lazyload()関数を呼び出します。
具体的には、bodyの末尾に以下を書いておけば、標準の書き方で書いたimgが遅延ロードされます。

<script>
    $("img.lazyload").lazyload();
</script>

サンプル

LazyLoadのサンプルです。

See the Pen lazyload by EGASHIRA, Shintaro (@symm_egashira) on CodePen.

動作確認方法

遅延ロードが正しく動作しているかを確認するには、ブラウザのDeveloper Toolでネットワークをチェックします。

ページをスクロールするにしたがって、読み込まれる画像が増えていけば成功です。

よくある問題

Lazy Loadが動かないというトラブルをよく耳にするので、原因と対策をまとめました。

1.画像が永遠に読み込まれない

lazyload関数を呼び出していないか、もしくはlazyload関数を呼び出しているタイミングが早すぎます。
<body>の末尾でlazyload関数を呼び出すか、jQueryの場合は次のようにと書きます。

$(function() {
  $("img.lazyload").lazyload();
}); 

2.すぐに画像が読み込まれてしまう

data-src属性ではなく、src属性で画像を指定している場合にそうなります。
また、画像ファイルの読み込み前に、ブラウザが画像の大きさを認識できるよう、CSSのmin-heightプロパティやimgタグでwidth/height属性を指定しておきましょう。

ブラウザ側でのネイティブサポート

Chromeではloading属性をサポートしており、画像の遅延ロードをブラウザがネイティブでサポートしています。

以下のように loading=”lazy” を書いておくと、ブラウザによって適切なタイミングでロードされます。

<img loading="lazy" src="img/example.jpg" width="765" height="574" />

ただし、現時点ではloading属性はChromeしかサポートしていません。
https://caniuse.com/#feat=loading-lazy-attr

まだまだライブラリの力を借りる必要がありそうです。

まとめ

以上、Lazy Load の使い方を説明しました。
スマホサイトはページが長いので、読み込む必要のない画像が特に多く出現します。
SNSでシェアされるキャンペーンページとかは対策しておいた方がよいでしょう。
遅延ロードはSEO上のメリットもあるので、ぜひ使ってみてください。