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

Addy Osmani

Barry Pollard

対応ブラウザ

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

<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%、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 の遅延読み込みをデフォルトにすると、ウェブサイトの応答性が大幅に向上します。 次の例は、メディア埋め込みのインタラクティブになるまでの時間（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 ライト コンポーネントをご検討ください。

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 です。通常、プラグインはページの最後 ページの終わりや記事の最後などに 表示するような場合は 最適でない場合があります

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

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

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

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

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

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

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

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

リソース

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

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