【初心者】Lozad.jsを使って画像の遅延ロードを実装してみた

##はじめに
どんどん新しいことをやっていかないといけないこの状況で、全然頭が追い付いていない今日この頃…。そんな中、Lozad.jsを使って遅延ロードが出来るようにすることになったので、その時の内容をメモ。

##遅延読込／遅延ロード
Wikipediaによると、

#####「実際にオブジェクトが必要とされたときに後から初期化を行うソフトウェアデザインパターンの一つである」

とのことです。つまり、画面に表示されるエリアになったら内容を読み込んでくださいよ！ってことです。こうすることでサイト全体を読み込むスピードを速くして、ユーザにストレスなく使用してもらおうってことみたいです。

ちょっと話はそれますが、表示スピードはWebサイトにしても何にしても”サクサク動く”ことが求められますよね。実際、人間が「遅いな～」と感じ始めるのは2～3秒くらいのようです。数字にするとそれほど遅くないように聞こえますが、実際にやってみると確かに遅く感じてしまいます。（体感って当てにならない…。）せっかちさんでもサクサク動いているな～って感じるためには見えないところでの努力が必要なんですね。ってことで本題に戻ります。

##Lozad.jsとは
Lozad.jsは遅延ロードを行うためのライブラリになります。

Lozad.js公式サイト：https://apoorv.pro/lozad.js/
（デモページ：https://apoorv.pro/lozad.js/demo）

何が良いかというと、

　・jQuery を必要とせず単独で動作する
　・Lazy load （遅延読込）ライブラリの中では比較的軽量（らしい）

と言われています。日本語でググってもいくつか使い方の記事が引っかかるので、みなさん実際に使われているのでしょうか。jQueryのプラグインにも遅延ロードはありますが（Lazy Load）、現在どちらが多く採用されているかは不明でした。

##さっそくLozad.jsを使って実装しよう！
####1.Lozad.jsのCDNを読み込む
Lozad.jsを使えるようにするためには、まずCDNを読み込む記載をする必要があります。
下記一文をbodyの閉じタグの直後に記載することで利用することが出来るようになります。

</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

####2.さらに続けて、2行分の処理を追記する

<script>
const observer = lozad();
observer.observe();
</script>

####3.遅延ロードさせたいimgタグにclass="lozad"を追加する
画像がたくさんあるページだと大変ですが、imgタグにclass="lozad"を追加していきます。

<div>
  <h1>sample</h1>
    <img class="lozad" src="img/sample.png" alt="サンプル画像" width="380px" height="310px">
</div>

####4.imgタグのsrcを空にし、data-srcを追記する
遅延ロードを行う場合、imgタグのsrcには画像の保存先は基本記載しないでおきます。
その代わり、data-srcに画像の保存先を記載しておくことで、実際に画面に表示されるときにdata-srcから画像を読み込んでsrcに保存先を追記＝画面に表示するような動作になります。

ただ、最初からimgタグのsrcに画像の保存先を記載しておく場合もあります。どういう時に使用するかというと、何らかの理由で遅延ロードが画面表示に間に合わなかった場合、srcに画像URLが書かれていないとその部分がまっさらになってしまうのを防ぐことが出来ます。ただ、そういう事象が発生したとしても一瞬見えるか見えないか・・くらいしか活用されないので、スピード重視であればsrcへの記載はしないでおくのが良いのかな…と個人的には思います。

<div>
  <h1>sample</h1>
    <img class="lozad" src="" data-src="img/sample.png" alt="サンプル画像" width="380px" height="310px">
</div>

##background-imgも遅延ロード出来ます！
background-imgの場合は、imgタグの時と同じようにclass="lozad"を追記します。
その後、data-background-imageに背景画像の保存先を記載します。これで完了です！簡単！

<div class="lozad" data-background-image="img/bg-sample.jpg">
  <h1>sample</h1>
  <img class="lozad" src="" data-src="img/sample.png" alt="サンプル画像" width="380px" height="310px">
</div>

もし、HTMLに直接styleでbackground-imageを記載している箇所がある場合は、styleに記載されていたurlを空にし、urlに記載されていた内容はdata-background-imageに記載することで遅延ロードの動きを実現することが出来ます。

<div class="lozad" data-background-image="img/bg-sample.jpg">
  <h1>sample</h1>
  <img class="lozad" src="" data-src="img/sample.png" alt="サンプル画像" width="380px" height="310px">
  <ul>
    <li class="lozad" data-background-image="img/sample1.png" style="background-image: url();"></li>
    <li class="lozad" data-background-image="img/sample2.png" style="background-image: url();"></li>
    <li class="lozad" data-background-image="img/sample3.png" style="background-image: url();"></li>
    <li class="lozad" data-background-image="img/sample4.png" style="background-image: url();"></li>
    <li class="lozad" data-background-image="img/sample5.png" style="background-image: url();"></li>
 </ul>
</div>

##まとめ
今回は画像に特化してまとめましたが、iframeやjavascriptも画像と同じ要領で遅延ロードできるそうです。正直、実際にサイトを閲覧しているユーザにとっては遅延ロードされているかどうかはあまり関係なく、また気付かないと思いますが、こうやっていろいろな工夫を凝らしながらサービス提供を考えられる思考回路でいたいと思いました。

毎日勉強！頭がパンクしてますけども、明日もがんばります。