LCPは、ページの中で最も大きなコンテンツ(多くの場合ファーストビューの画像や見出し)が表示されるまでの時間です。GoogleはLCPを2.5秒以内に収めることを「良好」の基準としています。この記事では、LCPが遅くなる原因を切り分け、優先順位をつけて改善する手順を解説します。
LCPとは何か
LCP(Largest Contentful Paint)は、Googleが重視するCore Web Vitalsの1つで、ユーザーが「ページが表示された」と感じるタイミングを数値化した指標です。ファーストビューに大きな画像があればその画像、テキスト中心のページなら見出しブロックがLCP要素になることが多いです。
LCPが重要なのは、これが体感速度に直結し、直帰率と相関するからです。特にモバイル回線では、LCPが1秒遅れるごとに離脱が増える傾向が知られています。
LCPが遅くなる4つの主因
やみくもに手を動かす前に、まず原因を切り分けます。LCPの遅延は、おおむね次の4つに分類できます。
| 主因 | 典型的な症状 | 効きやすい対策 |
|---|---|---|
| サーバー応答が遅い | 最初の1バイトが返るまで(TTFB)が長い | キャッシュ・CDN・ホスティング見直し |
| リソースの読み込みが遅い | LCP画像のダウンロードに時間がかかる | 画像の圧縮・次世代フォーマット化・preload |
| レンダリングがブロックされる | CSS/JSの読み込み完了まで描画されない | クリティカルCSSのインライン化・JS遅延 |
| クライアント側の描画が遅い | JavaScriptで後から要素を差し込んでいる | サーバーサイドレンダリング(SSR)化 |
改善手順1: LCP画像を最適化する
ファーストビューに大きな画像がある場合、ここが最も効きます。次の順で対応します。
- 画像をWebPまたはAVIFに変換する(JPEG比で30〜50%軽くなることが多い)
- 表示サイズに合わせて解像度を落とす(4Kの画像をそのまま使わない)
- LCP画像に fetchpriority="high" を指定し、優先的に読み込ませる
- 逆に、ファーストビュー外の画像は loading="lazy" で遅延読み込みにする
改善手順2: レンダリングブロックをなくす
画像が軽くても、CSSやJavaScriptの読み込みが描画をブロックしていると、LCPは改善しません。
- ファーストビューに必要な最小限のCSSをインライン化する(クリティカルCSS)
- 本質的でないJavaScriptに defer / async を付け、描画を止めないようにする
- Webフォントに font-display: swap を指定し、フォント待ちで文字が消えないようにする
- 外部の埋め込みタグ(チャット・解析)が描画をブロックしていないか確認する
改善手順3: 配信基盤を見直す
TTFB(最初のバイトが返るまでの時間)が長い場合は、フロントの最適化だけでは限界があります。CDNの導入、キャッシュの活用、応答の速いホスティングへの移行が効きます。静的に生成できるページは静的化(SSG)するのも有効です。
表示速度の診断
LCPを含む速度スコアと、他の3軸(SEO・デザイン・訴求力)をまとめて確認したいときは、URLを入れるだけの無料診断が使えます。実測値に加えて、直すべき優先順位も提示します。
無料で診断をはじめる