【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="画像の説明">
詳細は下記で説明されているの、もっと知りたい方は参考にご覧下さい。
次に遅延読み込み専用の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を読み込まずネイティブの遅延読み込みを使用する方法です。
いちいち遅延読み込みのクラスを追加せず、imgタグすべてを遅延読み込みの対象にする方法です。
こちらは結城永人さんが作られたBloggerの記事/追加ページの投稿画像にloading-lazyを自動的に付ける方法です。
こちらはsutajpさんが作られたBloggerの記事内の投稿画像に自動でloading-lazyを付ける方法です。
Lazyloadについて6パターンのパフォーマンスを検証した記事です。
レスポンシブ画像で発生するCLSの問題の対応方法です。
まとめ
JavaScriptを使ったLazyLoadのライブラリはマークアップの作業が少々面倒なものの、使いこなせると大変便利なものであると確認できました。
LazyLoadはimg以外の要素(picture、iframe、video等)も遅延読み込みできます。
ネイティブlazy-lodeではYouTubeの動画をたくさん埋め込んだ場合、遅延読み込みの効果はあまり期待できないのですが、LazyLoadのライブラリを使用すると、パフォーマンスが著しく低下することを回避できます。
ちなみに、下記記事はYouTubeのライブ配信動画を無謀にも80個以上埋め込んでますが、最低でも65以上のパフォーマンスを維持してます。
なお、ネイティブlazy-lodeはJavaScript不要で動作するので、初心者は原則こちらを導入されることをおススメします。使用方法については下記記事をご覧ください。
気軽に足跡残してね!
この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。
https://t.co/dy7tAEJjQI
— heavy-peat (@AfterWork_Lab) January 16, 2022
JavaScriptを使ったLazyLoadの方法について勉強したことを記事にまとめて見ました。
遅延読み込みに興味を持っている方は参考にしてみて下さい。#JavaScript #LazyLoad #遅延読み込み #JetTheme
それでは今回の記事はこれでおしまい。