2026年現在、多くのブラウザやWordPressなどのCMSが、標準で画像の遅延読み込みをサポートしています。特別なJavaScriptライブラリを導入しなくても、imgタグに属性を1つ加えるだけでページの読み込み速度を改善できます。
しかし、システムの自動付与機能に任せきりにしていると、かえってサイトの品質やSEOスコアを損なうリスクがあります。本記事では、画像のサイズ指定の重要性を中心に、正しい設定方法を解説します。
loading=”lazy”属性とは？
loading=”lazy”は、ブラウザに対して「その画像が画面（ビューポート）に表示される直前まで読み込みを待機する」ように指示を出すためのHTML属性です。JavaScriptに依存せず、ブラウザの標準機能として動作するため、最も軽量で安全な手法とされています。
Lazy Loadの詳しい概要は以下の記事で解説しています。ぜひご覧ください。
自動追加機能の落とし穴
現在のWordPressなどの主要なCMSでは、画像を追加した際に「loading=”lazy”」という記述を自動で生成する仕組みが備わっています。しかし、多くの場合、単に属性を付与するだけで、画像の表示サイズまでは適切に管理してくれません。
属性が自動で付与されているからといって、そのまま放置するのは危険です。特に画像の高さがブラウザに伝わっていない状態で遅延読み込みを行うと、レイアウトシフトを引き起こします。
そのため、画像には必ずwidth属性とheight属性を指定してください。
width属性とheight属性を必ず指定すべき理由
遅延読み込みを有効にする際は、必ずimgタグに「width（幅）」と「height（高さ）」の数値を明示してください。
レイアウトシフト（表示のガクつき）の防止
サイズ指定がない場合、ブラウザは画像データのダウンロードが完了するまで、その画像がどれくらいの面積を占めるかを把握できません。そのため、画像が読み込まれる前の高さを「0」として計算します。
ユーザーがスクロールして画像が読み込まれた瞬間に、突然画像が表示され、それ以降のテキストやボタンがガクンと押し下げられる現象が発生します。これを「レイアウトシフト」と呼びます。
CLSスコアと検索順位への影響
Googleのコアウェブバイタル指標の一つに、CLS（累積レイアウトシフト）があります。サイズ指定のない遅延読み込みはこのCLSの数値を著しく悪化させます。レイアウトが不安定なサイトはユーザーに誤操作を招くだけでなく、SEO評価においてマイナス要因となり、検索順位に悪影響を与える可能性があります。
正しく設定するための実務アクション
具体的な記述手順と、設定後の点検方法は以下の通りです。
1．imgタグに属性とサイズを記述する
画面外にある画像に対して、以下の3つの要素をセットで記述します。
記述例：
＜img src=”sample.jpg” loading=”lazy” width=”800” height=”600” alt=”画像の説明”＞CSSで記述する場合は、「max-width：100％；」「height：auto；」を設定しておけば、アスペクト比を維持したままレスポンシブ対応が可能です。現代のブラウザは、HTMLに書かれたwidthとheightの比率を見て、画像が届く前からスペースを正しく確保してくれます。
2．ファーストビューの画像から属性を外す
ページの最上部（ロゴ、メインビジュアルなど）にある画像には、あえて遅延読み込みを設定しないのが実務上の鉄則です。初期表示で最初に見える画像にまで遅延をかけると、LCP（最大視覚要素の表示時間）という指標が悪化し、表示がワンテンポ遅れてしまいます。
アクション：ページのメインビジュアル等には「loading=”eager”」を記述するか、属性自体を削除してください。
3．開発者ツールで点検する
設定後はブラウザの開発者ツール（F12キー）を開き「Performance」タブで、CLSの発生がないかを確認してください。画像が読み込まれるタイミングで他の要素が動いていなければ成功です。
まとめ
画像の遅延読み込みは、ただ導入すれば良いという段階から、いかにレイアウトを安定させて導入するかということが大切です。
自動付与機能に頼るだけでなく、すべての画像にwidthとheightを指定する。このシンプルなアクションの積み重ねが、GoogleのAIやクローラーに評価される高品質なWebサイトを支えます。
