2020.05.29 2020.07.23

画像を遅延読み込み！lazysizes.jsの使い方【プラグイン】

JavaScript

この記事は、最初の投稿から3年以上が経過しています。

最終更新から1366日が経過しています。

「Webサイトの読み込みが遅い」
「PageSpeed Insightsのスコアを上げたい」
「lazysizesの使い方を知りたい」

こういった悩みにお答えします｡

そんなに難しいことはありませんが､HTMLコーディングができるくらいのレベルは必要だと思います｡
WordPressプラグインでしかカスタマイズができない人は難しい内容かもしれません｡

この記事では以下のことがわかります｡

lazysizesの使い方

「lazysizes」のGitHubページは､説明が英語です｡

目次

lazysizesの使い方
まとめ

lazysizesの使い方

設定前準備

設定前に「PageSpeed Insights」でスコアを確認しておきます｡
よっぽど大きい画像を使っている場合でないと速度がわからないと思うので事前に数値を確認しておいたほうがいいです｡

PageSpeed Insights

プラグインを読み込む

CDNからプラグインを読み込みます｡
これをfooterにコピペします｡

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js"></script>

HTMLタグを設定する

遅延読み込みしたいタグに「class='lazyload'」をつけます｡
あと､画像パスを指定する「src」を「data-src」に変更します｡
「src」にはできるだけ容量の小さい仮の画像を入れておきます｡
基本これだけです｡

<img class="lazyload" src="https://hsmt-web.com/wp/wp-content/themes/hsmt-web/images/dummy.png?202006071347" data-src="img/apple.jpg" src="img/dummy.jpg" alt="りんご">

レスポンシブでpictureタグを使う場合は､sourceの「srcset」を「data-srcset」に変更します｡

<picture>
  <source media="(max-width: 575px)" data-srcset="img/apple@575w.jpg">
  <source media="(max-width: 768px)" data-srcset="img/apple@768w.jpg">
  <source media="(max-width: 1200px)" data-srcset="img/apple@1200w.jpg">
  <img class="lazyload" src="https://hsmt-web.com/wp/wp-content/themes/hsmt-web/images/dummy.png?202006071347" data-src="img/apple.jpg" src="img/dummy.jpg" alt="りんご">
</picture>

img(画像)だけでなくiframe(YouTube､Google Map等)にも対応しています｡

<iframe class="lazyload" src="https://hsmt-web.com/wp/wp-content/themes/hsmt-web/images/dummy.png?202006071347" data-src="https://www.youtube.com/embed/●●●" src="img/dummy.jpg">