lazysizesで画像を遅延読み込みさせる

Lighthouseでパフォーマンス計測を行った際に画像の遅延読み込みが推奨されていたのでlazysizesを使って遅延読み込みを行うことにした。

対応したサイトではimgタグではなく、css background-imageで画像表示を行っていたので、↓のプラグインを使って遅延読み込みするように対応した。

参考

• Use lazysizes to lazyload images
• 背景画像も遅延読み込み可能。万能Lazyloader、lazysizesの使い方 | WEMO