LCPの「良好」スコアの基準は？

LCPは2.5秒以内が「良好」、4秒以内が「改善が必要」、4秒超が「低い」と評価されます。画像が原因でLCPが遅い場合、画像圧縮とfetchpriority="high"の設定だけで1〜3秒の改善が見込めるケースがあります。

fetchpriority属性はすべてのブラウザで使えますか？

2026年3月時点で、Chrome 101+、Edge 101+、Safari 17.2+、Firefox 132+が対応しています。未対応ブラウザでは属性が無視されるだけで副作用はないため、安全に導入できます。

CLSスコアが0.1を超えています。原因の特定方法は？

Chrome DevToolsのPerformanceタブで「Layout Shift」を確認します。シフトの原因となった要素がハイライトされます。画像の場合はwidth/height未指定が最も多い原因です。Web Font、動的コンテンツ挿入、広告もCLSの原因になり得ます。

画像圧縮だけでCore Web Vitalsは改善しますか？

LCP画像の圧縮は最も効果の高い施策の一つですが、それだけで全指標が改善するわけではありません。CLS対策にはwidth/heightの指定、INP対策にはJavaScriptの最適化も必要です。ただし、LCP画像のファイルサイズ削減は最優先で取り組むべき施策です。

Core Web VitalsはSEOにどの程度影響しますか？

GoogleはCore Web Vitalsをランキングシグナルの一つとして使用しています。ただし、コンテンツの関連性やE-E-A-Tなど他のシグナルの影響のほうが大きいです。同程度のコンテンツ品質であれば、Core Web Vitalsが良いサイトが優先されるという位置づけです。

2026年版 ToolShare Lab / Guide

Core Web Vitals画像対策
LCP・CLSを改善する具体的手順

Core Web Vitalsの3指標のうち、LCP（Largest Contentful Paint）とCLS（Cumulative Layout Shift）は画像の扱い方に大きく左右される。Googleの調査では、LCPの要素が画像であるページは全体の70%以上。画像の最適化はCore Web Vitals改善の最優先事項だ。この記事では、LCP・CLS・INPそれぞれの指標と画像の関係、fetchpriority属性、preload、画像圧縮による具体的な改善手順を解説する。

読了時間: 約7分更新日: 2026年3月25日

結論: LCP改善には「画像圧縮 + fetchpriority="high" + preload」の3点セットが有効。CLS対策にはwidth/height属性の指定が必須。まずはToolShare Labの画像圧縮ツールでLCP画像のファイルサイズを50〜90%削減し、fetchpriority属性で優先読み込みを指示するだけで、スコアが大幅に改善する。

Core Web Vitalsと画像の関係

Core Web Vitalsは、Googleがページ体験を評価するための3つの指標だ。2026年現在の評価基準と「良好」の閾値は以下の通りだ。

指標	意味	良好	画像との関連
LCP	最大コンテンツの表示時間	2.5秒以内	非常に高い（LCP要素の70%以上が画像）
CLS	レイアウトの累積シフト量	0.1以下	高い（width/height未指定の画像が主因）
INP	インタラクションの応答速度	200ms以内	間接的（巨大画像のデコードがメインスレッドをブロック）

LCP改善：画像を速く表示する

LCPは「ビューポート内で最も大きなコンテンツが表示されるまでの時間」だ。多くのページでは、ヒーロー画像やアイキャッチ画像がLCP要素になる。LCPを改善するには、LCP画像のファイルサイズを削減し、ブラウザに優先的に読み込ませる必要がある。

手順1: LCP画像を特定する

Chrome DevToolsのPerformanceタブ、またはPageSpeed InsightsでLCP要素を確認する。PageSpeed Insightsの「診断」セクションに「最大コンテンツの描画要素」として表示される。この画像が最適化のターゲットだ。

手順2: 画像を圧縮する

LCP画像のファイルサイズを可能な限り削減する。WebPまたはAVIFへの変換が最も効果的だ。ToolShare Labの画像圧縮ツールなら、ブラウザ内でWebP・AVIFへの変換と圧縮が同時に行える。目標はアイキャッチ100〜200KB以下、ヒーロー画像200KB以下。

手順3: fetchpriority="high" を指定する

LCP画像にfetchpriority="high"を指定すると、ブラウザがその画像の読み込みを他のリソースより優先する。2026年現在、全主要ブラウザがfetchpriority属性に対応している。

<img src="hero.webp" alt="メインビジュアル" width="1200" height="630"
     fetchpriority="high" decoding="async">

fetchpriority="high"は1ページ1〜2枚まで

すべての画像にfetchpriority="high"を付けると優先順位の意味がなくなる。LCP画像にのみ指定する。それ以外の画像にはloading="lazy"を付けてリソースを節約する。

手順4: preloadで先読みする（上級者向け）

LCP画像がCSS背景画像や動的に読み込まれる場合、ブラウザがHTMLを解析しただけでは画像のURLを特定できない。この場合、link rel="preload"をhead内に記述して、画像の先読みを指示する。

<head>
  <link rel="preload" as="image" href="/images/hero.webp"
        type="image/webp" fetchpriority="high">
