iframeの遅延読み込み
loading=lazyで画面外のiframeの読み込みを遅らせます
「iframeの遅延読み込み」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
遅延読み込みとは
遅延読み込みとは、リソースが必要になるまで、つまり要素がビューポートの近くまたは内部に入るまで、その読み込みを遅らせることです。iframeの場合、埋め込まれたドキュメント、そのスクリプト、CSS、アセットは、ユーザーがiframeの近くまでスクロールするまでダウンロードされません。
loading属性
iframeにloading="lazy"を追加します。<iframe src="embed.html" loading="lazy">。ブラウザーは独自のヒューリスティックに基づいて読み込み開始時期を決定します（通常、iframeがビューポートに入る1000〜2500px前から開始します）。JavaScriptは必要ありません。
パフォーマンスへの影響
iframeは大量のリソースを読み込むことがあります（YouTubeは約500KBのJavaScriptを読み込みます）。画面下部にある動画の埋め込みを遅延読み込みすると、初期ページ読み込み時の負荷をこの分だけ削減でき、画面上部のコンテンツに対するLCPとTime to Interactiveを直接改善できます。
loading="eager"
loading="eager"は、位置に関係なくiframeをすぐに読み込みます。これがデフォルトの動作です。eagerを明示的に追加すると、遅延読み込みをグローバルに追加するフレームワークなど、デフォルトでlazyになる環境で、特定のiframeをすぐに読み込ませる場合に役立ちます。
Intersection Observerによる代替方法
クリック時の読み込みや接続品質に基づく読み込みなど、複雑な遅延読み込みロジックにはIntersectionObserverを使用します。iframeのコンテナを監視し、ビューポートに入ったときにのみsrcを設定します。これにより、iframeをいつ読み込むか、そもそも読み込むかどうかを完全に制御できます。
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);ファサードパターン
デフォルトではiframeの代わりに静的なサムネイルを表示し、その上に再生ボタンを重ねます。クリックされたら、サムネイルを実際のiframeに置き換えます。YouTubeのファサードパターンでは、動画のサムネイル画像を表示し、ユーザーが再生をクリックしたときだけiframeを読み込むことで、YouTube埋め込みの読み込みコスト全体を削減します。
クリックして読み込むパターン
大量のJavaScriptを読み込むソーシャル埋め込み（TwitterのタイムラインやInstagramの投稿など）には、「Load comments」ボタンを表示します。クリックされたらiframeを挿入します。操作しないユーザーには読み込みコストが発生しません。これは、埋め込まれたソーシャルコンテンツに対するプログレッシブエンハンスメントです。
ブラウザーの対応状況
iframeのloading="lazy"は、Chrome 77以降とFirefox 121以降でサポートされています。Safariは（2024年時点で）iframeの遅延読み込みをサポートしていません。クロスブラウザーで遅延読み込みを行うには、信頼できるフォールバックとしてIntersectionObserverを使用してください。これはすべての最新ブラウザーで動作します。
CLSの防止
累積レイアウトシフト（CLS）を防ぐため、width、height、aspect-ratioのCSSを明示的に指定して、遅延読み込みされるiframeのスペースを確保してください。iframeが読み込まれて表示されるときには、すでにスペースが確保されているため、周囲のコンテンツが配置に合わせて移動することはありません。
アナリティクスのトラッキング
遅延読み込みされるiframeは、アナリティクスに影響する可能性があります。トラッキングピクセルやアナリティクスの埋め込み用iframeを遅延読み込みすると、そこまでスクロールしないユーザーには実行されない可能性があります。重要なアナリティクスやコンバージョントラッキングのiframeは、eagerで読み込むか、画面上部に配置してください。
lazyとsandboxの組み合わせ
lazyとsandboxを組み合わせて使用します。<iframe src="embed.html" loading="lazy" sandbox="allow-scripts">。両方の属性は独立して機能します。lazyは読み込みのタイミングを制御し、sandboxはiframeで可能な操作を制御します。効率的で安全なサードパーティ埋め込みのために、両方を組み合わせてください。
理解度チェック
iframeの遅延読み込みにおけるファサードパターンとは何ですか？
まとめ
loading="lazy" を指定してiframeを遅延読み込みすると、ビューポートの近くに来るまでリソースの読み込みを遅らせるため、重い埋め込みコンテンツがある場合でも初期ページ読み込みを大幅に軽減できます。ファサードパターンとクリックして読み込む方式を組み合わせると、ユーザーが操作したときだけiframeを読み込むようにでき、さらに最適化できます。IntersectionObserverを使えば、複雑な遅延読み込みの状況でもクロスブラウザーの制御が可能です。CLSを防ぐため、iframeの寸法をあらかじめ確保してください。
よくある質問
「iframeの遅延読み込み」レッスンは無料ですか？
はい。「iframeの遅延読み込み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「iframeの遅延読み込み」で何を学びますか？
loading=lazyで画面外のiframeの読み込みを遅らせます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「iframeの遅延読み込み」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。