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

Addy Osmani 氏

<iframe> 要素の遅延読み込みを行うと、ユーザーがその近くでスクロールするまで、画面外の iframe の読み込みが延期されます。これにより、データが節約され、ページの他の部分の読み込みが速くなり、メモリ使用量が削減されます。

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

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

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

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

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

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

また、オフスクリーン iframe の遅延読み込みにより、Largest Contentful Paint（LCP）のメリットが得られます。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 がデフォルトになるようにウェブを変更すると、次のようになります。

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 埋め込みの遅延読み込みに切り替えたことで、モバイル デバイスでのページがインタラクティブになるまでの時間を 10 秒短縮できました。埋め込みコードへの loading=lazy の追加についてご説明するため、内部バグを YouTube でオープンいたしました。

Instagram の埋め込みの遅延読み込み（初期読み込みで gzip 圧縮して約 100 KB を節約）:

Instagram の埋め込みでは、マークアップのブロックとスクリプトを使用して、iframe をページに挿入できます。この iframe を遅延読み込みすると、埋め込みに必要なスクリプトをすべて読み込む必要がなくなります。このような埋め込みは、ほとんどの記事でビューポートより下に表示されることを考慮すると、iframe の遅延読み込みに適した候補であると考えられます。

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>

前述の埋め込みは、メディア コンテンツに対して iframe の遅延読み込みによって得られるメリットを示していますが、広告にもメリットがもたらされる可能性があります。

ケーススタディ: Facebook のソーシャル プラグインを遅延読み込みする

Facebook のソーシャル プラグインを使用すると、デベロッパーはウェブページに Facebook のコンテンツを埋め込むことができます。埋め込みの投稿、写真、動画、コメントなど、さまざまなプラグインが用意されています。最も人気のあるのは「いいね」プラグインです。このプラグインには、ページを「高く評価」したユーザーの数が表示されます。デフォルトでは、Facebook JSSDK を使用して Like プラグインをウェブページに埋め込むと、約 215 KB のリソース（そのうち 197 KB は JavaScript）が取得されます。多くの場合、プラグインは記事の最後やページの末尾付近に表示されるため、画面外のときに積極的に読み込むのは適切とは言えません。

エンジニアの Stoyan Stefanov 氏のおかげで、Facebook のすべてのソーシャル プラグインが、標準化された iframe の遅延読み込みをサポートするようになりました。 プラグインの data-lazy 構成で遅延読み込みにオプトインしているデベロッパーは、ユーザーが近くをスクロールするまで読み込みが行われないようにできます。これにより、埋め込みを必要とするユーザーに対しては完全に機能させることができ、ページを下までスクロールしないユーザーにはデータを節約できます。これが、標準化された iframe の遅延読み込みを本番環境で試す多くの埋め込み機能の最初のものとなることを期待しています。

クロスブラウザで iframe を遅延読み込みできますか？はい

iframe の遅延読み込みは、段階的な機能強化として適用できます。iframe で loading=lazy をサポートしているブラウザは iframe を遅延読み込みしますが、loading 属性は、まだサポートしていないブラウザでは無視されます。

また、lazysizes JavaScript ライブラリを使用してオフスクリーン iframe を遅延読み込みすることもできます。この方法は、次のような場合に適しています。

• 現在の標準化された遅延読み込みよりも多くのカスタムの遅延読み込みのしきい値が必要
• ブラウザ間で一貫した iframe の遅延読み込み機能をユーザーに提供する

<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

遅延読み込みの機能を検出し、利用できない場合は遅延サイズを取得するには、次のパターンを使用します。

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

loading=lazy を含む画面外 iframe が引き続き読み込まれることはありますか？

Chrome のデータセーバー ユーザー向けに iframe を自動的に遅延読み込みする初期テストでは、隠し iframe は例外で、通信や分析によく使用されます。これらの機能は遅延読み込みを回避し、機能が損なわれないように常に読み込まれます。

loading 属性を使用すると、選択がデベロッパーに返されるため、そのようなヒューリスティックは適用されず、距離制限やその他のブラウザの選択（印刷など）に応じて loading 属性が常に尊重されます。

まとめ

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

レビューしてくれた Dom Farolino、Scott Little、Hussein Djirdeh、Simon Pieters、Kayce Basques、Joe Medley、Stoyan Stefanov に感謝します。