HTML
loading="lazy"が効かない
ファーストビューの画像に指定している
こんな症状
画像にloading="lazy"を付けたのに遅延読み込みされない。画像の最適化をしようとしたときに起きるよ。
まず試す
ファーストビューの画像から loading="lazy" を外し、スクロール下の画像にだけ付ける。
html
<img src="hero.jpg">
<img src="below.jpg" loading="lazy">これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓最初に見える画像に lazy を付けた
→ ファーストビューの画像は lazy が無視される。外す。 - ✓width/height が無い
→ <img> に width/height を付ける（位置計算とレイアウトシフト防止）。 - ✓効いているか分からない
→ Networkタブで画像の読み込みタイミングを確認する。
なぜ起きる？
ブラウザはファーストビュー（最初に画面に見える範囲）の画像に対してはloading="lazy"を無視するよ。すぐに表示する必要がある画像を遅延させると逆に表示が遅くなるからだ。また、width/heightが未指定だとブラウザが画像の位置を計算できず、遅延読み込みが正しく動作しないことがあるよ。
✕ エラーが起きるコード
<img src="hero.jpg" loading="lazy">
<!-- ファーストビューに lazy は不要 -->✓ 直したコード
<img src="hero.jpg">
<img src="below.jpg" loading="lazy">✅ 直ったか確認
Networkタブで、下部の画像がスクロール時に読み込まれればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- 画像が遅延読み込みされない — loading="lazy" が効いていない
- input要素のtype属性ミスで入力欄が意図通りにならない — type属性のスペルミス
- required属性が効かない（フォームバリデーション） — 送信のしかたがバリデーションを通っていない
- metaタグのviewportが効かない — viewport の指定が間違っている
- input の autocomplete が効かない — inputのautocomplete属性が効かない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説