オフスクリーン画像の遅延読み込み対策は、Lazyloader「lazysizes」がおすすめ!

サイトの表示速度高速化が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>

どちらを使っても結果はほぼ変わらないので、使いやすい方を使えばいいでしょう。

というわけで、オフスクリーン画像の読み込み遅延が改善できなくて悩んでいる方は、参考にしてみてください。

よかったらシェアしてね!
目次
閉じる