Google、新しいChromeリリースでメディアファイルの遅延読み込みを導入

Googleは、そのChromeブラウザに重要な更新を発表しました。このアップデートにより、ネイティブな遅延読み込み機能がオーディオとビデオ要素にも適用されます。

メディアファイルの遅延読み込み

ウェブ開発者は長らく、画像やiframeに対してloading="lazy"属性を使用してページの初期レンダリングを速める方法を利用していました。この新しいChromeアップデートにより、この機能が直接<video>と<audio>HTMLタグにも適用されます。

ユーザーがウェブページに訪問した瞬間にすべてのメディアファイルをダウンロードする代わりに、Chromeはこれらの要素の読み込みをユーザーがスクロールして近づくまで遅らせます。ウェブページが読み込まれるとき、ブラウザはユーザーの画面（ビューポート）とメディア要素との距離を計算します。

ユーザーがそのメディアファイルを視覚化または操作しようとする直前にネットワークリクエストを開始することで、Chromeは不要なネットワークリクエストを大幅に削減し、初期メモリ消費量も最小限に抑えます。これは、計測された接続や遅いモバイルネットワークを使用しているユーザーにとって、より速くスムーズなブラウジング体験につながります。

ユーザープライバシーとセキュリティの向上

オフスクリーンメディアファイルを自動的に読み込むことを防ぐことで、ブラウザは隠れたトラッキングメカニズム（埋め込まれたオーディオやビデオ要素に関連するもの）をブロックできます。悪意のあるアクターと攻撃的な広告主は時々、IPアドレスの収集、デバイスの指紋化、またはページ間でのユーザー行動追跡のために小さな非表示メディアファイル（1ピクセルトラッキングビデオなど）を使用します。

これらのトラッカーをアクティブ化する前に読み込みを遅らせるため、ユーザーがその特定のセクションにスクロールしない限り、これらのトラッカーは機能しません。さらに、自動接続を制限することで、悪意のあるメディアコンテナ内に隠されたドライブバイエクスプロイトのリスクも低減されます。

開発者の実装

この機能の実装は簡単です。開発者は単にメディアタグに対してloading="lazy"を追加するだけで、Chromeが組み込みのintersection observerを使用してリソースのフェッチを自動的に管理します。

これにより、以前にカスタム遅延読み込みを処理するために使用されていた重いサードパーティJavaScriptライブラリの必要性がなくなり、サプライチェーン脆弱性に関連するリスクも低減されます。Chromeがこの機能をグローバルに展開するにつれて、ウェブ管理者はサイトパフォーマンスとセキュアで効率的なWebエコシステムへの貢献を向上させるためにHTMLコードベースを更新することを奨励されています。

元記事: https://gbhackers.com/google-brings-lazy-loading-to-media-files/