30秒で理解
LCP（Largest Contentful Paint）は、ページの読み込み開始から、画面内で最も大きい画像・テキストブロック・動画が描画されるまでの時間です。ユーザーが「このページは表示された」と感じるまでの速さを確認する指標なので、単にHTMLの読み込み完了を測る数字ではありません。
Googleの目安では、ページ訪問の75パーセンタイルで2.5秒以下が良好、4秒を超えると不良です。モバイルとデスクトップは分けて見ます。
店に入ってから、目当ての商品が棚に見えるまでの時間です。入口のドアが開いていても、商品が見えなければ「開店した」とは感じません。LCPは、最初の文字が出た時刻ではなく、主な内容が見えた時刻を見ます。
どういう仕組みか
ブラウザは読み込み中に、画面内に現れた候補を順に記録します。その中から、その時点で最も大きい対象がLCP候補になります。後から大きなヒーロー画像や見出しが描画されれば、候補は更新されます。
| 対象 | LCP候補になるもの | 例 |
|---|---|---|
| 画像 | img、SVG内のimage、背景画像 | ファーストビューの写真、商品画像 |
| テキスト | 画面内の大きなテキストブロック | ページタイトル、記事の見出し |
| 動画 | ポスター画像または最初のフレーム | ファーストビューの動画 |
LCPの時間には、接続、リダイレクト、サーバーが最初のデータを返すまでの時間、対象リソースの取得、描画までが影響します。画像だけを圧縮しても、HTMLの返却やCSS・JavaScriptの待ち時間が長ければ、数字は大きく残ります。
どこで見えるか
実ユーザーの体験を確認する場所と、原因を調べる場所を分けます。
| 知りたいこと | 開く場所 | そこで見るもの |
|---|---|---|
| 問題のあるURL群 | Search Console → Core Web Vitals | モバイル／デスクトップ別のLCP状態とURLグループ |
| URL単位の実ユーザーデータ | PageSpeed Insights | フィールドデータのLCP、対象URLのデータかどうか |
| 原因の候補 | PageSpeed Insights → ラボデータ | Largest Contentful Paint element、診断、機会 |
| 手元での再現と内訳 | Chrome DevTools → Performance | LCP要素、ネットワークウォーターフォール、描画時刻 |
| 推移の確認 | CrUX Vis → Loading Performance | URL／origin、端末、75パーセンタイルの推移 |
Search ConsoleやCrUXのフィールドデータは実際の利用者の集計です。PageSpeed InsightsやDevToolsのラボ測定は原因の切り分けに便利ですが、端末・通信・キャッシュなどの条件が違うため、フィールドデータと同じ値になるとは限りません。
よくある誤解
LCPは「ページ全体が完全に読み終わった時刻」ではありません。LCPが記録された後に、広告、埋め込み、遅延読み込みの要素が表示されることはあります。
PageSpeed Insightsのスコアが良いだけで、実ユーザーも速いとは決めないでください。まずフィールドデータのLCPを確認し、ラボデータは原因の候補を探すために使います。データがない場合は「問題なし」ではなく、URLやoriginに十分な利用データがない可能性があります。
また、LCP要素はページごとに異なります。あるページではヒーロー画像、別のページでは見出しがLCPになるため、「画像を軽くすれば必ず直る」とは限りません。対象URLのLCP elementを先に確認します。
これを踏まえて何をするか
LCPが遅いURLを見つけたら、次の順に画面を開いて、変更対象を1つに絞ります。
| 順番 | 開く場所 | 操作 | 判定 |
|---|---|---|---|
| 1 | Search Console → Core Web Vitals | モバイルとデスクトップを分け、LCPがPoorのURLグループを選ぶ | どの端末・URL群で遅いか分かる |
| 2 | Search Consoleの詳細画面 | 例のURLを1つコピーしてPageSpeed Insightsに入力する | URL単位のフィールドデータを確認できる |
| 3 | PageSpeed Insights | フィールドデータのLCPを確認し、ラボデータの「Largest Contentful Paint element」を開く | LCPになった要素が画像・テキスト・動画のどれか分かる |
| 4 | PageSpeed Insights → 診断 | LCP要素に対応する診断を開く。画像ならサイズ・形式・読み込み遅延、HTMLならサーバー応答とリソース順を見る | 修正するファイルや配信設定を絞れる |
| 5 | Chrome DevTools → Performance | 同じURLを記録し、LCPマーカーとNetworkの対象リソースを照合する | ラボで再現できる待ち時間を特定できる |
| 6 | 修正後のPageSpeed Insights | 同じURLで再測定し、フィールドデータはSearch Consoleで後日同じURL群を再確認する | ラボの変化と実ユーザーの変化を分けて追える |
最初の一手は、Search Consoleの「Core Web Vitals」でモバイルのLCPがPoorになっているURLグループを開くことです。PoorがなければNeed improvementの行を開き、例のURLをPageSpeed Insightsへ貼り付けて、フィールドデータのLCPと「Largest Contentful Paint element」を続けて確認してください。