【Web表示高速化】JavaScriptを使ったLazyLoadの方法

2023/04/23 2022/01/16

はじめに

前回ネイティブlazy-lode（loading=”lazy”）の使用方法について記事を書きましたが、適用範囲に制限があることが分かりました。

ネイティブlazy-lodeで遅延読み込みが出来ない部分はJavaScriptを使って改善する必要があるのですが、この使用方法について勉強したことを記事にまとめてみました。

LazyLoad（遅延読み込み）は、JavaScriptのscrollイベントで要素の位置を取得して実施されることが多く、SEO上不利になる可能性があると言われてました。

しかし、2019年5月よりGooglebotがIntersection Observerによる遅延読み込みをサポートすることになったので、SEO上の問題は解消されてます。

初心者には導入が難しいかも知れませんが、興味を持った方は仕組みだけでも知っておくと後で役に立つかも知れません。

最初にGoogleが推奨しているIntersection Observerを使った遅延読み込みの方法について説明します。

なおIntersection Observerの動作は、下記記事を読むと理解が深まると思います。

JSでのスクロール連動エフェクトにはIntersection Observerが便利

ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト本記事ではIntersection Observer APIの使い方、実践例、そしてIE11への対応方法を解説します。特定の位置で発火する従来の手法これまで、特定の位置で発火するイベントにはscrollイベントを使う必要がありました。

Intersection Observerでの遅延ロード

マークアップの作業は4つです。

①Intersection ObserverのScriptタグを設定

②imgタグに遅延読み込みのクラスを設定する

③data-src属性に遅延読み込み画像を指定する

④src属性にダミー画像を指定する

wev.devとdot blogさんからお借りしたコードを参考に埋め込んでおくので、試行してみて下さい。

Intersection ObserverのScriptタグを</body>の前に設定

コード

<!-- </body>の前に追加 -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    }, {
        rootMargin:"0px 0px 256px 0px", // 画像をビューポートに入る256px手前で読み込む
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});
</script>

imgタグのHTML

コード

<img class="lazy" data-src="遅延読み込みする画像" src="ダミー画像" alt="画像の説明">

詳細は下記で説明されているの、もっと知りたい方は参考にご覧下さい。

Google推奨のSEO対応IntersectionObserverで画像の遅延読み込み｜dot blog

次に遅延読み込み専用のJavaScriptライブラリを使ったLazyLodeの方法を説明します。

JavaScriptライブラリによるLazyLoadの方法

下記6つのJavaScriptライブラリの内、lazysizesはIntersection Observer API（交差監視API）は標準で使用しておらずgetBoundingClientRect()を使ってます。

LazyLoadのライブラリ

Githubで公開されているLazyLoadのライブラリをいくつか紹介します。

・lazysizez …Alexander Farkas氏が2014年10月にリリース

・lazylode …Mika Tuupola氏が2017年9月にリリース

・lozad …Apoorv Saxena氏が2017年9月にリリース

・yall …Jeremy Wagnerが2017年9月にリリース

・vanilla-lazyload …Andrea Verlicchi氏が2019年2月にリリース

・defer …Shin氏が2019年3月にリリース

なお、Mika Tuupola氏は2011年にjQueryのプラグインとしてlazylodeをリリースされていて、これがLazyLodeの本家本元となります。

lazysizesでIntersection Observerを使用する場合は自分で実装するか、lazysizes-intersection.jsが提供されてますので、こちらをご使用下さい。

但し、Alexander Farkas氏は、Intersection Observerで必ずしもパフォーマンスが上がるとは限らないと主張しており、Intersection Observerの使用は積極的でないようです。

いろんな種類のLazyLoadがあり、どれを使うのがベストなのか迷いますが、使い易いと感じたものを導入すれば良いと思います。

ちなみに管理人はdeferを使用してます。理由はBloggerで使用しているテンプレート：JetThemeがdeferを標準装備しているからです。

LazyLoadの使用方法

マークアップの作業は4つです。

①LazyLoadのScriptタグを設定

②imgタグに遅延読み込みのクラスを設定する

③data-src属性に遅延読み込み画像を指定する

④src属性にダミー画像を指定する

LazyLoadのScriptタグを</body＞の前に設定

コード

<!-- </body>の前に追加 -->
<script src="https://cdn.jsdelivr.net/npm/遅延読み込みのjs"></script>
<script> lazyload(); </script> //lazyload.jsを使用する場合のみ追加

imgタグのHTML

コード

<img class="遅延読み込みのクラス" data-src="遅延読み込みする画像" src="ダミー画像" alt="画像の説明">

LazyLoadライブラリのCDNからの読み込み

CDNから読み込む場合は、下記よりご利用下さい。なおyallはCDNを見つけることが出来なかったので適当なサーバに保存するか、<body>に直接埋め込んで下さい。

（注）JetThemeはdefer導入済なので設定は不要です。

遅延読み込みのクラスの指定

　各ライブラリが指定するクラスをご使用下さい。

　class="lazylode" …lazysizes、lazylode、defer

　class="lazy" … yall、vanilla-lazyload

　class="lozad" …lozad

LazyLodeのTips

Webで検索していたらLazyLodeに関するいろんなテニックを見つけました。困った時に対応できる便利な方法について、いくつかリンクを貼っておきます。

ネイティブの遅延読み込みをサポートしていないブラウザでは遅延読み込みのJavaScriptを読込み、ネイティブの遅延読み込みをサポートしているブラウザでは、JavaScriptを読み込まずネイティブの遅延読み込みを使用する方法です。

画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法

いちいち遅延読み込みのクラスを追加せず、imgタグすべてを遅延読み込みの対象にする方法です。

【サイト高速化】Lazy Load（画像の遅延読み込み）の導入方法 - Qiita

こちらは結城永人さんが作られたBloggerの記事／追加ページの投稿画像にloading-lazyを自動的に付ける方法です。

Bloggerの記事／追加ページの投稿画像にloading-lazyを自動的に付けるプログラム

こちらはsutajpさんが作られたBloggerの記事内の投稿画像に自動でloading-lazyを付ける方法です。

【Blogger】自動で記事内の画像にloading="lazy"を付ける【JavaScript】

Lazyloadについて6パターンのパフォーマンスを検証した記事です。

レスポンシブ画像で発生するCLSの問題の対応方法です。

レスポンシブサイトでlazysizesを使い画像遅延読み込みをした時のCore Web Vitals CLS対策 - ノンカフェインであなたにやさしい

まとめ

JavaScriptを使ったLazyLoadのライブラリはマークアップの作業が少々面倒なものの、使いこなせると大変便利なものであると確認できました。

LazyLoadはimg以外の要素（picture、iframe、video等）も遅延読み込みできます。

ネイティブlazy-lodeではYouTubeの動画をたくさん埋め込んだ場合、遅延読み込みの効果はあまり期待できないのですが、LazyLoadのライブラリを使用すると、パフォーマンスが著しく低下することを回避できます。

ちなみに、下記記事はYouTubeのライブ配信動画を無謀にも80個以上埋め込んでますが、最低でも65以上のパフォーマンスを維持してます。

気になる場所はYouTubeのライブ配信で確認しよう！ - after work lab

なお、ネイティブlazy-lodeはJavaScript不要で動作するので、初心者は原則こちらを導入されることをおススメします。使用方法については下記記事をご覧ください。

【必見】loading=”lazy”の正しい使い方 - after work lab

気軽に足跡残してね！

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

ツイッターで♡いいねする

https://t.co/dy7tAEJjQI

JavaScriptを使ったLazyLoadの方法について勉強したことを記事にまとめて見ました。

遅延読み込みに興味を持っている方は参考にしてみて下さい。#JavaScript #LazyLoad #遅延読み込み #JetTheme
— heavy-peat (@AfterWork_Lab) January 16, 2022