定義
ページを開いたとき「今、画面が出た」とユーザーが感じる時点を数値で測りたいときに使う指標である。Largest Contentful Paint（LCP、「最も大きなコンテンツが描かれるまでの時間」）は、ビューポート（viewport、今画面に実際に見えている領域）の中で最も大きなコンテンツ要素が画面に描かれるまでにかかった時間である。Core Web Vitals（Googleが定めたユーザー体感性能指標の束）の1つである。
なぜ必要か
最初のバイトが速く届いても、肝心のユーザーが見たかった大きな画像や見出しが遅く出れば、ページは「遅い」と感じられる。サーバー応答時間（TTFB）や最初のピクセルが打たれる時点（FCP）だけではこの体感を捉えられない。LCPは「本文で一番大きな塊がいつ見えたか」を測り、ユーザーが実際にコンテンツを認知する瞬間に最も近い値を与える。
動作原理
画像、動画poster（再生前のプレビューフレーム）、背景画像、ブロックレベルのテキストブロックなどがLCP候補になる。ブラウザはレンダリングを進めながら「これまで描かれたもののうち最も大きな要素」を更新し続け、ユーザー入力（スクロール・クリック）が入ると更新を止めて最後の値を確定する。critical-rendering-path（HTML・CSSをパースして画面を描くまでのブラウザの処理順序）を経て要素が実際に描画可能な（paintable）状態になって初めて測定される。
実務での適用
ヒーロー画像のようにLCPになる可能性が高い要素は、優先度を上げて早く取得する。Next.js Imageのpriority属性、レスポンシブ画像が正しいサイズを選ぶようにするsizes属性、CDNキャッシュを適用する。リソース優先度の調整はresource-priorityの文書を参照する。
トレードオフ
過度なpreload（ブラウザに「このリソースを先に取得しておけ」と指示すること）は帯域幅を先に占有して他のリソースをかえって遅らせることがある。本当のLCP候補1つだけに適用するのが基本である。
使ってはいけない場合
- LCP要素が折りたたまれた領域（ビューポート外）にあり、事実上ユーザーが最初に見ない場合 — 優先度を上げても体感の改善がない。
- テキストのみの軽いページ — フォント読み込みがボトルネックであり、画像の優先度調整が要点ではない。
よくある間違い
- LCP要素（初回画面のヒーロー画像など）を
loading="lazy"で遅延読み込みし、肝心の最も重要な要素が遅く出る。 - LCP候補でない画像にまで
priorityを乱用し、優先度シグナルが希釈される。
関連概念
- critical-rendering-path — 要素がpaintable状態になるまでのレンダー順序
- resource-priority — LCPリソースを先に取得する優先度調整