【Web表示高速化】JavaScriptを使ったLazyLoadの方法
はじめに
前回ネイティブlazy-lode(loading=”lazy”)の使用方法について記事を書きましたが、適用範囲に制限があることが分かりました。
ネイティブlazy-lodeで遅延読み込みが出来ない部分はJavaScriptを使って改善する必要があるのですが、この使用方法について勉強したことを記事にまとめてみました。
LazyLoad(遅延読み込み)は、JavaScriptのscrollイベントで要素の位置を取得して実施されることが多く、SEO上不利になる可能性があると言われてました。
しかし、2019年5月よりGooglebotがIntersection Observerによる遅延読み込みをサポートすることになったので、SEO上の問題は解消されてます。
初心者には導入が難しいかも知れませんが、興味を持った方は仕組みだけでも知っておくと後で役に立つかも知れません。
最初にGoogleが推奨しているIntersection Observerを使った遅延読み込みの方法について説明します。
なおIntersection Observerの動作は、下記記事を読むと理解が深まると思います。
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
This post explains lazy-loading and the options available to you when lazy-loading images.

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を併用した最大限のパフォーマンスを発揮させる実装方法
...
いちいち遅延読み込みのクラスを追加せず、imgタグすべてを遅延読み込みの対象にする方法です。

【サイト高速化】Lazy Load(画像の遅延読み込み)の導入方法 - Qiita
前提 本記事ではJavaScriptライブラリ(vanilla-lazyload)を利用して、画像の遅延読み込みに対応する方法について記載します。下記の状況を想定しています。 WordPressを利用していない PageSp...
こちらは結城永人さんが作られたBloggerの記事/追加ページの投稿画像にloading-lazyを自動的に付ける方法です。
Bloggerの記事/追加ページの投稿画像にloading-lazyを自動的に付けるプログラム
Bloggerの投稿画像の遅延読み込みの自動化は記事/追加ページでは個別のデータが取れなくて厳しいけど、しかしできなくはなかった。本文を全てJavaScriptで表示することになるもののプログラムが完成したので、公開する。
こちらはsutajpさんが作られたBloggerの記事内の投稿画像に自動でloading-lazyを付ける方法です。
【Blogger】自動で記事内の画像にloading="lazy"を付ける【JavaScript】
記事内の画像に自動でloading="lazy"をつけるJavaScriptです。すべての画像につけるバージョンと、最初の画像は除くバージョンを作りました。
Lazyloadについて6パターンのパフォーマンスを検証した記事です。

Lazyloadの実装方法の違いによるネットワーク負荷を検証した
レスポンシブ画像で発生する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以上のパフォーマンスを維持してます。

気になる場所はYouTubeのライブ配信で確認しよう! - after work lab
はじめに 建物や施設に設置されたカメラの映像がYouTubeでライブ配信されていて、24時間世界中どこからでも丸見えになっている場所があります。 ニュースを見るよりSNSで発信される情報の方がリアルで速く情報量も多いので、ライブ映像を上手く利用すると無駄な行動を取らずに...
なお、ネイティブlazy-lodeはJavaScript不要で動作するので、初心者は原則こちらを導入されることをおススメします。使用方法については下記記事をご覧ください。

【必見】loading=”lazy”の正しい使い方 - after work lab
はじめに 皆さんは遅延読み込み(lazy loding)という言葉を聞いたことがありますか。 電車の遅延は困りますが、Webコンテンツの遅延読み込みは通信量が減りブラウザの表示速度が改善されるので、素晴らしい仕組みだと言えます。 但し、用法容量を理解して使...
気軽に足跡残してね!
この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。
https://t.co/dy7tAEJjQI
— heavy-peat (@AfterWork_Lab) January 16, 2022
JavaScriptを使ったLazyLoadの方法について勉強したことを記事にまとめて見ました。
遅延読み込みに興味を持っている方は参考にしてみて下さい。#JavaScript #LazyLoad #遅延読み込み #JetTheme
それでは今回の記事はこれでおしまい。