HTMLのvideo・audio要素もloading=”lazy”属性での遅延読み込みが標準に。メディアの読み込み負荷を抑える実装のポイント

ユーザーによりわかりやすく情報を伝えるには、テキストコンテンツだけでなく、動画や音声といったリッチメディアの活用が非常に重要です。動画は直感的な理解を助け、ページ滞在時間を延ばす効果も期待できます。

しかし、リッチメディアの導入には大きな課題があります。それは、動画データの読み込みによってWebページの初期表示速度が大幅に低下してしまうことです。
これはユーザーに多大なストレスを与えるだけでなく、検索エンジンの評価（SEO）や、AIによる回答生成（AIO）、さらにはAI検索で自分のサイトがソースとして引用されやすくするための最適化（GEO）の観点からも、マイナスの影響を及ぼします。

これまで、HTML標準の「Lazy loading（遅延読み込み）」技術は、img要素やiframe要素には適用できましたが、video要素やaudio要素といったメディア関連の要素には対応していませんでした。そのため、これまではJavaScript（Intersection Observerなど）を用いて、手動で遅延読み込みを実装する必要がありました。

ただ、2026年3月頃からメディア関連の要素に対しても実装が進みつつあります。
Google Chromeでは、「Chrome 148」より、videoおよびaudio要素の loading=”lazy” 属性がデフォルトでサポートされます。

WHATWGによるHTML仕様の策定も進んでおり、FirefoxやSafari（WebKit）でも順次実装が進められています。
現時点での詳細なブラウザサポート状況は、以下の「Can I use」から確認することができます。

Can I use (Lazy loading via attribute for video & audio)
https://caniuse.com/loading-lazy-media

メディア関連要素の遅延読み込みの実装方法

遅延読み込みの実装方法は、これまでのimg要素やiframe要素と同じように、属性として指定する流れになります。

HTML

<!-- Lazy-load a video -->
<video loading="lazy" controls width="600" height="400" poster="placeholder.jpg">
    <source src="myvideo.mp4" type="video/mp4">
</video>

<!-- Lazy-load an audio element -->
<audio loading="lazy" controls>
    <source src="myaudio.mp3" type="audio/mpeg">
</audio>

loading=”lazy” 属性を導入する際、他の属性と組み合わせて使用したときのブラウザの動きには、いくつか知っておきたいポイントがあります。思った通りのパフォーマンスを発揮させるために、以下の仕様をあらかじめ把握しておくといいでしょう。

poster属性（サムネイル）の読み込みも遅延対象になる
video要素にloading=”lazy”を付与すると、動画ファイル本体だけでなくposter属性で指定した画像のリクエストも保留されます。要素がビューポートへ接近するまでは画像すら取得されないため、初期表示時にサムネイルだけは先行して表示させたい、といった設計意図がある場合にはこの挙動を考慮しておく必要があります。

autoplay属性はビューポート接近時に発動する
autoplayが設定されている場合、動画がビューポートに近づいた段階で初めて読み込みと再生の処理が開始されます。ブラウザ側で不可視領域での再生を抑制してくれるため、不要な帯域消費やCPU負荷を意識せずに自動再生を扱えるようになります。

preload属性の設定よりも優先される
preload=”auto”などの指定が残っていても、loading=”lazy”が記述されていれば遅延読み込みの命令が優先されます。ブラウザに対して「必要になるまでリソースを要求しない」という明確な指示として機能するため、従来のプリロード設定を書き換えることなく導入が可能です。

今までJavaScriptのIntersection Observerを使って手間をかけて実装していた処理が、属性ひとつで済んでしまうのは非常に効率的です。ブラウザの標準機能に任せられるので、わざわざコードを追加することなく、確実なパフォーマンス改善につながります。