ウェブサイトの表示速度を上げるために「画像の遅延表示」を導入することは非常に効果的です。
遅延表示に対応するJavaScriptは多数公開されており、このブログでも［Unveil Lazy Load］や［Layzr.js］などを紹介してきました。
中には、高機能すぎて設定が複雑で、うまく動作せず悩んでしまうものも少なくありません。
今回紹介するのは、シンプルかつ高機能なライブラリ「lazysizes.js」です。
この「lazysizes.js」では、画像や背景画像の遅延表示を簡単に実装でき、Google PageSpeed Insights のスコア向上にも貢献します。
「lazysizes.js」の導入方法
ライブラリの読み込み
まずはlazysizes.jsをGitHubからダウンロードし、HTMLファイルの
内に追加します。<script src="lazysizes.min.js"></script>
遅延表示する画像にクラスを追加
遅延表示させたい画像に「data-src」属性を設定し、「lazyload」クラスを付与します。画像が読み込まれると、自動的に「lazyload」から「lazyloaded」にクラスが変わります。
<img class="lazyload" data-src="example.jpg" alt="サンプル画像">
このとき、いつもなら必須のsrc属性は不要です。
『lazyload.js』によって「data-src」で指定した画像が非同期で読み込まれ、読み込みが終わると「data-src」が「src」に書き換えられ、画像が表示される、という仕組みです。
以上。これだけで基本的な設定が完了で、画像が遅延表示されます。
画像をフェードインで表示させる方法
遅延表示した画像がフェードインで表示されるように、CSSを少し調整します。
次に示すCSSコードでは、遅延表示された画像が3秒でフェードインします。
img.fadein {
opacity: 0;
transition: opacity 3s;
}
img.lazyloaded {
opacity: 1;
}
あらかじめ「opacity:0;」で透明化していたものを、「class="lazyloaded"」に切り替わったタイミングで透明化解除する仕組みです。
簡単ですね。
data-expand属性で表示タイミングを調整
data-expand属性を使用すると、画像が表示されるタイミングを調整できます。例えば、画像が30pxぶん、スクロール領域に入ってから表示させる場合は、次のように記述します。
<img class="lazyload" data-src="example.jpg" data-expand="-30" alt="サンプル画像">
これにより、ユーザーの視界に入る前に画像を読み込むことで、ページのガタつきを軽減できます。
背景画像の遅延
もし、背景画像を遅延表示させたい場合は「lazysizes.js」の『unveilhooksプラグイン』を読み込み、data-bg属性を付与します。
<div class="lazyload" data-bg="example-background.jpg"></div>
この方法で、通常の画像だけでなく背景画像もスムーズに遅延表示できます。
まとめ
「lazysizes.js」は少ない設定で簡単に画像や背景画像の遅延表示を実装できる便利なライブラリです。
軽量で柔軟性があり、Google PageSpeed Insightsのスコア改善にも役立ちます。
ページの読み込み速度を向上させ、閲覧者のストレスを減らす効果があります。ぜひ活用してみてください。
ウェブサイトでお困りのときはオンズにお任せください！
