loading="lazy" の正しい使い方

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制作をするなら必ず覚えておきたい基本テクニックです！