[object Object]

Largest Contentful Paint (LCP) は、Google の 3 つの Core Web Vitals 指標の 1 つで、知覚されるページの読み込み速度を測定するために確立されています。LCP は、ユーザーが Web ページの読み込みを開始してから、最初に表示されるビューポート内の最大の画像、ビデオポスターフレーム、またはテキストブロックが画面上に完全に描画されるまでの経過時間を追跡します。

ユーザーは、メインコンテンツがどれだけ早く表示され読み取れるようになるかに基づいて Web ページの速度を判断するため、LCP は最も重要な読み込みパフォーマンスの指標であると広く考えられています。その結果、Google はオーガニック検索の公式ページエクスペリエンスランキングシグナルに LCP を組み込んでいます。

回答優先のまとめ

Largest Contentful Paint (LCP) は、ビューポート内に表示される最大のテキストブロックまたは画像要素がレンダリングを終了するタイミングによって、知覚されるページの読み込み速度を測定する Core Web Vital メトリクスです。合格する LCP スコアは、実際のユーザーフィールドデータ (CrUX) のページ訪問の少なくとも 75% で 2.5 秒以下です。LCP レイテンシは、最初のバイトまでの時間 (TTFB)、リソースロード遅延、リソースロード期間、および要素レンダリング遅延の 4 つの異なるサブパートで構成されます。LCP を最適化するには、ヒーローアセットのプリロード、エッジキャッシュの展開、画像を WebP/AVIF 形式に圧縮し、レンダリングをブロックする CSS と JavaScript を排除する必要があります。

LCP スコア評価スケールとコアウェブバイタルのしきい値

ユーザーに高速で魅力的なエクスペリエンスを提供するには、Web ページが Google が確立した最大コンテンツフルペイントの Core Web Vitals しきい値を満たしている必要があります。

LCP レンダリング時間	パフォーマンス評価	ユーザーへの影響と Google 検索ランキングのシグナル
$\le 2.5\text{ 秒}$	良い (緑)	知覚される読み込みが速い。Google の Core Web Vitals 評価を完全に満たしています。
$> 2.5\text {s} $ および $\le 4.0\text {s} $	改善が必要 (アンバー)	顕著な読み込み遅延。モバイルのコンバージョン率と検索ランクが低下する可能性があります。
$> 4.0\text{ 秒}$	悪い (赤)	視覚的な読み込みに重大な遅延が発生します。ユーザーの直帰率が高く、検索ランキングにペナルティが発生します。

Core Web Vitals 評価で合格点を達成するには、Web サイトは、実際のフィールドデータでデスクトップとモバイルデバイスのコホート全体で評価され、ページ訪問の少なくとも 75% で良いカテゴリ ($\le 2.5\text{ 秒}$) の LCP スコアを達成する必要があります。

どのような DOM 要素が LCP 評価の対象になりますか?

公式の W3C Largest Contentful Paint 仕様に従って、ブラウザは初期ビューポート内にある特定の表示可能な DOM 要素を監視します。

標準の <img> 要素 (レスポンシブな <picture> タグ内にレンダリングされた画像を含む)。
<svg> ベクターコンテナー内に埋め込まれた <image> 要素。
ビデオポスター画像 (<video> 要素の poster 属性)。
url() 関数を介してロードされた CSS 背景画像を持つ要素。
テキストノードまたはインラインテキスト要素の子 (<h1> ～ <h6> 見出し、<p> 段落、または <div> ブロックなど) を含むブロックレベルの HTML コンテナー。

LCP の分解: 4 つのサブパート

遅い Largest Contentful Paint スコアを効果的に診断して最適化するために、パフォーマンスエンジニアは LCP レイテンシを 4 つの異なるサブパートに分類します。

最初のバイトまでの時間 (TTFB): ユーザーがページをリクエストしてからブラウザがサーバーから HTML ドキュメント応答の最初のバイトを受信するまでの経過時間。ターゲット: $< 800\text {ms} $ (LCP 予算の $40%$)。
リソース読み込み遅延: HTML ドキュメントが応答バイトの受信を完了してから、ブラウザーが LCP リソース (ヒーロー画像など) を検出して取得を開始するまでの遅延。ターゲット: $< 200\text {ms} $ (LCP 予算の $10%$)。
リソース読み込み時間: ブラウザーがネットワーク経由で LCP 画像またはフォントアセットをダウンロードするのに必要な時間。ターゲット: $< 800\text {ms} $ (LCP 予算の $40%$)。
要素のレンダリング遅延: LCP リソースのダウンロードが完了してから、ブラウザがレイアウト計算を完了して要素を画面に描画するまでの時間。ターゲット: $< 200\text {ms} $ (LCP 予算の $10%$)。

数学的には、LCP 遅延の合計は、次の 4 つのサブ部分の合計です。

$$\text {LCP} = \text {TTFB} + \text{リソースの読み込み遅延} + \text{リソースの読み込み時間} + \text{要素のレンダリング遅延}$$

LCPを最適化する実証済みの技術

リソースの読み込み遅延を排除: <link rel="preload" as="image" href="..."> または fetchpriority="high" をヒーローイメージタグに追加して、ブラウザーが HTML 解析中にすぐにイメージのダウンロードを開始できるようにします。
サーバーレスポンスの最適化 (TTFB): CDN 経由でエッジキャッシュを展開し、データベースクエリのパフォーマンスを最適化し、HTTP/2 または HTTP/3 サーバープッシュ多重化を利用します。
画像の圧縮と最新化: モバイルとデスクトップの画面サイズに合わせたレスポンシブな srcset サイズで、最新の WebP または AVIF 形式を使用してヒーロー画像を提供します。
レンダリングブロッキングリソースの削減: <head> タグに重要な CSS をインライン化し、defer または async スクリプト属性を使用して重要でない JavaScript を延期します。
Web フォントの読み込みを最適化: CSS @font-face ルールで font-display: swap または font-display: optional を使用して、Web フォントがネットワーク経由でダウンロードを完了する間、テキストブロックがすぐに表示されたままになるようにします。

LCP vs First Contentful Paint (FCP) vs スピードインデックス

LCP、FCP、および Speed Index はすべて読み込みパフォーマンスを測定しますが、ページ読み込みの進行のさまざまな側面をキャプチャします。

最初のコンテンツフルペイント (FCP): 一番最初の DOM 要素 (背景色、スピナー、ヘッダーテキストなど) が画面上でレンダリングを終了した時点を測定します。
最大コンテンツフルペイント (LCP): 主要なビジュアルコンテンツ要素 (ヒーローバナーまたはメイン段落ブロック) のレンダリングが完了した時点を測定します。
速度指数: ビジュアル進行状況の記録中に、時間の経過とともにビジュアルコンテンツがビューポートに表示される速度を測定します。

LCP は、ページの読み込み完了に対する実際のユーザーの認識と最も一致しているため、Google の Lighthouse スコアリングアルゴリズムの読み込み指標の中で最も重要視されています (現在、パフォーマンススコア全体の 25%)。

SimpleOps による継続的な LCP モニタリング

SimpleOps は、合成 Lighthouse ラボ監査と Chrome UX レポート (CrUX) フィールドデータセットメトリクスを単一の統合監視ダッシュボードにキャプチャすることで、Largest Contentful Paint の追跡を自動化します。SimpleOps は、サイトの 75 パーセンタイル LCP が 2.5 秒のパフォーマンスバジェットを超過するたびに、即座にプロアクティブなアラートを送信し、チームがコンバージョンと検索ランキングを保護できるようにします。