Background-imageの画像をLozad.jsで遅延表示させる方法

Mon, 05 Sep 2022 15:54:04 +0900

Background-imageの画像をLazyload

WEBページの表示の高速化させるために画像を遅延表示させるLazyloadのJSがいろいろありますが、軽量で使いやすいと言われているLozad.jsを使用しています。IMGタグやIFLAMEタグにclass="loazad"を加えれば簡単に使えるのですが、LighthouseなどのベンチマークでCCSのBackground-imageで指定した画像を遅延表示した方がよいとアドバイスを受けることがありました。

Background-imageの画像も遅延表示できる

そもそもBackground-imageで指定した画像を遅延表示できるのか？と疑問に感じていましたが、できることが分かりました。Lozad.jsでできる見たいです。やり方については以下のページを参考にさせていただきました。

参考ページ

https://qiita.com/ChiJ_SeaW/items/40e8d05b8c0c5f920752 https://qiita.com/ChiJ_SeaW/items/40e8d05b8c0c5f920752

https://paralux.co.jp/blog/397 https://paralux.co.jp/blog/397

ソース例

AタグやDIVなど、IMGタグやIFLAMEタグ以外でも、CSSでBackground-imageを設定しているタグにclass="loazad"とstyle="background-image: url();"とdata-background-image="img.jpg"を加えればいいみたいです。

<div class="lozad" style="background-image: url();" data-background-image="img.jpg">

私の場合、class="loazad"を加えるだけでスコアの改善ができました。

Background-Image on qwerty.work

Background-imageの画像をLozad.jsで遅延表示させる方法

Background-imageの画像をLazyload

Background-imageの画像も遅延表示できる

参考ページ

ソース例