IntersectionObserverによる遅延読み込み
画像やコンテンツがビューポートに入るまで読み込みを遅らせます
「IntersectionObserverによる遅延読み込み」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
ネイティブの loading="lazy" を超えて
ネイティブの遅延読み込みが対応しているのは <img> と <iframe> です。それ以外のもの（背景画像、動画、コストの高いコンポーネント、サードパーティーウィジェットなど）については、IntersectionObserver を使って要素がビューポートの近くに来るまで処理を遅らせてください。
パターン
遅延させる要素に、実際のソースを保持する data-src 属性を付け、小さなプレースホルダーを表示します。それぞれを監視し、交差したら data-src の値を src に移す（または別の方法で要素を有効化する）とともに監視を解除します。これにより、コールバックが再び呼び出されることはありません。
<img class="lazy" data-src="/photo.jpg" alt="Photo" width="800" height="600">
<script>
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
}
}, { rootMargin: "200px" });
document.querySelectorAll(".lazy").forEach((img) => observer.observe(img));
</script>背景画像の遅延読み込み
CSS の background-image には、ネイティブの遅延読み込み機能がありません。交差したときに el.style.backgroundImage = `url("${el.dataset.bg}")` を設定するか、background-image を定義する CSS クラスを追加してください。その時点で画像のダウンロードが始まります。
動画の遅延読み込み
ページ下部にある動画では、最初は src と source 要素を省略します。交差したときに <source> タグを挿入し、video.load() を呼び出してください。これを行わないと、ユーザーが要素の近くまでスクロールする前に、動画のメタデータまで eager にダウンロードされる場合があります。
サードパーティーウィジェット
ソーシャルメディアの埋め込み、コメントウィジェット、チャットスクリプトは、数メガバイトのデータを読み込むことがあります。交差したときにウィジェットのセットアップスクリプトを動的にインポートしてください：await import("/embed.js")。ユーザーが実際にそのセクションまでスクロールしたときだけ、読み込みのコストが発生します。
iframe の遅延読み込み（loading="lazy" を超えて）
iframe のネイティブ遅延読み込みでも、iframe のドキュメント自体はダウンロードされます。地図や動画プレーヤーなどの負荷が大きい埋め込みには、「ファサード」パターンを使用してください。プレースホルダー画像を表示し、クリックまたは交差時に実際の iframe と置き換えます。これにより、初期ページのサイズを大幅に削減できます。
事前読み込みのための rootMargin
rootMargin: "200px" を指定すると、要素がビューポートに入る200ピクセル前から読み込みを開始します。スクロール速度に応じて調整してください。小さすぎると高速スクロール中にプレースホルダーが表示され、大きすぎるとすべてを読み込んで遅延読み込みの目的を失います。
トリガー後に監視を解除する
遅延読み込みが有効になったら、必ず observer.unobserve(element) を呼び出してください。そうしないと、要素がビューポートに再び入るたびにコールバックが呼び出され続けます。CPU を無駄に消費するだけでなく、有効化処理がべき等でない場合はバグの原因にもなります。
スペースを確保する
遅延読み込みする画像には width と height を設定し、遅延読み込みするコンテナーには min-height を設定してください。明示的なサイズを指定しないと、コンテンツの読み込みに伴ってページが再レイアウトされ、煩わしいスクロール位置のジャンプが発生し、Cumulative Layout Shift のスコアも悪化します。
JavaScript がない場合のフォールバック
完全な Progressive Enhancement を実現するには、実際の src を指定した <noscript> で遅延読み込み要素を囲みます：<noscript><img src="/photo.jpg"></noscript>。JavaScript を使用しないユーザーには画像がすぐに表示され、JavaScript を使用するユーザーには遅延読み込み版が表示されます。適切な data-src マークアップと組み合わせてください。
多数の要素をまとめて処理する
1つのオブザーバーインスタンスで、数百個の要素を効率よく監視できます。要素ごとにオブザーバーを1つ作成しないでください。目的の options を指定した共有オブザーバーを1つ作成し、各対象を observe() で登録します。
ネイティブの loading="lazy" との組み合わせ
<img> については、主な方法として loading="lazy" を使用し、ネイティブの遅延読み込みが対応していない場合に IntersectionObserver を使用してください。両者は問題なく組み合わせられます。ネイティブ機能でページ下部の画像を処理し、IntersectionObserver で背景、コンポーネント、その他のカスタムローダーを処理します。
理解度チェック
遅延読み込みする要素を有効化した後に observer.unobserve(element) を呼び出すことが重要なのはなぜですか？
まとめ
IntersectionObserver を使うと、ネイティブの <img loading="lazy"> だけでなく、背景、動画、サードパーティーウィジェット、動的なコンポーネントのインポートにも遅延読み込みを拡張できます。data-src のプレースホルダーを使用し、交差時に置き換え、有効化後に監視を解除してください。rootMargin で事前読み込みを行い、width/height でスペースを確保し、noscript のフォールバックを提供します。適用できる場合はネイティブの遅延読み込みと組み合わせてください。
よくある質問
「IntersectionObserverによる遅延読み込み」レッスンは無料ですか？
はい。「IntersectionObserverによる遅延読み込み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「IntersectionObserverによる遅延読み込み」で何を学びますか？
画像やコンテンツがビューポートに入るまで読み込みを遅らせます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「IntersectionObserverによる遅延読み込み」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- IntersectionObserver APIとしきい値
- IntersectionObserverによる遅延読み込み
- 無限スクロールの実装
- スクロール連動アニメーションのセットアップ