Largest Contentful Paint (LCP)
Largest Contentful Paint（LCP）は、ナビゲーション開始からビューポート内で最大の可視要素のレンダリングが完了するまでの時間を測定するCore Web Vitalsの指標です。これは「ページがユーザーにとっていつ読み込まれたと感じられるか」を示すGoogleの主要な代理指標です。
Largest Contentful Paint（LCP）は、ナビゲーション開始からビューポート内で最大の可視要素のレンダリングが完了するまでの時間を測定するCore Web Vitalsの指標です。これは「ページがユーザーにとっていつ読み込まれたと感じられるか」を示すGoogleの主要な代理指標です。
なぜ重要なのか
LCPはCore Web Vitalsの3つの指標の1つであり、Googleが確認したランキングシグナルです。Googleのしきい値は、良好が2.5秒以下、改善が必要が2.5〜4.0秒、不良が4.0秒超です。「良好」の範囲にあるページは、測定可能なほど直帰率が低く、コンバージョンが高くなります。また、75パーセンタイルでLCPが基準を満たさないと、競争の激しいクエリでランキングが抑制される可能性があります。
「最大の要素」とは何か
LCPは、可視ビューポート内で描画された最大の要素を追跡します。対象となる候補には、<img>、<video> のポスターフレーム、CSSの url() で読み込まれた背景画像、ブロックレベルのテキストノードが含まれます。「最大の」要素は読み込み中に変わることがあり、LCPは最終的に最大となった要素を採用します。
LCPが遅くなるよくある原因
サーバー応答が遅い（TTFB）: HTMLが到着するまでに1.5秒かかる場合、LCPを2.5秒未満にすることはできません。
レンダリングを妨げるリソース: head内の同期的なCSSやJSが、最初の描画を遅らせます。
最適化されていない画像: ヒーロー画像はしばしばLCP要素になります。サイズが大きすぎる、圧縮されていない、または読み込みが遅い画像が、LCPの失敗のほとんどを占めます。
クライアントサイドレンダリング: ハイドレーション後にJSでレンダリングするSPAフレームワークは、LCPを「良好」のしきい値を大きく超えて押しやります。
LCP要素の遅延読み込み: ヒーロー画像に loading="lazy" を追加するのはよくある間違いです。LCPが測定するまさにその要素を遅らせてしまいます。
LCPの改善方法
ヒーロー画像をプリロードする: <link rel="preload" as="image" href="..."> により、ブラウザが先行して読み込みを開始できます。
最新の画像フォーマットを使う: WebPやAVIFは、JPEGに比べてペイロードを30〜50%削減します。
ヒーロー画像に fetchpriority="high" を追加することで、他のリソースより先に読み込まれるようにします。
CDNから配信することで、遠隔地のユーザーに対するTTFBを短縮します。
重要なCSSをインライン化し、残りを遅延させます。
SSRまたは静的生成を使うことで、コンテンツ量の多いページではクライアントサイドレンダリングを避けます。
積極的にキャッシュすることで、再訪問者に対してエッジで対応します。
LCPの測定
フィールドデータ: Chrome UX Report（CrUX）、Google Search ConsoleのCore Web Vitalsレポート、PageSpeed Insights。これらは実際のユーザーを反映します。
ラボデータ: Lighthouse、WebPageTest、Chrome DevToolsのPerformanceパネル。再現可能ですが合成的なデータです。
Googleはフィールドデータの75パーセンタイルでランク付けするため、合成テストだけでは不十分です。
Sources: