vier

Let's be more curious.

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

JavaScriptを使ったLazyLoadの方法

はじめに

前回ネイティブ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が便利

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="画像の説明">


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

Lazy-loading images

Lazy-loading images

This post explains lazy-loading and the options available to you when lazy-loading images.


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

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

SEO対応に有効な画像の遅延読み込み。様々なLazyLoadのやり方がありますが、今回はGoogleが推奨しているIntersectionObserverを利用した画像の遅延読み込みの解説です。もちろんGooglebotにも対応していますので安心して利用できます。


次に遅延読み込み専用の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>に直接埋め込んで下さい。


・lazysizes

    https://cdnjs.com/libraries/lazysizes

    https://www.jsdelivr.com/package/npm/lazysizes

・lazyload

    https://cdnjs.com/libraries/lazyload

    https://www.jsdelivr.com/package/npm/lazyload

・vanilla-lazyload

    https://cdnjs.com/libraries/vanilla-lazyload

    https://www.jsdelivr.com/package/npm/vanilla-lazyload

・lozad

    https://cdnjs.com/libraries/lozad.js

    https://www.jsdelivr.com/package/npm/lozad

・defer

    https://www.jsdelivr.com/package/npm/@shinsenter/defer.js

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


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

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

 class="lazylode"   …lazysizes、lazylode、defer

 class="lazy"        … yall、vanilla-lazyload 

 class="lozad"       …lozad 


LazyLodeのTips

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


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

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

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

...


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

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

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

前提 本記事ではJavaScriptライブラリ(vanilla-lazyload)を利用して、画像の遅延読み込みに対応する方法について記載します。下記の状況を想定しています。 WordPressを利用していない PageSp...


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

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

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

Bloggerの投稿画像の遅延読み込みの自動化は記事/追加ページでは個別のデータが取れなくて厳しいけど、しかしできなくはなかった。本文を全てJavaScriptで表示することになるもののプログラムが完成したので、公開する。


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

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

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

記事内の画像に自動でloading="lazy"をつけるJavaScriptです。すべての画像につけるバージョンと、最初の画像は除くバージョンを作りました。


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

Lazyloadの実装方法の違いによるネットワーク負荷を検証した

Lazyloadの実装方法の違いによるネットワーク負荷を検証した


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

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

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

Core Web Vitalsの値、気にしてますか? レスポンシブでCLS対策をする時の対応を書きます。 CLSとは? Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。 developers-jp.googleblog.com 画像の読み込みや、コンテンツの遅延読み込みなどでサイトの要素がズレる量のことです。 基本的には画像サイズを指定してあげることでズレはなくなります。 Tip: Set width & height on …


まとめ

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

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

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

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



パフォーマンス


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


気軽に足跡残してね!

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



それでは今回の記事はこれでおしまい。

Next Post Previous Post
No Comment
Please Enter Comments in Light mode
comment url