公開日: 2025 年 10 月 8 日
Largest Contentful Paint(LCP)は、ユーザーが最初にページに移動したタイミングと比較して、ビューポート内に表示される最も大きな画像、テキスト ブロック、または動画のレンダリング時間を測定する指標です。LCP を最適化する際は、これをサブパートに分解すると便利です。LCP の各サブパートには、それに適した改善戦略があります。理想的なのは、LCP 時間のほとんどがリソースの読み込みに使われ、遅延に費やされないことです。
サブパーツは次のとおりです。
LCP サブパート | 説明 |
---|---|
最初のバイトまでの時間(TTFB) | ユーザーがページの読み込みを開始してから、ブラウザが HTML ドキュメント レスポンスの最初のバイトを受信するまでの時間。 |
リソース読み込みの遅延 | TTFB からブラウザが LCP リソースの読み込みを開始するまでの時間。LCP 要素のレンダリングにリソースの読み込みが必要ない場合(たとえば、要素がシステム フォントでレンダリングされるテキストノードの場合)、この時間は 0 になります。 |
リソースの読み込み時間 | LCP リソース自体の読み込みにかかる時間。LCP 要素のレンダリングにリソースの読み込みが必要ない場合、この時間は 0 になります。 |
要素のレンダリングの遅延 | LCP リソースの読み込みが完了してから LCP 要素のレンダリングが完全に完了するまでの時間。 |
この分析情報を渡す方法
この分析情報は、情報提供を目的として常に表示されます(LCP が測定された場合)。
LCP を 2.5 秒以下にすることを目標とし、各フェーズの時間をできるだけ短縮します。特に遅延フェーズの短縮が重要です。具体的な戦略については、Largest Contentful Paint を最適化するをご覧ください。