LCP画像を速く表示する方法

入門 | 7分 で読める | 2026.07.10

公式ドキュメント
パフォーマンス

まず結論

LCP画像は、ページを開いてすぐ見える主役の画像です。 軽くするだけでなく、ブラウザに早く見つけてもらい、表示に必要な場所を先に確保します。

LCPを特定し、画像を早期発見して適切なサイズで優先取得し、表示領域を確保する流れ

最初にLCP要素を特定する

LighthouseまたはChrome DevToolsで、実際にLCPになった要素を確認します。ページによっては画像ではなく見出しがLCPになることもあります。画像でないなら、この記事の対策を先に適用しても効果は読めません。

画像を表示サイズに合わせる

横幅600pxで表示する画像に、元画像のままの4000px版を配信すると転送量が増えます。srcset と sizes で画面幅に応じた候補を用意し、実際に選ばれた画像サイズはNetworkパネルで確認します。

<img
  src="/hero-1200.webp"
  srcset="/hero-640.webp 640w, /hero-1200.webp 1200w"
  sizes="(max-width: 700px) 100vw, 700px"
  width="1200"
  height="675"
  alt="学習中の机の写真"
>

width と height は画像の縦横比をブラウザへ伝え、表示中のずれ（CLS）を減らします。

最初に見える画像はlazy loadingしない

LCP候補に loading="lazy" を付けると、読み込み開始を遅らせることがあります。最初の画面にない画像には有効ですが、ヒーロー画像には付けません。必要な場合だけ fetchpriority="high" やpreloadを使い、Networkで二重取得がないことを確認します。

<img src="/hero-1200.webp" fetchpriority="high" width="1200" height="675" alt="...">

CSS背景画像にも注意する

背景画像はHTMLのimgより発見が遅くなることがあります。内容を伝える大きな画像なら、img要素を選ぶ方が扱いやすい場合があります。装飾だけの画像は背景のままで構いません。

確認する順番

  1. LCP要素が何かを確認する
  2. 画像要求が遅く始まっていないかを見る
  3. 選ばれた画像のサイズと転送量を確認する
  4. 変更前後を同じ画面幅・同じ条件で比較する

まとめ

LCP画像の改善は「画像を圧縮する」だけでは終わりません。主役画像を特定し、適切な大きさを早く読み込み、表示領域を確保する順で確認します。

参考リソース

次に読む記事

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR