オフスクリーン iframe を遅延読み込みしてみましょう。

Addy Osmani

Barry Pollard

対応ブラウザ

• 77
• 79
• 121
• 16.4

<iframe> 要素の遅延読み込みでは、ユーザーがスクロールして iframe の近くまで移動するまで、オフスクリーンの iframe の読み込みが延期されます。これにより、データを節約し、ページの他の部分の読み込みを高速化し、メモリ使用量を削減できます。

画像の遅延読み込みと同様に、loading 属性を使用して、iframe を遅延読み込みすることをブラウザに指示します。

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<iframe loading=lazy> のデモでは、遅延読み込みの動画埋め込みを示しています。

iframe を遅延読み込みする理由

サードパーティの埋め込みは、動画プレーヤーからソーシャル メディアの投稿、広告まで、幅広いユースケースに対応します。このコンテンツは多くの場合、ユーザーのビューポートにすぐには表示されませんが、ユーザーはスクロールしなくても、フレームごとにデータとコストのかかる JavaScript をダウンロードするコストを支払います。

オフスクリーンの iframe を即座に読み込むと、ユーザーは表示されない可能性のある要素をダウンロードしてデータを浪費します。

データセーバー ユーザーのオフスクリーン iframe の自動遅延読み込みに関する Chrome の調査によると、iframe の遅延読み込みにより、データ使用量の中央値が 2 ～ 3%、First Contentful Paint の中央値が 1 ～ 2%、95 パーセンタイルで First Input Delay（FID）が 2% 改善される可能性があります。

オフスクリーン iframe を遅延読み込みすることで、ページの Largest Contentful Paint（LCP）も改善できます。iframe はすべてのサブリソースを読み込むためにかなりの帯域幅を必要とすることが多いため、オフスクリーン iframe を遅延読み込みにすると、ネットワーク制約のあるデバイスでの帯域幅の競合が減り、ページの LCP につながるリソースの読み込みにより多くの帯域幅が残ります。

iframe の組み込み遅延読み込みの仕組み

loading 属性を使用すると、ユーザーがスクロールして近づくまで、ブラウザは画面外の iframe と画像の読み込みを遅らせることができます。loading は次の 2 つの値をサポートします。

• lazy: 遅延読み込みに適した候補。
• eager: 遅延読み込みに適していません。すぐに読み込みます。

iframe で loading 属性を使用する方法は次のとおりです。

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>

この属性を指定しなかった場合、リソースを明示的に読み込む場合と同じ影響があります。

JavaScript を使用して iframe を動的に作成する必要がある場合は、要素に iframe.loading = 'lazy' を設定することもサポートされています。

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

人気のある iframe 埋め込みを遅延読み込みすると、ユーザー エクスペリエンスにどのような影響がありますか？

遅延読み込みの iframe をデフォルト設定にすると、ウェブサイトの応答性が大幅に向上します。次の例は、メディア埋め込みのインタラクティブ タイム（TTI）の改善とデータの節約を示していますが、広告 iframe を遅延読み込みすることでも同様の効果が得られます。

YouTube

YouTube 動画埋め込みを遅延読み込みすると、ページの初回読み込みで約 500 KB の節約になります。

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>

Chrome.com は、YouTube のオフスクリーン埋め込みを遅延読み込みすることで、TTI を 10 秒短縮しました。

注: YouTube の埋め込みをより効率的に読み込む方法については、YouTube Lite コンポーネントの使用をご検討ください。

Instagram

Instagram の埋め込みでは、マークアップのブロックと、iframe をページに挿入するスクリプトが提供されます。この iframe を遅延読み込みすることで、埋め込みに必要なすべてのスクリプトを読み込む必要がなくなり、初期読み込みで約 100 kB を節約できます。ほとんどの記事では、このような埋め込みはビューポートの下に表示されることが多いため、iframe の遅延読み込みが妥当な候補です。

Spotify

Spotify 埋め込みを遅延読み込みすると、初期読み込みで 514 KB を節約できます。

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

Facebook のソーシャル プラグイン

Facebook のソーシャル プラグインを使用すると、デベロッパーは Facebook のコンテンツをウェブページに埋め込むことができます。最も人気のあるプラグインは、ページを「高く評価」したユーザーの数を示すボタンである高評価プラグインです。デフォルトでは、Facebook JSSDK を使用してウェブページに高評価プラグインを埋め込むと、約 215 KB のリソースが読み込まれます。このうち 197 KB は JavaScript です。プラグインは多くの場合、記事の末尾またはページの末尾付近に表示されるため、画面外にあるときに先行読み込みすると最適な結果が得られない可能性があります。

Facebook の「いいね」プラグイン。

エンジニアの Stoyan Stefanov 氏により、Facebook のすべてのソーシャル プラグインで、標準化された iframe 遅延読み込みがサポートされるようになりました。プラグインの data-lazy 構成で遅延読み込みを有効にしているデベロッパーは、ユーザーが近くまでスクロールするまで、これらのプラグインの読み込みを防ぐことができます。これにより、埋め込みを必要とするユーザーには機能し続けながら、ページを下にスクロールしないユーザーのデータは保存されます。これは、本番環境で標準化された iframe 遅延読み込みを検証する多くの埋め込みの最初のものです。

iframe の遅延読み込みをより細かく制御したい場合

ブラウザレベルの iframe 遅延読み込みは、すべての主要なブラウザで十分にサポートされており、JavaScript に余分な依存関係を必要としないことから、ほとんどのユースケースで推奨されます。

ただし、古いブラウザをサポートする必要がある場合や、遅延読み込みのしきい値をより細かく制御したい場合は、サードパーティ ライブラリを使用して、サイトの iframe を遅延読み込みできます。lazysizes JavaScript ライブラリは、必要に応じて追加オプションを許可するライブラリの 1 つです。

オフスクリーンの iframe 遅延読み込みに例外はありますか？

Chrome のデータセーバー ユーザー向けに iframe を自動的に遅延読み込みする初期テストでは、通信や分析によく使用される非表示の iframe については例外でした。これらの機能は遅延読み込みされず、常に読み込まれるため、これらの機能が破損するのを防ぐことができました。

loading 属性はこうしたヒューリスティックを適用しないため、デベロッパーは常に遅延読み込みの対象を選択します。距離制限やその他のブラウザの選択（印刷など）に応じて、loading 属性を常に尊重してください。

リソース

遅延読み込みのアイデアについては、web.dev の画像と動画の遅延読み込みのコレクションをご覧ください。

レビューをいただいた Dom Farolino、Scott Little、Houssein Djirdeh、Simon Pieters、Kayce Basques、Joe Medley、Stoyan Stefanov に感謝いたします。