</head>

preloadの濫用に注意

preloadは強力だが、使いすぎると他のリソースの読み込みを圧迫する。LCP画像や重要なフォントなど、本当に優先すべきリソースに限定して使う。3個以上のpreloadがある場合は見直しを推奨する。

手順5: lazy loadingをLCP画像に付けない

loading="lazy"をLCP画像に設定してしまうのは、LCP悪化の最も多い原因の一つだ。lazy loadingが指定された画像は、ビューポートに近づくまで読み込みが遅延される。LCP画像はloading="eager"（デフォルト）のままにする。

CLS改善：レイアウトシフトを防ぐ

CLSは「ページの読み込み中にレイアウトが予期せずズレる量」を数値化したものだ。画像に起因するCLSの大半は、width・height属性の未指定が原因だ。

対策1: width・heightを必ず指定する

img要素にwidth・height属性を指定すると、ブラウザは画像の読み込み前にアスペクト比を計算してスペースを確保する。これだけで画像起因のCLSをほぼゼロにできる。

<!-- OK: width/heightを指定 -->
<img src="photo.webp" alt="説明" width="800" height="600"
     loading="lazy" decoding="async">

<!-- NG: width/heightなし → CLSが発生 -->
<img src="photo.webp" alt="説明" loading="lazy">

対策2: CSSでaspect-ratioを使う

CSSのaspect-ratioプロパティを使えば、コンテナ側でアスペクト比を固定することもできる。レスポンシブ画像やCMS出力のimg要素にwidth/heightが付かない場合の対策として有効だ。

.article__image {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

対策3: 画像の読み込み失敗に備える

画像がエラーで読み込めなかった場合にもレイアウトが崩れないよう、CSSでmin-heightを指定するか、背景色を設定しておく。ユーザー体験とCLSスコアの両方を守れる。

INPと画像の関係

INP（Interaction to Next Paint）はユーザーのインタラクションに対する応答速度を測定する指標だ。画像との直接的な関連は小さいが、以下のケースで影響が出る。

巨大な画像のデコード: 5MB超の未圧縮画像をブラウザがデコードすると、メインスレッドがブロックされ、クリックやスクロールへの応答が遅れる
画像ギャラリーのインタラクション: ライトボックスの開閉時に大きな画像を読み込むと、応答が遅延する。事前のpreloadまたは低解像度プレースホルダーで対策する
decoding="async"の活用: img要素にdecoding="async"を指定すると、画像のデコードがメインスレッド外で行われ、INPへの影響を軽減できる

Core Web Vitals画像対策チェックリスト

対策	対象指標	優先度
LCP画像をWebP/AVIFで圧縮する	LCP	最優先
LCP画像にfetchpriority="high"を指定	LCP	最優先
LCP画像にloading="lazy"を付けない	LCP	最優先
全img要素にwidth・heightを指定	CLS	最優先
ビューポート外の画像にloading="lazy"を追加	LCP（間接）	高
全img要素にdecoding="async"を指定	INP	高
CSS背景のLCP画像にpreloadを追加	LCP	中（該当時）
pictureタグでAVIF→WebP→JPEGフォールバック	LCP	中

LCP画像を今すぐ圧縮する

LCP改善の第一歩は画像圧縮。JPEG・PNGをWebP・AVIFに変換して50〜90%軽量化。枚数・サイズ制限なし、サーバー送信なし。Core Web Vitalsのスコアを改善しよう。

画像圧縮ツールを開く

よくある質問

LCPの「良好」スコアの基準は？: LCPは2.5秒以内が「良好」、4秒以内が「改善が必要」、4秒超が「低い」と評価される。画像が原因でLCPが遅い場合、画像圧縮とfetchpriority="high"の設定だけで1〜3秒の改善が見込めるケースがある。
fetchpriority属性はすべてのブラウザで使えますか？: 2026年3月時点で、Chrome 101+、Edge 101+、Safari 17.2+、Firefox 132+が対応している。未対応ブラウザでは属性が無視されるだけで副作用はないため、安全に導入できる。
CLSスコアが0.1を超えています。原因の特定方法は？: Chrome DevToolsのPerformanceタブで「Layout Shift」を確認する。シフトの原因となった要素がハイライトされる。画像の場合はwidth/height未指定が最も多い原因だ。Web Font、動的コンテンツ挿入、広告もCLSの原因になり得る。
画像圧縮だけでCore Web Vitalsは改善しますか？: LCP画像の圧縮は最も効果の高い施策の一つだが、それだけで全指標が改善するわけではない。CLS対策にはwidth/heightの指定、INP対策にはJavaScriptの最適化も必要だ。ただし、LCP画像のファイルサイズ削減は最優先で取り組むべき施策だ。
Core Web VitalsはSEOにどの程度影響しますか？: GoogleはCore Web Vitalsをランキングシグナルの一つとして使用している。ただし、コンテンツの関連性やE-E-A-Tなど他のシグナルの影響のほうが大きい。「同程度のコンテンツ品質であれば、Core Web Vitalsが良いサイトが優先される」という位置づけだ。