Largest Contentful Paint(LCP)は、Lighthouse レポートの [パフォーマンス] セクションで追跡される指標の一つです。各指標は、ページの読み込み速度の特定の側面をキャプチャします。
Lighthouse では、LCP は秒単位で表示されます。
LCP で測定される内容
LCP は、ビューポート内の最大のコンテンツ要素が画面にレンダリングされるタイミングを測定します。これは、ページのメイン コンテンツがユーザーに表示されるタイミングを推定します。LCP の決定方法について詳しくは、Largest Contentful Paint の定義をご覧ください。
Lighthouse が LCP スコアを決定する仕組み
Lighthouse は、Chrome のトレースツールから LCP データを抽出します。
次の表に、モバイルでの LCP スコアの解釈方法を示します。
LCP 時間 (秒) |
色分け |
---|---|
0 ~ 2.5 | 緑(高速) |
2.5-4 | オレンジ(中程度) |
4 名以上 | 赤(遅い) |
ウェブバイタル イニシアチブでは、基本的にモバイル デバイスの基準を使用するデバイスに関係なく同じ基準を推奨しています。ただし、Lighthouse はラボツールであるため、より高速なデスクトップ デバイスをテストする場合は、異なるしきい値を使用して厳格にテストすることをおすすめします。
次の表に、パソコンでの LCP スコアの解釈方法を示します。
LCP 時間 (秒) |
色分け |
---|---|
0 ~ 1.2 | 緑(高速) |
1.2-2.4 | オレンジ(中程度) |
2.4 より大きい | 赤(遅い) |
LCP スコアを改善する方法
LCP が画像の場合、タイミングは 4 つのフェーズに分けられます。どのフェーズに最も時間がかかっているかを把握すると、LCP を最適化できます。Lighthouse の [Largest Contentful Paint 要素] 診断には、LCP 要素とフェーズ別の内訳が表示されます。
LCP フェーズ | 説明 |
---|---|
Time to First Byte(TTFB) | ユーザーがページの読み込みを開始してから、ブラウザが HTML ドキュメント レスポンスの最初のバイトを受信するまでの時間。詳しくは、TTFB の詳細をご覧ください。 |
読み込み遅延 | TTFB と、ブラウザが LCP リソースの読み込みを開始した時点との差分。 |
読み込み時間 | LCP リソース自体の読み込みにかかる時間。 |
レンダリング遅延 | LCP リソースの読み込みが完了してから LCP 要素が完全にレンダリングされるまでの時間差。 |