lozad.jsで画像を遅延ロードさせる方法

みなさんこんにちは！ワトスンです。
今回は、、

といった方のためにlozad.jsの使用方法をご紹介したいと思います。

■読んでほしい人
ページスピード改善を考えている方
「PageSpeed Insights」で画像の重さを指摘されている方

それではさっそくlozadで画像遅延する方法をマスターしていきましょう！

lozadの使い方

具体的にlozad.jsの使い方を解説していきます。

lozad.jsのCDNを読み込む

CDNを読み込まないと使用できないので、headタグ内に下記を記載しておきます。

遅延読み込みさせたい画像にlozadクラス追加、data-src追加

次に、遅延させたい画像のimgタグにクラス名「lozad」とdata-src属性を追加します。

src属性は記載してもしなくてもどちらでも良いですが、画像の読み込みを待っている間ロード画像を設置しておくこともできるので、好みで設置してみてください。
一瞬でdata-srcで指定した画像に切り替わるのであまり意味ないですが、たまに切り替わりが遅い場合があるので、そのような場合に有効かなと思います。

ちなみに、背景画像などに対しても使用できたりするのでlozad.js公式を参考に実践してみてください！

lozad.jsを実行する

最後にlozad.jsを起動させる処理を記載しておきます。

これでlozad.jsの実装が完了です。

一度ページをロードしてみてください。いかがでしょうか？
data-srcに指定した画像がsrcに設定されていることは確認できましたでしょうか？
問題なくsrcに切り替わっていたらOKです！

lozad.jsを知らない方のために解説

そもそもlozad.jsとは何か知らない方のためにざっくり解説しますが、

画像を遅延ロードさせるためのjsライブラリです。

画像を遅延ロードさせることで最初のページ表示時にその画像の読み込みは行わず、その画像以外のページ情報全てがロードされた後に画像をロードさせることで、ページの表示スピードをより速くすることができます。

lozad.jsを使い遅延ロードをマスターしよう！

以上でlozad.jsを使用した画像の遅延ロードの方法をご紹介しました。
いかがだったでしょうか？

比較的簡単に実装でき使いやすいのでぜひマスターして活用してもらえたらなと思います。

ページスピードを改善する方法は他にもあるので色々な方法をマスターし、ページの最適化を行なっていきましょう！