サイトの表示速度高速化がSEO対策になるようになってから、PageSpeed Insights でサイトの表示速度を計測した方は少なくないでしょう。
私も表示速度が遅いのは気になるので、できる限り早くしようと色々試してみたのですが、「オフスクリーン画像の遅延読み込み」を実行しろと言われるように。
そこで遅延読み込み用のLazyloaderをいくつか試したのですが、「lazysizes」が良かったので紹介したいと思います。
開発中のテーマ「Compages」には lazysizes が組み込まれており、表示する画像の大半は遅延読み込みするようになっています。
ダウンロードと読み込み方法
まず最初に必要なファイルをダウンロードする必要がありますので、Github からダウンロードしましょう。
基本となるファイルは lazysizes.min.js ですが、背景画像も遅延読込したい場合はpluginsフォルダに入っている ls.unveilhooks.min.js も一緒にダウンロードしておきましょう。
<script src="lazysizes.min.js"></script>
<script src="ls.unveilhooks.min.js"></script>こんな感じで読み込んでおけばOK。
async属性やdefer属性は好みで構いません。
プラグインをまとめて管理している場合は、pluginフォルダの中にlazysizes-gh-pagesフォルダを作って、その中にjsファイルを入れましょう。
LICENSEやREADMEも一緒に入れておくと使いやすいです。
遅延読み込みの方法
lazysizes で遅延読み込みをするのは非常に簡単で、
<!-- 通常の記述方法 -->
<img src="images.jpg" alt="">
<!-- lazysizesを使うときの記述方法 -->
<img class="lazyload" data-src="images.jpg" alt="">
<!-- ダミー画像を使用する場合の記述方法 -->
<img src="dammy.jpg" class="lazyload" data-src="images.jpg" alt="">src を data-src に変更し、class=”lazyload” をつけてやるだけです。
src が空の状態はちょっと……という場合には、縦横1pxのダミー画像を作って配置しておけば問題ありません。
背景画像の遅延読み込み
背景画像の読み込みをするのも簡単で、
<div class="lazyload" data-bg="bg-images.jpg">
<!-- ここに中身 -->
</div>class=”lazyload” をつけて、data-bgに表示させたい画像ファイルのパスを記述するだけ。
ですが背景画像で使う方法はもう1種類あって、 画像が読み込まれると lazyload が lazyloaded に変化することを利用し、CSSに記述する方法もあります。
<style>
.bg-img.lazyloaded{
background-image: url("bg-images.jpg");
}
</style>
<div class="bg-img lazyload">
<!-- ここに中身 -->
</div>どちらを使っても結果はほぼ変わらないので、使いやすい方を使えばいいでしょう。
というわけで、オフスクリーン画像の読み込み遅延が改善できなくて悩んでいる方は、参考にしてみてください。