Chromiumブラウザは、パフォーマンスをサポートするためにiframeレイジーロードをサポートしています
グーグル 明らかにした 2020年7月24日、Google ChromeおよびChromiumベースのWebブラウザーがiframeコンテンツの遅延読み込みをサポートするようになりました。機能の統合は、Googleがサポートを導入した直後に行われます。 ChromiumおよびChromeでの画像の遅延読み込み 。 MozillaのFirefox Webブラウザは、画像の遅延読み込みもサポートしています 。
技術的には、遅延読み込みは、ユーザーがアクセスするまでブラウザが特定のコンテンツを読み込まないようにします。ページが初めて読み込まれるときに、スクロールせずに見える範囲にあるコンテンツが遅延読み込みされる場合があります。ユーザーが下にスクロールすると、スクロールアクションが行われている間にコンテンツが読み込まれます。
ChromiumベースのWebブラウザーでのiframeの遅延読み込みは、同じ方法に従います。ウェブマスターは、サイトのコードでiframeのloading = 'lazy'属性を使用して、コンテンツをすぐに読み込まないようにブラウザに通知する必要があります。機能をサポートしないブラウザは属性を無視しますが、それをサポートするブラウザはロードを適切に処理します。
Googleはいくつかのテストを実行して、iframeの遅延読み込みの影響を判断しました。それは次のように述べています：
- YouTube埋め込みの遅延読み込みでは、最初のページ読み込みで約500キロバイト節約できます。
- Googleはchrome.comで、ページのYouTube埋め込みにレイジー属性を追加すると、モバイルデバイスでの読み込み時間を10秒短縮することができました。
- Instagram埋め込みの遅延読み込みでは、初期読み込みで約100キロバイト節約されます。
- Spotify埋め込みの遅延読み込みでは、初期読み込み時に514キロバイト節約されます。
一般的に言えば、オフスクリーンiframeの遅延読み込みは、2〜3％のデータ節約の中央値、1〜2％の最初のコンテンツペイント、2％の最初の入力遅延につながります。
Googleは、ウェブサイトの広告に読み込み属性を使用する可能性もあると指摘しています。
コンテンツがアクセスされるまでロードを延期するために、遅延ロードをサポートするブラウザーを取得するには、Webマスターがloading = 'lazy'パラメーターを指定する必要があります。さらに、「eager」パラメータを使用して、コンテンツをすぐにロードする必要があることをブラウザに通知し、「auto」を使用してブラウザに決定させることができます。
Googleは、Chrome for Androidのライトモードに例外を実装しました。ライトモード、またはデータセーバーモードは、Chrome for Androidでサポートされている特別なモードで、Googleサーバーを使用してコンテンツをより速く読み込むことで読み込みパフォーマンスを向上させるように設計されています。 Chromeウェブブラウザでライトモードがアクティブになっている場合、オフスクリーン画像とiframeは自動的に遅延読み込みされます。
おわりに
遅延読み込みの主な目的は、Webサイトの初期読み込みを高速化することです。サイトが読み込まれたときに最初に読み込まれないコンテンツは、ユーザーがページをスクロールしたときに読み込まれます。これにより、スクロールの速度やデバイスおよびネットワークのパフォーマンスによっては、一部のコンテンツがすぐに表示されない場合があります。
では、あなた： レイジーローディング、そうか、そうでないか、あなたの考えは何ですか？ （経由 Techdows ）