Web制作

lazysizesを使って画像を遅延読み込みする

1 画像の遅延読み込み
2 lazysizesとは？
3 lazysizesの使い方
- 3.1 ライブラリを読み込ませる
- 3.2 imgタグの属性を変更する
4 背景画像の遅延読み込みに対応させる
5 レスポンシブイメージに対応させる
6 まとめ

画像の遅延読み込み

通常Webページは読み込む時に画像をすべてダウンロードしてからページが表示されます。まだ画面の領域に入っていない隠れている部分も含めて画像がどれだけあろうが全ての画像を読み込んでしまいます。そうすると当然、ページのリクエストや転送量が増えてページ表示まで時間がかかりユーザーを待たせることになります。これを改善するのが「画像の遅延読み込み」です。画面をスクロールして表示領域に入った画像だけを読み込ませることで、必要なタイミングで必要な分だけ画像が表示されるので無駄な読み込みが発生せずにページが軽くなります。

画像の多いサイトでページの高速化に取り組む時に最も効果が出やすい手法です。

lazysizesとは？

・jQueryに依存しない
・classなどhtmlタグに直接属性などをを付けるだけで余計なオプションが少ない
・簡単にカスタマイズできる拡張プラグインも豊富

ダウンロードはこちら

lazysizesの使い方

ライブラリを読み込ませる

ファイルをダウンロードしてlazysizes.min.jsを読み込ませる。

<script src="assets/js/lazysizes.min.js"></script>

CDNを読み込ませる場合

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js"></script>

imgタグの属性を変更する

遅延読み込みを適用したい画像の<img>タグのclassにlazyloadを、src属性にはダミー画像を、data-src属性に表示させる画像を設定します。

<img
class="lazyload"
src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7"
data-src="assets/images/lazyload.png"
alt="">

ここでダミーに使っているdata:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7というURLはbase64というデータ形式で1×1pxの透過gif画像を直接HTMLに文字列で埋め込んでいます。これなら外部ファイルとしてリクエストは発生しませんし、容量も最小限で済みます。ダミーは自分で用意したものでも構いませんが、サイズが大きくなると遅延読み込みが無意味になるのでご注意ください。

ダミーについてはこちらから持ってきました。

ちなみにiframeの場合は、ダミー画像が必要ないです。

<iframe class="lazyload" data-src="GoogleMapなど表示させたいURL"></iframe>

背景画像の遅延読み込みに対応させる

//lazysizesを読み込む
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js"></script>
//ライブラリの直後にプラグインを読み込ませる
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/plugins/unveilhooks/ls.unveilhooks.min.js">

Githubからダウンロードした場合はplugins/unveilhooksディレクトリ内のls.unveilhooks.min.jsをコピーして使えばOKです。

<!-- 背景 -->
<div class="lazyload" data-bg="bg.jpg"></div>

<!-- JSなどのscriptタグ -->
<div class="lazyload" data-script="module-name.js"></div>

<!--CSSタグなどのlinkタグ -->
<div class="lazyload" data-link="my-style.css"></div>

<!-- videoタグ -->
<video class="lazyload" data-poster="poster.jpg" preload="none"></video>

<!-- CSSとJS -->
<div class="lazyload" data-script="my-script.js" data-link="my-style.css"></div>

レスポンシブイメージに対応させる

スマホとPCなどデバイスに合わせて最適な画像を出し分ける手法ですね。
<picture>要素を使いメディアクエリで出し分けるのが最近の主流だと思いますが、そちらにも対応しているのがlazysizesの特徴でもあります。

<picture>
<source
media="(min-width:1440px)"
data-srcset="assets/images/lazy-pc@2x.jpg">
<source
media="(min-width:768px)"
data-srcset="assets/images/lazy-pc.jpg 1x, assets/images/lazy-pc@2x.jpg 2x">
<img
class="lazyload"
src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7"
data-src="assets/images/lazy-sp.jpg"
alt="">
</picture>

imgタグは通常と同じように変更します。
あとはpicture要素で画像を出し分ける時に使うsourceタグのsrcset属性をdata-srcsetに変えてやるだけでOKです。