Largest Contentful Paint（LCP）

Largest Contentful Paint（LCP）は、ページの読み込み中に、ビューポート内で最も大きいコンテンツ要素が描画されるまでの時間を測る指標です。

zoom_in

意味

LCPはユーザーの体験を基準にした指標です。ページの描画中に候補が入れ替わることがあり、最終的な値は、操作前に表示された最大の要素で決まります。

フィールドのLCPの値は、複数の訪問をまたいだ体験を示します。単一の原因を特定するものではなく、検索順位を保証するものでもありません。

見極め方

ラボのトレースでLCPの要素を特定し、そのうえで、応答、発見、読み込み、レンダリングの遅延を切り分けます。

実践の手順

1. ユーザーの課題と、対象とするページ群を定める。
2. ラボのトレースでLCPの要素を特定し、そのうえで、応答、発見、読み込み、レンダリングの遅延を切り分ける。
3. 元に戻しやすい最小の変更を選ぶ。
4. 重要な要素を早い段階で発見できるようにし、レンダリング後の結果と、可能ならフィールドデータを確認する。
5. レンダリング後の結果を再チェックし、計測の範囲と日付を残す。

具体例と確認

たとえば、ランディングページで、ロゴとナビゲーションは速く表示されるのに、ファーストビューで最も大きい画像が、クライアントサイドのコードが動くまで発見されないことがあります。有効な対処は、すべての画像を圧縮することではありません。まずトレースで最大の候補を確認します。次に、そのURLが初期HTMLに含まれているか、優先度は妥当か、重要でない処理の後ろでレンダリングが止められていないかをテストします。

限界とよくある間違い

実際のLCPの要素が別のものなのに、小さなアセットを最適化しても、労力が無駄になります。