サイトが重いときに！画像をふわっと遅延表示させる「lazysizes.js」【レスポンシブ対応】【PageSpeed Insights改善】

Webサイトの表示速度を上げられるよう、スクロールをしたタイミングで画像を読み込む「画像の遅延表示」ができるJavaScriptはいくつかあると思います。私も試したことはありますが、画像がパッと出てきて画面がガタついたり、jQueryをいじらないとカスタムしにくかったりと、思った通りの動きをせず悩んでいました。

そんななか見つけた「lazysizes.js」は、「JavaScriptの読み込み」と「クラスの追加」だけで遅延表示ができ、簡単なcssの追記でフェードインでの表示もおこなうことができます。しかも背景画像の遅延表示も可能です！

ある案件でGoogleのページ読み込み速度を評価するPageSpeed Insightsにて赤点（Low）だったのですが、導入後見事に脱却しました。

画像の遅延表示「lazysizes.js」導入の流れ

1. ファイルを読み込む
2. クラスをつける
3. フェードインで表示するようにアレンジ
4. レスポンシブ対応
5. 背景画像の遅延
6. iframeにも対応可

デモページ

demo

画像についているクラス「lazyload」が「lazyloaded」に変わると遅延表示されています。
見ただけではわかりにくいので、検証ツールなどをつかってみてください。

公式サイトのデモページもあります。
http://afarkas.github.io/lazysizes/#examples

画像の遅延表示「lazysizes.js」導入の流れ

１. ファイルを読み込む

GitHubからファイルをダウンロードし、HTMLファイルのhead内に「lazysizes.js」または「lazysizes.min.js」を読み込ませます。
https://github.com/aFarkas/lazysizes

２. クラスをつける

遅延させたいイメージを”data-src”で読み込み、“lazyload”というクラスをつけます。

読み込まれると、クラス名が”lazyload”から”lazyloaded”自動で変わります。
軽量化だけでしたらこれで終わりです。

３. フェードインで表示するようにアレンジ

フェードインで表示させたい場合、lazyloadのクラスに対してopacityをかけます。
以下では3秒にしています。

HTML

CSS

３-１. フェードインするタイミングの指定

data-expand属性を使えば、画像からの距離を指定してフェードインさせることも可能です。
例えば、写真がある領域に20px入ってから表示させたい場合、data-expand=”-20″と書きます。

レスポンシブ対応

画面の幅に応じて画像をだし分けることもできます。

これまでは、PC用とSP用の2種類をどちらも読み込ませて、画面幅によって表示と非表示を分けていた方いるかと思います。ですが、lazysizes.jsでは画面幅に沿った画像のみ読み込まれるため、より効率的にWebページを表示できるのではないでしょうか。

例として、横幅が500px以下のときは「500.png」、700px以下のときは「700.png」、900pxから「900px」が表示されるようにしています。

背景画像の遅延

もし、背景画像を遅延表示させたい場合は、
「plugins」>「unveilhooks」内にあるファイル「ls.unveilhooks.js」を読み込み、”data-bg”という属性をつけます。

iframeにも対応可

YouTubeなどのiframeにも“lazyload”というクラスをつけるだけです。

■参考サイト
lazySizes