LCP（Largest Contentful Paint） とは？

ページを開いたとき、一番大きなコンテンツが画面に表示されるまでの時間を測る指標だよ。ヒーロー画像や大きな見出しテキストが対象になることが多いんだ。

2.5秒以内なら「良好」、4秒を超えると「要改善」と判定されるよ。GoogleのCore Web Vitalsの一つだから、SEOにも直接影響するんだ。

画像の最適化、サーバーレスポンスの高速化、レンダリングをブロックするCSS・JSの削減が基本だよ。特に大きな画像には loading="lazy" ではなく優先読み込みを設定するのがポイントだね。

FCPは「最初の何かが表示されるまでの時間」で、LCPは「メインコンテンツが表示されるまでの時間」だよ。FCPが速くてもLCPが遅いと、ユーザーは「まだ読み込み中かな」と感じてしまうんだ。

<img>要素、<video>のポスター画像、CSSのbackground-image、そしてブロックレベルのテキスト要素が対象だよ。ビューポート内で最も面積が大きい要素が選ばれるんだ。途中でより大きい要素が表示されたら、そちらに更新される仕組みだね。