lozad.jsで画像を遅延ロードさせる方法
みなさんこんにちは！ワトスンです。
今回は、、
といった方のためにlozad.jsの使用方法をご紹介したいと思います。
■読んでほしい人
ページスピード改善を考えている方
「PageSpeed Insights」で画像の重さを指摘されている方
それではさっそくlozadで画像遅延する方法をマスターしていきましょう！
目次
lozadの使い方
具体的にlozad.jsの使い方を解説していきます。
lozad.jsのCDNを読み込む
CDNを読み込まないと使用できないので、headタグ内に下記を記載しておきます。
|
1 |
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script> |
遅延読み込みさせたい画像にlozadクラス追加、data-src追加
次に、遅延させたい画像のimgタグにクラス名「lozad」とdata-src属性を追加します。
|
1 |
<img class="lozad" src="" data-src="image.png"> |
src属性は記載してもしなくてもどちらでも良いですが、画像の読み込みを待っている間ロード画像を設置しておくこともできるので、好みで設置してみてください。
一瞬でdata-srcで指定した画像に切り替わるのであまり意味ないですが、たまに切り替わりが遅い場合があるので、そのような場合に有効かなと思います。
ちなみに、背景画像などに対しても使用できたりするのでlozad.js公式を参考に実践してみてください！
lozad.jsを実行する
最後にlozad.jsを起動させる処理を記載しておきます。
|
1 2 3 4 |
<script> const observer = lozad(); observer.observe(); </script> |
これでlozad.jsの実装が完了です。
一度ページをロードしてみてください。いかがでしょうか？
data-srcに指定した画像がsrcに設定されていることは確認できましたでしょうか？
問題なくsrcに切り替わっていたらOKです！
lozad.jsを知らない方のために解説
そもそもlozad.jsとは何か知らない方のためにざっくり解説しますが、
画像を遅延ロードさせるためのjsライブラリです。
画像を遅延ロードさせることで最初のページ表示時にその画像の読み込みは行わず、その画像以外のページ情報全てがロードされた後に画像をロードさせることで、ページの表示スピードをより速くすることができます。
lozad.jsを使い遅延ロードをマスターしよう！
以上でlozad.jsを使用した画像の遅延ロードの方法をご紹介しました。
いかがだったでしょうか？
比較的簡単に実装でき使いやすいのでぜひマスターして活用してもらえたらなと思います。
ページスピードを改善する方法は他にもあるので色々な方法をマスターし、ページの最適化を行なっていきましょう！
