LCP
Largest Contentful Paint（LCP）は、ページ遷移の開始時点から、ビューポート内で最も大きいコンテンツ要素（画像、テキストブロック、または動画）が描画されるまでにかかる時間を測定します。これはGoogleのCore Web Vitalsの一つであり、ユーザーが実際に体感する読み込み速度を反映します。
LCPは、ビューポート内で最も大きいコンテンツ要素が画面に描画されるまでにかかる時間であり、体感上の読み込み速度を示すCore Web Vitals指標です。
2.5秒以下の値は「Good」と評価され、4秒を超えるものは「Poor」とされます。評価は実際のユーザーの75パーセンタイルで行われます。
主な要因は、サーバー応答の遅さ（TTFB）、LCPリソースの検出と読み込みの遅延、そしてレンダーブロッキングリソースです。これらは、画像最適化、プリロード、CDNの活用によって改善できます。
概要
Largest Contentful Paint（LCP）は、ページ読み込み開始からビューポート内で最も大きいコンテンツ要素が描画されるまでの時間を測定します。この「最も大きい要素」は通常、ページの中核となるコンテンツに該当するため、LCPが速いと、ユーザーはそのページが有用であることをすばやく認識できます。言い換えれば、LCPはユーザーが実際に感じる読み込み速度の指標であり、Googleが定義する3つのCore Web Vitalsの1つです。
LCP候補として対象となる要素には、<img>、SVG内の<image>、<video>、CSSのurl()で背景画像が設定された要素、テキストノードを含むブロックレベル要素が含まれます。ユーザーがタップ、スクロール、キー入力でページを操作した時点で、ブラウザは新しいLCPエントリの報告を停止します。
しきい値
LCPはページ読み込みの75パーセンタイルに基づいて評価され、モバイルとデスクトップで別々に測定されます。目的は、4人中3人のユーザーが良好な体験を得られるようにすることです。
評価 | LCP値 |
|---|---|
Good | 2.5秒以下 |
改善が必要 | 2.5秒超、4秒以下 |
不良 | 4秒超 |
主な原因
web.devでは、LCPの合計時間を4つのサブパートに分けています。各パートがどれだけ寄与しているかを把握すると、最初にどこへ注力すべきかを判断しやすくなります。
サブパート | 説明 | 一般的な割合 |
|---|---|---|
TTFB（Time to First Byte） | ページ読み込み開始から、HTMLドキュメントの最初の1バイトが届くまでの時間 | 約40% |
リソース読み込み遅延 | TTFB後から、ブラウザがLCPリソースの読み込みを開始するまでの時間 | 10%未満 |
リソース読み込み時間 | LCPリソース自体のダウンロードにかかる時間 | 約40% |
要素のレンダリング遅延 | リソースの読み込み完了から、LCP要素が完全にレンダリングされるまでの時間 | 10%未満 |
最適化
TTFBを短縮する: 不要なリダイレクトを削減し、効率的なキャッシュポリシーを使用して、再訪問時はキャッシュから配信できるようにします。
リソースの読み込み遅延を解消する: LCP リソースが初期 HTML レスポンス内でブラウザのプリロードスキャナーから検出できるようにし、主要な画像に
fetchpriority="high"を付与します。LCP 画像に遅延読み込みを適用してはいけません。リソースの読み込み時間を短縮する: CDN を使用してユーザーまでの距離を短縮し、最新の画像形式と圧縮を採用します。
要素の描画遅延を減らす: 描画をブロックするスタイルシートや同期スクリプトを最小限に抑え、server-side renderingを使用して、画像リソースが HTML ソース内で検出できるようにします。
根拠
2.5 秒と 4 秒のしきい値、および測定手法は、Google の公式 web.dev LCP ドキュメント（web.dev/articles/lcp）に明記されています。サブパートの内訳と最適化の推奨事項は、web.dev の LCP 最適化ガイド（web.dev/articles/optimize-lcp）に従っています。Core Web Vitalsが Google 検索のランキングに影響することは、Google Search Central（Understanding Core Web Vitals and Google search results）で文書化されています。
実装チェックリスト
まず計測ツールを使用して、ビュー内で実際にどの要素が LCP 要素であるかを確認します。
LCP 画像を初期 HTML に直接公開し、遅延読み込みを削除します。
適用
fetchpriority="high"または重要な画像をプリロードします。画像をWebPやAVIFなどの最新形式に変換し、適切に圧縮します。
CDNとキャッシュポリシーを使用して、リソース配信の距離と時間を短縮します。
レンダリングをブロックするCSSとJSはインライン化するか、遅延読み込みにします。
実ユーザー（フィールド）データの75パーセンタイルのLCPが2.5秒以下であることを定期的に確認します。