LCP（Largest Contentful Paint）

LCP（Largest Contentful Paint）は、ページの読み込み開始からビューポート内で最も大きな可視コンテンツ要素がレンダリング完了するまでの時間を測定する[Core Web Vitals](/glossary/core-web-vitals)の指標です。この要素は通常、ヒーロー画像、大きなテキストブロック、動画ポスター、または背景画像です。Googleは3つのパフォーマンス帯を定義しています：**良好**（2.5秒以下）、**改善が必要**（2.5〜4.0秒）、**不良**（4.0秒超）。LCPはページ読み込みの75パーセンタイルで測定されるため、スコアは最速の接続だけでなく、大多数の実ユーザーの体験を反映しています。

LCPは、体感的なページ速度の最も重要な指標です。他の指標が技術的な準備状況や視覚的な安定性を測定するのに対し、LCPは訪問者がメインコンテンツを目にする瞬間 — ページが「読み込まれた」と判断する瞬間を捉えます。LCPが遅いと、訪問者は未完成のページを見つめることになり、直帰率が上昇しエンゲージメントが低下します。GoogleはLCPを検索アルゴリズムのランキングシグナルとして使用しているため、スコアが低いとユーザー体験を損なうだけでなく、オーガニックの可視性も直接的に低下します。検索トラフィックに依存するパブリッシャーにとって、LCPの最適化は1ページ目に表示されるか埋もれるかの分かれ目になり得ます。

FlipLinkはマーケティングサイトと公開フリップブックの両方でLCPを最適化しています。フリップブックビューアは表紙と最初の見開きのレンダリングを優先し、重いアセットが読み込まれる前に最大の可視コンテンツ要素が表示されるようにします。[カスタムローディング画面](/features/custom-loading-screen)は即座にビジュアルフィードバックを提供し — ブランドプレースホルダーが1秒以内に表示され — Three.jsレンダリングリソースはバックグラウンドで初期化されます。FlipLinkの[ページエクスペリエンスとレイアウト](/features/page-experience-and-layout)エンジンは、最適化された画像圧縮、レスポンシブ画像サイズ調整、プログレッシブレンダリングを適用し、デスクトップとモバイルの両方でGoogleが推奨する2.5秒の閾値内にLCPを保ちます。フリップブックが外部サイトに[埋め込まれる](/glossary/embed)場合、遅延読み込みにより埋め込みがホストページのLCP要素と競合しないようにします。

LCPを理解するには、関連するパフォーマンス指標との文脈が必要です： - **良好なLCP**：2.5秒以下。ページは瞬時に感じられます。ほとんどのユーザーは離脱を考える前にコンテンツを目にします。 - **改善が必要**：2.5〜4.0秒。ユーザーは遅延に気づきます。直帰率が上昇し始めます。 - **不良なLCP**：4.0秒超。メインコンテンツが表示される前に訪問者がページを離れる可能性が高くなります。 LCP要素はページによって変わります。商品ページでは通常、商品画像です。ブログ記事ではヒーローバナーや最初の段落テキストかもしれません。フリップブックページでは表紙画像です。各ページでどの要素がLCPを構成するかを特定することが、最適化の第一歩です。

LCPの測定は、Web Performance Working Groupが定めた特定のルールに従います。最大の要素はファイルサイズではなく、ビューポート内での可視サイズによって決定されます。LCPの対象となる要素には、`<img>`要素、SVG内の`<image>`、動画ポスター画像、CSSで読み込まれた`background-image`を持つ要素、テキストを含むブロックレベル要素が含まれます。ビューポートを超えて広がる要素は、可視部分のみが測定されます。 LCPが遅くなる一般的な原因には、最適化されていない画像（200KBのWebPで十分なのに4MBの画像を配信している場合）、レンダリングをブロックするCSSとJavaScript、サーバー応答時間の遅さ（[TTFB](/glossary/core-web-vitals)が800ms超）、コンテンツが表示される前にJavaScriptの実行を必要とするクライアントサイドレンダリングがあります。 実用的な最適化には、`<link rel="preload">`でのLCP画像のプリロード、モダンなフォーマット（WebP、AVIF）での画像配信、静的アセット用のCDN利用、クリティカルCSSのインライン化、非必須JavaScriptのdefer、レイアウトシフト防止のための画像への明示的な`width`と`height`の設定があります。

LCPと[FCP](/glossary/core-web-vitals)（First Contentful Paint）はどちらもタイミング指標ですが、測定するタイミングが異なります。FCPはブラウザが最初のDOMコンテンツをレンダリングした時点で発火します — たとえそれがナビゲーションバー、ローディングスピナー、1行のテキストだけであっても。LCPは最大のコンテンツ要素がレンダリングされた時点で発火します。実際には、FCPはLCPより1〜2秒早く発火することがよくあります。 ヘッダーとナビゲーションが素早く読み込まれる一方でヒーロー画像の表示に数秒かかる場合、FCPは速くてもLCPは遅くなり得ます。ユーザー体験にとって、LCPはページが訪問者にとって「完成した」と感じるタイミングを反映するため、より意味のある指標です。FCPはブラウザがレンダリングを開始しているかどうかの診断に有用ですが、ユーザーが留まるか去るかを決めるのはLCPです。

LCPは、実際の訪問者にとってページが「読み込まれた」と感じる瞬間を測定します。画像の最適化、レンダリングブロッキングリソースの最小化、ファーストビューコンテンツの優先化により2.5秒以下を維持してください — 検索ランキングとユーザーエンゲージメントはそれにかかっています。