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

Background-imageの画像をLazyload

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

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

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

参考ページ

Link

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

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

Link

【初心者】lozad.js の簡単実装方法|株式会社paralux - 新しいあり方を創造する

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" data-background-image="img.jpg">

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

PAGETOP