Webサイトの読み込み速度を改善したい時に、もっとも簡単で効果が高い施策のひとつが 画像の遅延読み込み（Lazy Load） です。HTMLの画像タグに loading="lazy" を付けるだけで、多くの画像を一度に読み込まず、必要になったタイミングで読み込みが開始されるようになります。
この記事では、初心者でも理解しやすいように loading="lazy" の正しい使い方・注意点・効果 をまとめます。
■ loading="lazy" とは？
「lazy＝怠惰」という言葉のとおり、必要になるまで画像を読み込まない仕組みです。
ページを開いた瞬間にすべての画像を読み込むのではなく、ユーザーがその画像が見える位置までスクロールしたときに初めて読み込みが行われます。
これにより、以下のようなメリットがあります：
ページの読み込み速度が向上
初期表示が軽くなり、離脱率が下がる
モバイルユーザーの通信量が節約できる
Google Lighthouse や Core Web Vitals のスコア改善に効果大
■ 正しく使える場面
基本的にはほぼすべての画像に使えますが、とくに効果が大きいのは次のような場所です。
下にスクロールしないと見えない位置の画像
ブログ記事の中に大量にある写真
LP や企業サイトの実績写真・ギャラリー
WordPressのサムネイルや一覧ページの画像
ページ下部に画像が多いほど、効果が高くなります。
■ 逆に「lazy」を使わない方がいいケース
万能ではなく、以下の場面では付けない方が良いこともあります。
1. ファーストビューの画像
ユーザーがページを開いて最初に目にする場所。
ここに lazy を付けると、読み込みが遅く見えて逆効果です。
2. 背景画像（CSSの background-image）
HTML属性ではなく CSS で指定している画像には lazy は効きません。
3. ロゴ・ヘッダーアイコンなど
ページ上部で最初に表示されるものは即座に読み込む方がUXが良いです。
■ どのくらい効果があるの？
サイト速度診断ツール（Lighthouse / PageSpeed Insights）でも、
「画像を遅延読み込みにすると改善できます」 と推奨されているほど効果的です。
画像が多いサイトでは、体感でも読み込みがかなり早くなり、
Googleのスコア改善にもつながります。
■ よくある疑問
● SEOに影響はある？
Googleが公式に推奨しているため、問題どころか推奨事項です。
● alt 属性や width / height と併用してもOK？
もちろんOK。むしろ width と height は必須級。
CLS（レイアウトシフト）の防止になるため、SEOにも大きく影響します。
● WebP との相性は？
非常に良いです。
軽量な WebP に lazy を合わせると、表示速度がかなり向上します。
■ まとめ
loading="lazy" は、HTMLの非常に簡単な設定でありながら、
表示速度・SEO・UX の改善に大きく貢献する機能です。
下部画像には積極的に使う
ファーストビュー画像には付けない
width / height を必ず指定する
WebPと組み合わせると効果倍増
初心者でもすぐに取り入れられるので、
Web制作をするなら必ず覚えておきたい基本テクニックです！
