Lazy-loading images and iframes

概要

loading="lazy" 属性は画像やiframeの読み込みを、ビューポートに近づくまで遅延させます。初期ページ読み込みの高速化に貢献します。

対応ブラウザ

基本構文

<!-- ファーストビュー外の画像に適用 -->
<img src="photo.jpg" alt="写真" loading="lazy"
  width="800" height="600">

<iframe src="https://example.com" loading="lazy"
  width="600" height="400"></iframe>

実務での使いどころ

• Lazy-loading images and iframes の活用

  画像やiframeの遅延読み込み。パフォーマンス最適化に使用。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — Lazy-loading images and iframes
• Can I use — Lazy-loading images and iframes