Largest Contentful Paint（LCP）は、Lighthouse レポートのパフォーマンス セクションでトラッキングされる指標の 1 つです。各指標には、ページの読み込み速度に関するなんらかの要素が含まれます。
Lighthouse では LCP が数秒で表示されます。
LCP の測定対象
LCP は、ビューポート内の最大のコンテンツ要素が画面にレンダリングされるタイミングを測定します。これは、ページのメイン コンテンツがユーザーに表示されるおおよそのタイミングです。LCP の決定方法について詳しくは、Largest Contentful Paint の定義をご覧ください。
Lighthouse による LCP スコアの算出方法
Lighthouse では Chrome のトレースツールから LCP データが抽出されます。
LCP スコアの解釈方法については、以下の表をご覧ください。
| LCP 時間 （秒） |
色分け |
|---|---|
| 0-2.5 | 緑（高速） |
| 2.5-4 | オレンジ（中） |
| 4 歳以上 | 赤（遅い） |
LCP スコアを改善する方法
LCP が画像の場合、タイミングは 4 つのフェーズに分割できます。どのフェーズに時間がかかっているかを知ることで、LCP を最適化できます。Lighthouse の「Largest Contentful Paint 要素」の診断情報に、LCP 要素とフェーズの内訳が表示されます。
| LCP フェーズ | 説明 |
|---|---|
| 最初のバイトまでの時間（TTFB） | ユーザーがページの読み込みを開始してから、ブラウザが HTML ドキュメント レスポンスの最初のバイトを受け取るまでの時間。TTFB の詳細。 |
| 読み込み遅延 | TTFB とブラウザが LCP リソースの読み込みを開始するまでの時間の差。 |
| 読み込み時間 | LCP リソース自体を読み込むのにかかる時間。 |
| レンダリング遅延 | LCP リソースの読み込みが完了してから LCP 要素が完全にレンダリングされるまでの差。 |