昨年 Chrome にネイティブ画像の遅延読み込み機能を追加した後、Google は現在、開発者が重い iframe を遅延読み込みできるようにしています。 さらに詳しく知りたい方は続きをお読みください。
モバイル ユーザーや接続能力が限られている世界中の人々からの Web トラフィックの増加により、企業や開発者は Web サイトの読み込み速度を大幅に最適化する必要に迫られました。 従来、Web ページに移動すると、画像、アイコン、GIF、スタイル、スクリプトなど、利用可能なすべてのコンテンツがダウンロードされて表示されます。 ご想像のとおり、これらすべてを読み込むと、特に低速接続のユーザーの場合、Web サイトの起動時に遅延が発生します。 Google はしばらくの間、この問題を解決しようと努めてきました。 ちょうど昨年、彼らはこう付け加えた 画像の遅延読み込み機能 Google Chrome 76では。 現在、Google は同じ機能を iframe に導入しています。
遅延読み込みでは、Web ページのコンテンツがオンデマンドで読み込まれます。つまり、コンテンツはダウンロードされず、 下にスクロールしてビューに表示されるまで表示されるため、Web サイトの最初の起動時間が短縮されます。 スピード。 前述したように、画像の遅延読み込みは昨年から Chrome で利用できるようになりましたが、開発者は iframe でも同じ方法を使用できるようになりました。 独自の Web サイトに実装するには、次のことを追加するだけです。 読み込み中=「怠惰」 属性を画像や iframe 要素に追加します。 Firefox や Safari などのブラウザは、ネイティブ イメージの遅延読み込み機能をすでに実装しています。 iframe に関しては、いくつかのバグを修正するためにまだ作業中です。 Googleはまた、Chrome for AndroidのLiteモードでは、オフスクリーン画像とiframeが自動的に遅延ロードされることにも言及しました。
皮肉なことに、YouTube ビデオの埋め込み (iframe ベース) が遅延読み込み時に Web ページの読み込み速度にどのような影響を与えるかをテストしているときに、Chrome チームは次のことを発見しました。モバイル デバイス上でページがインタラクティブになるまでの時間を 10 秒節約できました。
「言うまでもなく、遅延読み込みには、Web ページにアクセスするとすぐにコンテンツ全体をダウンロードする従来の方法に比べて、大きな利点があります。価格：無料。
4.1.
ソース： web.dev
経由： テクダウズ