まず結論
LCP画像は、軽くして、早く読み込み、レイアウトを先に確保することが重要です。
トップページの大きな画像、ヒーロー画像、ファーストビューのメインビジュアルは、LCP対象になることがあります。
LCP画像が遅いと、ページ全体が遅く感じられます。
LCP画像を探す
LighthouseやDevTools Performanceで、LCP対象の要素を確認できます。
よく対象になるもの:
- ヒーロー画像
- 大きな見出し
- メインカード画像
- ファーストビューの背景画像
まず「どれがLCPなのか」を見ます。違う画像を最適化しても、体感速度に効きにくいことがあります。
画像形式を見直す
写真なら、PNGのままにしないことが大切です。
| 形式 | 向いているもの |
|---|---|
| JPEG | 写真 |
| WebP | 写真の軽量化 |
| AVIF | さらに高圧縮な写真 |
| PNG | 透過や図 |
| SVG | ロゴやアイコン |
ヒーロー写真がPNGで数MBある場合、WebPやJPEGにするだけで大きく改善することがあります。
表示サイズに合わせる
スマホで横390px程度に表示する画像に、横3000pxの画像をそのまま配ると無駄があります。
理想は、画面サイズに応じて適切な画像を配ることです。
<img
src="/images/hero-1200.webp"
width="1200"
height="800"
alt="学習風景"
/>
必要に応じて、srcset や <picture> で出し分けます。
lazyにしない
LCP対象の画像は、最初に必要な画像です。
そのため、通常は loading="lazy" にしません。
<img
src="/images/hero.webp"
loading="eager"
fetchpriority="high"
width="1200"
height="800"
alt=""
/>
下の方にある画像にはlazyが有効ですが、ファーストビューの主役画像には逆効果になることがあります。
CSS背景画像に注意
ヒーロー画像をCSSの background-image にすると、ブラウザが重要画像として見つけるタイミングが遅くなることがあります。
.hero {
background-image: url("/images/hero.webp");
}
重要な画像なら、img 要素で置く方が制御しやすい場面があります。
widthとheightを指定する
画像には、表示比率が分かるように width と height を入れます。
<img src="/images/hero.webp" width="1200" height="800" alt="" />
これにより、画像読み込み前に領域を確保しやすくなります。CLS、つまりレイアウトのズレも防ぎやすくなります。
ポイント: LCP画像は「遅延しない」「重くしない」「場所を確保する」の3つを先に見ます。
まとめ
LCP画像を速くするには、形式、サイズ、読み込み優先度、lazy設定、width/heightを確認します。
トップ画像はサイトの印象にも速度にも効くため、見た目を保ちながらファイルサイズを下げるのが重要です。
