lazysizesで背景画像をCSSで遅延読み込みするなら本体ファイルだけでOK!

とある案件でPageSpeed Insightsの「オフスクリーン画像の遅延読み込み」が消えないという話がチームから出ていて、中身を見たらCSSに設定したbackground-imageが対象になっていました。

そこでパッと導入ができるlazysizesで対処するように伝えて導入してもらいました。lazysizesは、画像やiframeなどの遅延読み込みを手軽に実現できる有名なJSライブラリです。

GitHub

GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and... High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user i...

成果物を見ると余計なファイルを読み込んでいたので内容をメモ程度に残しておきます。

何が余計だったのか

結論、CSSのbackground-imageで遅延読み込みをするなら本体ファイルだけで実装可能なので、プラグインのls.unveilhooksは不要です。

まずlazysizesの基本は、HTML要素のclassに "lazyload" を付けることから始まります。
そしてlazyloadが付与された要素が画面に入りそうになると"lazyload" が "lazyloaded" に置き換えられます。これが本体ファイルで行われる処理です。

そしてbackground-imageを遅延読み込みする方法は2パターンあります。

Aは以下のような実装です。

<style>
.bg.lazyloaded {
  background: url("画像パス");
}
</style>

<!-- lazyloadがlazyloadedに置き換わる -->
<div class="bg lazyload"></div>

Aは先に説明した通り、HTML要素のclass="lazyload"が "lazyloaded" に置き換わることを考慮した実装で、今回の対応はこれで行われていました。
CSSで処理がまとめられるため、個人的にこちらの方が好みです。

Bの場合はdata-bg="画像パス"を処理するためにls.unveilhooksプラグインが必要になります。

<!-- ls.unveilhooksプラグインが必要 -->
<div class="lazyload" data-bg="画像パス"></div>

Aパターンで実装しているのに、BパターンのJSファイルを読み込んでいたのが余計な部分という細かい話です。

まとめ

JSファイルをCDN経由で読み込んでいたので「読み込むファイルの容量は小さいけど、アクセス回数は増えるのでこれもSEOに関わるよ？」ということでお話をしました。（npmで入れてbuildすればよかったじゃん…と思いつつ）

background-imageの遅延読み込みが必須とまでは思いませんが、lazysizesなら導入は簡単なので困ったら入れるべきかなと思います。iframeとかにも対応できますし、入れてて困ることはないライブラリです。

See the Pen Sample lazysizes by hakoirioyaji (@hakoirioyaji) on CodePen.