【lazysize】背景画像を遅延読み込みさせる方法

せっかく作ったホームページやWEBサイトなのに読み込みに時間がかかってしまったり読み込まれないなんてことはありませんか？

WEBページで表示速度はとても大事です。

特にECサイトだと表示速度が遅かったりページが遅いだけで売り上げにも影響してしまいます。

ページを少しでも早くする工夫が必要になってきます。

僕がよく使っているのはlazysizeです。

記述も簡単なのでおすすめです。

imgタグの画像を遅延させることだけでなく背景画像も遅延させることができます。

これによって表示速度もだいぶ変わってくると思います。

今回はlazysizeでimgタグや背景画像を遅延させる方法をお伝えしていきます。

遅延させるためのファイルをダウンロードする

まずは遅延させるためには遅延に必要なファイルをダウンロードします。

下記のページ（Github）からダウンロードしましょう。

imgタグを遅延させるならlazysizes.min.jsをダウンロードします。

背景画像を遅延させたい場合は、lazysizes.min.js + ls.unveilhooks.min.jsが必要になります。

「ls.unveilhooks.min.js」は「lazysizes」→「plugins」→「unveilhooks」の中に格納されています。

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

headタグ内やbody内に上記のように記述することでjsの読み込みが可能になります。

<img src="lazy.jpg" data-src="img.jpg" class="lazyload" />

上記の記述で遅延読み込みができるようになります。

srcには最初に表示させたい画像を設定します。

data-srcには本来表示させる画像を設定します。

以上がimgタグの遅延読み込みの方法になります。

背景画像を読み込む場合には先ほどもお伝えしたように「ls.unveilhooks.min.js」が必要になります。

<script src="lazysizes.min.js"></script>
<script src="ls.unveilhooks.min.js"></script>

<div class="lazyload" data-bg="img.jpg">～</div>

背景画像を遅延させたいときはdata-bg属性を使います。

data-bgに読み込みたい画像を設定します。

たったこれだけです！

<div class="bg-img lazyload">～</div>

記述は上記とほとんど変わりません。

属性をいれずクラス名（lazyload）を指定します。

<style>
.bg-img.lazyloaded {
	background-image: url("img.jpg");
}
</style>

遅延後はクラス名がlazyloadからlazyloadedに変わりますので遅延後のクラスに対して背景画像やスタイルを指定します。

画像をたくさん使っていて読み込みの遅いページであればimgタグと背景画像を遅延させることでページの読み込みもだいぶ改善されると思います。

ぜひ使ってみてください。