Lazy Load（遅延読み込み）とは？

Lazy Load（レイジーロード、遅延読み込み）とは、Webページのコンテンツ（画像、動画、スクリプトなど）をページが完全に読み込まれる前にすべて一括でロードするのではなく、ユーザーがスクロールして表示領域に入ったタイミングでロードする技術のことです。

Lazy Loadのメリット
Lazy Loadの実装方法
Lazy Loadが適用される主な要素
Lazy Loadを適用する際の注意点
まとめ

Lazy Loadのメリット

ページの表示速度向上

初回のページ読み込み時に不要なリソースのロードを避けることで、サイトの表示速度を高速化できます。

ユーザーエクスペリエンスの向上

ページの読み込みが速くなることで、訪問者のストレスを軽減し、離脱率を下げることができます。

サーバー負荷の軽減

必要なコンテンツのみを順次ロードするため、サーバーへの負荷を低減できます。

SEO対策に有効

Googleはページの読み込み速度をランキング要因の1つとしているため、Lazy Loadを活用することでSEOにも良い影響を与える可能性があります。

Lazy Loadの実装方法

HTML属性を利用する方法

画像に loading="lazy" 属性を追加するだけで、遅延読み込みを簡単に実装できます。

<img src="example.jpg" alt="サンプル画像" loading="lazy">

JavaScriptライブラリを使用する方法

Intersection Observer API を活用して、より高度な制御を行うことができます。

document.addEventListener("DOMContentLoaded", function () {
    let lazyImages = document.querySelectorAll("img.lazy");
    let observer = new IntersectionObserver(function (entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let img = entry.target;
                img.src = img.dataset.src;
                img.classList.remove("lazy");
                observer.unobserve(img);
            }
        });
    });
    lazyImages.forEach(img => observer.observe(img));
});