Domain 127 / 225

LCP（Largest Contentful Paint）は最大要素の描画完了までの時間

LCP の要点

LCP は viewport 内の最大要素（画像 / 動画 / 大きなテキスト）が描画されるまでの時間。良好は 2.5 秒以内、不良は 4 秒超。改善は Time to First Byte / リソース読み込み時間 / レンダリング遅延の 3 段階で対処

なぜこれを学ぶか

LCP は Core Web Vitals の「ページが読み込まれた感」を表す最重要指標。改善で SEO 評価とユーザー満足度の両方が伸びる。

サイト速度を改善するすべての担当者で必須。

学ばないと起きること

よくある事故	被害
LCP の改善対象要素を特定せず推測で対応	効果薄
画像最適化のみで満足	サーバ / フォント問題を見逃す

学ぶメリット

LCP 改善の体系的アプローチ
該当要素の的確な特定
商談で「LCP 3 段階改善」を即答

仕組み

LCP の定義

公式: viewport 内で最大の Contentful 要素が描画されるまでの時間。

評価	時間
良好	2.5 秒以内
改善が必要	2.5-4 秒
不良	4 秒超

LCP 候補要素

要素	例
`<img>`	大きな画像
`<image>`	SVG 内 image
`<video>` ポスター	動画のサムネイル
背景画像	CSS の url()
ブロックレベルテキスト	大きな見出し

LCP の構成要素

LCP は内部的に 4 段階:

Time to First Byte（TTFB）
リソース読み込み遅延
リソース読み込み時間
要素レンダリング遅延

各段階を個別に最適化。

キー概念

TTFB（Time to First Byte）の最適化

サーバ応答までの時間:

対策	効果
CDN 導入	地理的レイテンシ削減
キャッシュ最適化	DB / 計算負荷削減
サーバ性能向上	処理時間短縮
エッジコンピューティング	リクエスト処理を近接

画像の最適化

LCP 要素が画像なら:

対策	効果
WebP / AVIF 形式	ファイルサイズ削減
width / height 属性	レイアウト確定
fetchpriority="high"	優先読み込み
preload リンク	リソース hint
適切なサイズ	過剰サイズ回避

preload の活用

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

LCP 候補画像を最優先で読み込み。

フォントの最適化

text の場合、Web フォントが LCP 遅延の原因:

対策	効果
font-display: swap	フォールバック表示
サブセット化	使う文字のみ
preload	優先読み込み
local()	システムフォント優先

よくある誤解

よくある誤解	実際のところ	出典
LCP は画像最適化だけ	TTFB / フォント / レンダリング遅延も影響	LCP ガイド
Lab データの LCP で十分	Field データ（実ユーザー）が SEO 評価対象	同上
LCP 候補は固定	viewport / レイアウトで変わる	同上

実務での適用

改善フロー

PageSpeed Insights で LCP 候補要素特定
Web Vitals Chrome 拡張機能で 4 段階内訳確認
最も時間がかかる段階を改善
4 週間後に Search Console で反映確認

モバイルファースト

公式: モバイル LCP が SEO 評価対象。

モバイルでの LCP を優先改善
デスクトップは二の次

トラブル別の対処

症状	確認すべきこと
LCP が 4 秒超	候補要素の特定 / 4 段階内訳分析
TTFB が 0.6 秒超	サーバ / CDN / キャッシュ

公式ソース

自己テスト

Q1. LCP の良好基準は？

2.5 秒以内（不良は 4 秒超）

Q2. LCP の 4 段階内訳は？

Time to First Byte / リソース読み込み遅延 / リソース読み込み時間 / 要素レンダリング遅延

Q3. 画像 LCP の優先読み込み方法は？

fetchpriority="high" + <link rel="preload" as="image"> + 適切な画像サイズ

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。