LCP

LCP とは

LCP (Largest Contentful Paint) は、ビューポート内で最も大きなコンテンツ要素 (画像、動画、テキストブロック) が表示されるまでの時間を測定する Core Web Vitals の指標である。ユーザーが「ページが表示された」と感じるタイミングを数値化する。

スコア	評価
0〜2.5 秒	良好 (Good)
2.5〜4.0 秒	改善が必要
4.0 秒以上	不良 (Poor)

LCP の対象要素

• <img> 要素
• <video> のポスター画像
• CSS background-image で読み込まれた画像
• テキストを含むブロックレベル要素 (<h1>, <p> など)

ほとんどのページでは、ヒーロー画像やメインビジュアルが LCP 要素になる。

LCP が遅くなる 4 つの原因と対策

1. サーバーレスポンスが遅い (TTFB)

対策:
- CloudFront で静的コンテンツをキャッシュ
- Lambda のコールドスタートを最小化
- サーバーサイドレンダリング (SSR) の最適化

2. LCP 画像の読み込みが遅い

<!-- ❌ 遅延読み込み: LCP 画像には使わない -->
<img src="hero.jpg" loading="lazy" alt="Hero">

<!-- ✅ 優先読み込み: LCP 画像は fetchpriority="high" -->
<img src="hero.jpg" fetchpriority="high" alt="Hero">

<!-- ✅ プリロード: HTML パース前に画像の取得を開始 -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">

3. レンダリングをブロックするリソース

<!-- ❌ 同期的な CSS/JS がレンダリングをブロック -->
<link rel="stylesheet" href="large-library.css">
<script src="analytics.js"></script>

<!-- ✅ クリティカル CSS をインライン化、非クリティカルを遅延 -->
<style>/* クリティカル CSS */</style>
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
<script src="analytics.js" defer></script>

4. クライアントサイドレンダリング

SPA で JavaScript が実行されるまでコンテンツが表示されない。SSR/SSG でサーバー側で HTML を生成し、初期表示を高速化する。

Next.js での LCP 最適化

Next.js での LCP 最適化のコード例を示す。

import Image from 'next/image';

// next/image は自動的に最適化 (WebP 変換、リサイズ、lazy loading)
// priority を指定すると LCP 画像として優先読み込み
<Image src="/hero.jpg" alt="Hero" width={1200} height={630} priority />

測定方法

測定方法の例を示す。

# Lighthouse
npx lighthouse https://example.com --only-categories=performance

# PageSpeed Insights (実ユーザーデータ + ラボデータ)
# https://pagespeed.web.dev/

// JavaScript で LCP をリアルタイム測定
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.startTime, 'ms');
}).observe({ type: 'largest-contentful-paint', buffered: true });

体系的に学ぶなら関連書籍を参照してほしい。