画像がCore Web Vitalsに与える影響と、その改善方法
LCP（Largest Contentful Paint）の不合格の多くは画像が原因です。Core Web Vitalsが赤なら、原因はおそらく画像です。具体的な改善方法を解説します。
今すぐお試しください - 無料、登録不要。
画像をスマート圧縮 →画像とLCP（Largest Contentful Paint）
LCPは、表示される最大の要素が読み込み終わるまでの時間を測ります。ほとんどのページで、それは画像です。GoogleはLCPを2.5秒未満にすることを求めています。
LCPの改善方法：
画像とCLS（Cumulative Layout Shift）
CLSは予期しないレイアウトのずれを測ります。サイズ指定のない画像は、読み込まれた瞬間にページをずらしてしまいます。
CLSの改善方法：
- widthとheightを必ず指定：
<img width="800" height="600"> - CSSのaspect-ratioを使う：現代的な代替手段として
aspect-ratio: 16/9; - ファーストビューでは遅延読み込みしない：ヒーロー画像に
loading="lazy"を付けないこと
すぐできる改善チェックリスト
- すべての画像をスマート圧縮（最適な画質を自動で）
- 実際の表示サイズにリサイズ
- すべての
<img>タグにwidth/height属性を追加 - LCP画像をプリロード
- ファーストビューより下はすべて遅延読み込み
- PageSpeed Insightsで再テスト
よくある質問
良いLCPスコアとは？
2.5秒未満は「良好」（緑）、2.5〜4秒は「改善が必要」（黄）、4秒超は「不良」（赤）です。画像の最適化だけで赤から緑になることもよくあります。
すべての画像を遅延読み込みすべきですか？
いいえ！ファーストビューの画像（特にヒーロー画像やLCP画像）は遅延読み込みしないでください。最初は画面外にある画像だけを遅延読み込みします。やりすぎるとかえってLCPが悪化します。
準備はできましたか？100%無料、ブラウザで動作します。
画像をスマート圧縮 →