Lazy-loading media
メディア要素（iframe, img）の loading="lazy" を活用し、ビューポート外のコンテンツの読み込みを遅延してパフォーマンスを向上させます。
概要
メディア要素（iframe, img）の loading="lazy" を活用し、ビューポート外のコンテンツの読み込みを遅延してパフォーマンスを向上させます。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 未対応
基本構文
HTML
<img src="photo.jpg" loading="lazy" alt="遅延読み込み画像"
width="800" height="600">
<iframe src="https://example.com" loading="lazy"
width="600" height="400"></iframe>実務での使いどころ
-
Lazy-loading media の活用
メディア要素の遅延読み込み。iframe/imgのloading=lazy相当のメディア対応。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。