TL;DR
ページの読み込みが始まってから、ビューポート内に見えている最も大きな画像やテキストブロックが描画されるまでの時間。つまり、メインコンテンツが表示されるまでの時間を表す。Core Web Vitals の 1 つである。
仕組み
LCP の候補になるのは、<img> 要素、<svg> 内の <image> 要素、<video> 要素、url() で読み込んだ背景画像を持つ要素、テキストを含むブロックレベルの要素である。web.dev では、ページ読み込みの 75 パーセンタイルで 2.5 秒以下を良好、4.0 秒を超えると不良としている。
例
Time to First Byte と同じく、各ブラウザの開発者ツールで確認できる。Lighthouse でも測定でき、LCP はパフォーマンスのスコアに反映される。
Next.js の next/image では、LCP 要素になる画像に priority を付けると優先して読み込まれ、LCP の改善が期待できる。
注意点
Chrome DevTools の「パフォーマンス分析情報」パネルはサポートが終了し、2024 年に削除される予定とされている。今後は「パフォーマンス」パネルに Lighthouse の分析が統合される。
自分の理解
パフォーマンス分析情報パネルが削除される予定なので、LCP は Lighthouse で測定したほうが良さそうだ。