Background-imageの画像をLazyload
WEBページの表示の高速化させるために画像を遅延表示させるLazyloadのJSがいろいろありますが、軽量で使いやすいと言われているLozad.jsを使用しています。IMGタグやIFLAMEタグにclass="loazad"を加えれば簡単に使えるのですが、LighthouseなどのベンチマークでCCSのBackground-imageで指定した画像を遅延表示した方がよいとアドバイスを受けることがありました。
Background-imageの画像も遅延表示できる
そもそもBackground-imageで指定した画像を遅延表示できるのか？と疑問に感じていましたが、できることが分かりました。Lozad.jsでできる見たいです。やり方については以下のページを参考にさせていただきました。
参考ページ
ソース例
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"を加えるだけでスコアの改善ができました。