[HTML] loading属性が video・audio に対応｜Chrome 148 のLazy Loading拡張

Webサイトの表示速度改善でよく利用される「遅延読み込み（Lazy Loading）」。

これまで loading="lazy" は主に <img> や <iframe> 要素で使用されていましたが、Chrome 148 から <video>と<audio> 要素でも利用可能になりました。

画像の遅延読み込み（Lazy Loading）とは？

遅延読み込み（Lazy Loading）とは、画面内へ近づくまで画像や動画などの読み込みを遅らせる仕組みです。

通常、ブラウザはページ表示時にすべての画像やメディアを読み込もうとしますが、遅延読み込みを利用すると、ユーザーがスクロールして対象要素が近づいた時点で読み込みが実行されます。

これにより、

• 初期表示速度の改善
• 通信量の削減
• ページパフォーマンス向上

などの効果が期待できます。

loading 属性とは

HTMLでは、loading 属性を利用することで、ブラウザ標準の遅延読み込み機能を簡単に利用できます。

imgタグでの基本的な使い方

loading="lazy" を追加するだけで、ブラウザが自動的に画像の読み込みタイミングを制御します。

JavaScriptライブラリを使わず実装できるため、現在では一般的な遅延読み込み方法となっています。

なお、loading="eager" を指定すると、通常通り即時読み込みされます。

iframeでも利用可能

loading 属性は、iframe 要素でも利用できます。

Google Maps の埋め込みや YouTube iframe などでも活用されており、ページの初期表示負荷軽減に役立ちます。

Chrome 148 で video と audio にも loading 属性が対応

Chrome 148（2026年5月5日リリース）では、 <video>と<audio> 要素でもloading 属性が利用可能になりました。

これにより、以下の要素で共通して遅延読み込みを利用できるようになります。

• <img>
• <iframe>
• <video>
• <audio>

特に動画コンテンツが多いサイトでは、初期読み込み負荷の軽減が期待できます。

videoタグの記述例

画面外にある動画は、必要になるまで読み込みが遅延されます。

audioタグの記述例

音声ファイルについても、必要になるまで読み込みを遅延できます。

なお、実際の読み込み挙動は preload 属性やブラウザ実装によって変化する場合があります。

loading=”lazy” を利用するメリット

loading=”lazy” を利用する主なメリットは以下の通りです。

• ページ表示速度の改善
• First Contentful Paint（FCP）の改善
• 通信量削減
• モバイル環境でのパフォーマンス向上
• JavaScript不要で実装が簡単

特に画像・動画が多いページでは効果を実感しやすくなります。

利用時の注意点

便利な loading="lazy" ですが、以下の点には注意が必要です。

ファーストビュー画像には不向き

ページ表示直後に見える画像へ loading="lazy" を付けると、表示が遅れる場合があります。
ファーストビューの重要画像には、通常読み込みを利用するケースが一般的です。

ブラウザ依存の最適化動作

loading 属性の挙動はブラウザ側に委ねられており、厳密な読み込みタイミングを完全に制御できるわけではありません。
また、ブラウザによって細かな動作差異が発生する可能性があります。

まとめ

Chrome 148 から <video>と<audio> にも loading 属性が対応し、HTML標準の遅延読み込みがさらに使いやすくなりました。

これにより、画像だけでなく動画・音声コンテンツについても、シンプルな記述でパフォーマンス最適化を行えるようになります。

特にメディア量の多いWebサイトでは、今後さらに活用機会が増えていきそうです。