ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

Webサイトを高速化!lazysizes.jsの使い方【遅延読み込み】

Webサイトを高速化!lazysizes.jsの使い方【遅延読み込み】

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

悩み

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

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

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

  • lazysizesの使い方

lazysizes」のGitHubページは、説明が英語です。

目次
  1. lazysizesの使い方
    1. 設定前準備
    2. プラグインを読み込む
    3. HTMLタグを設定する
    4. 確認する
      1. Developer Tools
      2. PageSpeed Insights
  2. まとめ

lazysizesの使い方

設定前準備

設定前に「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">

確認する

lazysizesを設定しても、画面に現れる直前に読み込まれるので、遅延読み込みができているのかイマイチ実感できません。
なので、「Developer Tools」と「PageSpeed Insights」で設定できているか確認します。

Developer Tools

Google Chromeの「Developer Tools」で確認します。
「Elements」タブと「Network」タブで確認できます。

「Elements」タブでclass名に「lazyload」をつけた画像のタグを確認します。

  1. ブラウザをスクロールしていく。
    (このときは、class='lazyload')
  2. 画像が現れる直前でclass='lazyloading'に変わります。
    (よほど大きい画像でなければごく一瞬です)
  3. 読み込み完了するとclass='lazyloaded'になります。

「Network」タブで読み込まれる外部ファイルを確認します。

  1. ブラウザを再読み込みします。
  2. 確認したい画像ファイル名が読み込まれないことを確認します。
  3. ブラウザをスクロールしていく。
  4. 画像が画面に見える直前に、画像ファイル名が表示されます。

PageSpeed Insights

「PageSpeed Insights」でもう一度スコアを確認します。
事前に確認しておいたスコアと比較してスコアが上がっていたら成功です。

POINT
PageSpeed Insightsのスコアは、ネット環境や時間帯で変わってきます。
一桁くらいの誤差はあるので、10以上、改善していたら成功していると思っていいです。

このサイトのトップページブログ一覧ページで使用しています。

まとめ

lazysizesの使い方を紹介しました。

Web制作やブログ投稿で画像の読み込みが遅い問題は忘れられがちです。
画像遅延読み込みをすることでSEOにも好影響があるので、積極的に対応していくことが必要です。

Web制作を効率化したい!よく使うおすすめJavaScript、jQueryプラグイン、ライブラリ 9選

Web制作を効率化したいですか?この記事では、Web制作でよく使うスライダー、スクロールエフェクト、モーダルウィンドウ、郵便番号から住所を自動入力などに便利なJavaScript、jQueryのプラグイン、ライブラリを紹介しています。ぜひご覧ください。