Core Web Vitals と画像最適化

一言まとめ

LCP 2.5s / INP 200ms / CLS 0.1 が閾値。LCP 画像には fetchpriority="high" を付けて lazy にしない、背景画像を LCP 要素にしない、width / height を明示する。フォーマットは AVIF → WebP → JPEG のフォールバックチェーン。

作成 2026.04.19 · 更新 2026.10.17 · #performance#core-web-vitals#images#lcp

調査時点: 2026-04。サポート率と統計は当時の値。

Core Web Vitals は、Google が定める Web ページの利用体験を測る主要指標群。LCP は主なコンテンツの表示速度、INP は操作への応答性、CLS は表示中のレイアウトのずれを測る。

閾値#

INP が FID を置き換えたのは 2024-03。

指標	Good	Poor
LCP	2.5s 以下	4.0s 超
INP	200ms 以下	500ms 超
CLS	0.1 以下	0.25 超

2025 Web Almanac では、モバイルページの 77% が INP Good、高トラフィック上位 1,000 サイトでは 53%。全指標 Good のサイトは全体の 47%。

画像フォーマット#

AVIF: サポート 93.8%(2025-09)、JPEG 比で 50% 前後削減。
WebP: 95.29%。当時もっとも安全なモダンフォーマット。
<picture> で AVIF → WebP → JPEG / PNG の順にフォールバックする。

1
<picture>
2
  <source srcset="hero.avif" type="image/avif">
3
  <source srcset="hero.webp" type="image/webp">
4
  <img src="hero.jpg" alt="..." width="800" height="1200">
5
</picture>

LCP 画像の扱い#

LCP 画像には fetchpriority="high" を付け、loading="lazy" を付けない。lazy-load した LCP 画像の Good 率は 65%、preload した場合は 83%。
折り返し以降の画像は loading="lazy" + decoding="async"。
CSS の background-image を LCP 要素に使わない。発見が遅れ、読み込みが遅れ、レスポンシブなバリアントも指定できない。
width / height 属性を明示して CLS を防ぐ(デスクトップの 65% がまだ省略している)。

更新履歴#

2026-04-19: 初版(ローカル調査ノート)
2026-10-17: Wiki へ移植、概念ページとして再構成。冒頭に定義を追加

Core Web Vitals と画像最適化

閾値#

画像フォーマット#

LCP 画像の扱い#

関連#

更新履歴#

出典

同じトピック — Web