LCP最適化戦略 — Largest Contentful Paintガイド
Largest Contentful Paint (LCP) を最適化する実践的な戦略を学びます。画像、フォント、サーバー応答、レンダリングブロッキングリソースの最適化をカバー。目標は2.5秒以下。
Core Web Vitals
詳細な説明
Largest Contentful Paint (LCP) の最適化
LCPは、ビューポート内に表示される最大の画像またはテキストブロックのレンダリング時間を測定します。Googleは2.5秒以下のLCPを良好と見なします。この指標は、ページの読み込み速度に対するユーザーの認識を直接反映します。
LCP要素の特定
最適化の前に、LCP要素が何かを知る必要があります。一般的なLCP要素：
- ヒーロー画像またはバナー画像
- 大きな見出しテキスト（大きなフォントサイズのH1/H2）
- 動画のポスター画像
- CSSで適用された背景画像
Chrome DevTools → Performance パネル → LCPマーカーにホバーして、正確にどの要素が選択されたかを確認します。
LCPの4つのサブパート
LCPは4つの連続するサブパートに分解できます：
- Time to First Byte (TTFB) — サーバー応答時間
- リソース読み込み遅延 — TTFBからブラウザがLCPリソースの読み込みを開始するまでの時間
- リソース読み込み時間 — LCPリソース自体のダウンロード時間
- 要素レンダリング遅延 — リソースダウンロードから実際のレンダリングまでの時間
各サブパートが最適化の機会です。遅いTTFBは後続のすべてを遅延させます。
主要な最適化戦略
画像最適化：
- モダンフォーマット（WebP、AVIF）を適切なフォールバック付きで使用
- 明示的な
widthとheight属性を設定 - LCP画像に
fetchpriority="high"を使用 - LCP画像には絶対に遅延読み込みしない（
loading="lazy"は遅延させる） - レスポンシブ画像には
srcsetとsizesを使用
リソースヒント：
<!-- LCP画像のプリロード -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- CDNへのプリコネクト -->
<link rel="preconnect" href="https://cdn.example.com">
サーバーサイド：
- CDNをデプロイしてTTFBを削減
- BrotliまたはGzip圧縮を有効化
- stale-while-revalidateキャッシング戦略を使用
- サーバーサイドレンダリング（SSR）または静的生成（SSG）を検討
CSSとフォント：
- クリティカルCSSを
<head>にインライン化 - 非クリティカルなスタイルシートを遅延読み込み
font-display: swapまたはfont-display: optionalを使用- LCP要素で使用されるWebフォントをプリロード
ユースケース
LCP最適化は、Google Search ConsoleでCore Web Vitalsに合格したいすべてのウェブサイトに不可欠です。ヒーロー商品画像のあるECサイト、大きなバナー写真のあるニュースサイト、マーケティングランディングページが特に影響を受けます。遅いLCPは高い直帰率につながります — ユーザーはメインコンテンツが2.5秒以内に表示されることを期待しています。