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

Addy Osmani

Barry Pollard

対応ブラウザ

• <ph type="x-smartling-placeholder"></ph> 77
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 121
• <ph type="x-smartling-placeholder"></ph> 1,640

<iframe> 要素の遅延読み込みにより、画面外の iframe の読み込みが延期される スクロールしなければ見えない範囲ですこれにより データが節約され ページの他の部分に配置してメモリ使用量を削減します。

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

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

この <iframe loading=lazy> のデモ 遅延読み込み動画が表示されます。

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

サードパーティの埋め込みは、動画プレーヤーや 広告へのソーシャルメディア投稿このコンテンツは多くの場合、 表示されなくなりますが、データのダウンロードには費用がかかり、 スクロールしなくてもフレームごとに JavaScript。

<ph type="x-smartling-placeholder">

</ph>

オフスクリーン iframe を頻繁に読み込むと、 目に見えない要素をダウンロードして無駄にすることもなくなっています。

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

オフスクリーン iframe を遅延読み込みすると、ページの最大サイズを 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' も、 supported:

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>

<ph type="x-smartling-placeholder">

</ph>

Chrome.com は TTI を 10 秒短縮した結果、 オフスクリーンの YouTube 埋め込みの遅延読み込み。

で確認できます。

注: 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 コンテンツを自分の できます。その中で特によく利用されているのが Like プラグインです。 「高く評価」したユーザーの数を表示するボタン表示されます。デフォルトでは Facebook JSSDK を使用するウェブページで Like プラグインを使用すると、約 215 KB の このうち 197 KB が JavaScript です。通常、プラグインはページの最後 ページの終わりや記事の最後などに 表示するような場合は 最適でない場合があります

<ph type="x-smartling-placeholder">

</ph>

Facebook の Like プラグイン

エンジニアの Stoyan Stefanov 氏によれば、Facebook のソーシャル プラグインはすべて 標準化された iframe のサポート 遅延読み込み。 プラグインの遅延読み込みを有効にしているデベロッパーの場合、data-lazy ユーザーがスクロールするまで、これらのプラグインの読み込みを 。これにより、埋め込み機能が必要なユーザーが引き続き機能しながら、 ページを最後までスクロールしなかったユーザーの データも節約できます私たちは これは、標準の iframe 遅延読み込みを試してみるための多くの埋め込みのうちの初版です。 できます。

クロスブラウザ iframe の遅延読み込み

ブラウザレベルの iframe 遅延読み込みは、すべての主要なブラウザで適切にサポートされています。ほとんどのユースケースで、JavaScript に対する余分な依存関係をなくすために推奨されています。

ただし、より多くのブラウザをサポートする必要がある場合や、遅延読み込みのしきい値をより細かく制御したい場合は、サードパーティ ライブラリを使用してサイトで iframe を遅延読み込みできます。

また、lazysizes を使用してオフスクリーン iframe を遅延読み込みすることもできます。 JavaScript ライブラリ:

<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 の遅延読み込みに例外はありますか？

データセーバーに対して iframe を自動的に遅延読み込みする早期テスト で例外として、非表示の iframe は例外として使用されていました。 コミュニケーションや分析に使用できます。読み込みの遅延を防ぎ、 常に読み込まれるようにして、機能が中断されないようにします。

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

リソース

遅延読み込みのその他のアイデアについては、web.dev の 画像と動画の遅延読み込みコレクション。

Dom Farolino、Scott Little、Houssein Djirdeh、Simon Pieters、Kayce Basques、Joe Medley、Stoyan に心より感謝します ステファノフのレビューです