このページは Cloud Translation API によって翻訳されました。

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

Addy Osmani

対応ブラウザ

77
79
121
16.4

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

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

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

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

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

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

iframe で iframe の遅延読み込みを使用することでデータを節約できる。この例では、積極読み込みでは 3 MB が pull されますが、遅延読み込みでは、ユーザーが iframe の近くまでスクロールするまでこのコードが pull されません。 — 画面外の iframe を頻繁に読み込むと、ユーザーは表示されない可能性のある要素をダウンロードしてデータを無駄に消費します。

データセーバーユーザー向けのオフスクリーン iframe の自動遅延読み込みに関する Chrome の調査によると、iframe の遅延読み込みにより、データ節約（中央値）が 2 ～ 3%、First Contentful Paint が 1 ～ 2% 削減（中央値）、First Input Delay（FID）が 95 パーセンタイルで 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 をデフォルトにすると、ウェブサイトの応答性が大幅に向上します。次の例は、メディア埋め込みにおける、Time to Interactive（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 動画の埋め込みでオフスクリーン iframe を遅延読み込みすることで、操作可能になるまでの時間を 10 秒短縮 — Chrome.com は、YouTube のオフスクリーン埋め込みを遅延読み込みすることで、TTI を 10 秒短縮しました。

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 の「いいね！」ボタン — Facebook の Like プラグイン。

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

ブラウザをまたぐ iframe の遅延読み込み

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

また、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>

画面外 iframe の遅延読み込みの例外はありますか？

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

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

リソース

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

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