Google Chrome の新しいネイティブ ビデオとオーディオの遅延読み込みにより、ウェブが高速化される可能性があります

<本文>

Google Chrome と、Edge や Vivaldi を含む他の Chromium ベースのブラウザは、間もなくビデオとオーディオの遅延読み込みのネイティブ サポートを取得する可能性があります。この変更は、Chromium への過去の貢献で知られる独立系開発者である Helmut Januschka によって提案されました。

遅延読み込み機能は Chrome で何年も前から存在していましたが、これまでネイティブ サポートは、ビデオやオーディオではなく、画像や iframe などの要素に限定されていました。 Chromium ベースのブラウザがビデオとオーディオの遅延読み込みをネイティブにサポートするようになるため、この状況はすぐに変わります。これにより、特に多くのメディアを含む Web ページを閲覧する場合に、Web が高速化される可能性があります。

ご存じない方のために説明しておきますが、Web サイト上で画像やビデオを遅延読み込みし、Chrome やその他のブラウザでアクセスすると、ブラウザがページをレンダリングする瞬間にメディアがフェッチされたり、完全に初期化されたりしません。ビデオまたは画像は、ビデオが埋め込まれている領域までスクロールしたときに、近くに表示されている場合にのみ読み込まれます。

遅延読み込みを行わないと、Chrome はメディアをはるかに早く読み込む可能性があります。つまり、ブラウザーは最初にページ上のすべてをダウンロードする必要があるため、Web サイトの速度が大幅に遅くなります。 loading=”lazy” を指定すると、実際に動画が埋め込まれている領域に到達するまで、Chrome は動画の読み込みやダウンロードを行いません。そこまでスクロールしないと、メディアが読み込まれない可能性があります。

ほとんどのサイトはすでに JavaScript を使用してビデオやオーディオを遅延読み込みしており、これはうまく機能しますが、ブラウザーのネイティブ プリロード スキャナーや組み込みの読み込みヒューリスティックとうまく統合されないため、パフォーマンスのベスト プラクティスとは言えません。

「ネイティブ サポートがなければ、開発者は Intersection Observer を使用してカスタム JavaScript ソリューションを実装し、メディア要素がビューポートに入ったことを検出し、src 属性を動的に設定する必要があります」と開発者の Helmut Januschka 氏は Chrome のステータスに関する投稿で書いています。 「このアプローチはエラーが発生しやすく、複雑さが増し、ブラウザのプリロード スキャナと統合できません。」

Windows Insight によって最初に発見されたように、Helmut Januschka 氏のソリューションは、画像と iframe に対して既に統合されているのと同様に、ビデオとオーディオの本格的なネイティブ遅延読み込みを Chromium に追加することです。

この機能が Chrome 安定版で展開されると、開発者は代わりに HTML 属性の使用を開始できます:loading=”lazy” を or で直接使用します。

これは、ビデオとオーディオが JavaScript に依存するのではなく、ネイティブに遅延読み込みされることを意味します。JavaScript がボトルネックになったり、Chrome のプリロード スキャナーでうまく動作しない可能性があります。

「ネイティブの遅延読み込みにより、ブラウザーはネットワーク対応のしきい値を使用してリソースの読み込みを最適化し、自動再生およびプリロード属性との相互作用を適切に処理し、オフスクリーン メディアの window.onload のブロックを回避できます」と Januschka 氏は述べています。

「これは、![] および の既存の遅延読み込み動作と一致します。