Googleは、Chromeブラウザの重要な更新を発表し、オーディオおよびビデオ要素に対するネイティブな遅延ロード機能を拡張しました。
この期待されていた機能は、ウェブパフォーマンスを向上させ、帯域幅を大幅に節約し、メディアリソースが外部サーバーに接続するタイミングをコントロールすることでセキュリティの利点をもたらすことを目的としています。
遅延ロード属性の拡張
ウェブ開発者は長い間、初期ページレンダリングを高速化するために画像とiframeに対する loading="lazy" 属性に頼ってきました。この新しいChrome更新により、この機能は <video> および <audio> HTMLタグに直接適用されるようになりました。
ユーザーがウェブページを訪問した瞬間にすべてのメディアファイルをダウンロードするのではなく、Chromeはユーザーがそれらの要素の近くまでスクロールするまでこれらの要素のフェッチを延期します。
ウェブページが読み込まれるとき、ブラウザはユーザーの画面(ビューポート)とメディア要素の間の距離を計算します。Chromeはユーザーがビデオまたはオーディオファイルを表示または対話する直前にのみ、ダウンロードするためのネットワークリクエストを開始します。
パフォーマンスの観点から、このシフトは不要なネットワークリクエストを大幅に削減し、初期メモリ消費を最小化します。従量課金接続またはより遅いモバイルネットワークを使用しているユーザーにとって、これはより高速でスムーズなブラウジング体験に変わります。
単なるスピードを超えて、遅延ロードはユーザープライバシーとセキュリティ対策に対して顕著な利点をもたらします。画面外のメディアファイルが自動的に読み込まれるのを防ぐことにより、ブラウザは埋め込まれたオーディオまたはビデオ要素に関連する隠れたトラッキング機構をブロックできます。
悪質なアクターと積極的な広告主は、IPアドレスを収集したり、デバイスをフィンガープリントしたり、複数ページでユーザーの行動を追跡したりするために、小さな見えないメディアファイル(1ピクセルトラッキングビデオなど)を使用することがあります。
ロードを遅延させることで、ユーザーがウェブページのその特定のセクションに積極的にスクロールしない限り、これらのトラッカーがアクティベートするのを防ぎます。
さらに、自動接続を制限することで、悪意のあるメディアコンテナに隠れているドライブバイ型エクスプロイトのリスクが低減されます。メディアファイルを即座にパースしないことにより、Chromeは重要な初期ページロードフェーズ中にそのアクティブな攻撃面を最小化します。
これはまた、サーバー管理者がリソース枯渇を軽減するのに役立ちます。サーバーはもはや自動ボットやスクレイパーに重いメディアファイルを配信することを強制されないためです。
シンプルな開発者向けの実装
この機能を実装することは簡単です。メディアタグに単に loading="lazy" を追加することで、開発者はChromeの組み込みインターセクションオブザーバーを活用して、リソースフェッチを自動的に管理できます。
これにより、以前にカスタム遅延ロードを処理していた重い第三者JavaScriptライブラリの必要性がなくなり、外部コードに関連する供給チェーン脆弱性のリスクが減少します。
Chromeがこの機能をグローバルに展開するとき、ウェブ管理者は、サイトパフォーマンスを向上させ、より安全で効率的なウェブエコシステムに貢献するために、HTMLコードベースを更新することが奨励されます。
翻訳元: https://gbhackers.com/google-brings-lazy-loading-to-media-files/