Next.js で Core Web Vitals を改善する実践ポイント

Google の Core Web Vitals（LCP・INP・CLS）はユーザー体験を数値化する指標であり、検索ランキングにも影響します。Next.js アプリのスコアを改善するための実践的なアプローチを、実際の改善事例をもとに解説します。

まず計測から始める

改善の前に現状を正確に把握することが不可欠です。計測には以下のツールを組み合わせて使います。

• Lighthouse（Chrome DevTools）：ラボデータ。再現性が高く CI に組み込みやすい

• PageSpeed Insights：フィールドデータ（実際のユーザーの体験）と CrUX データを確認できる

• Next.js の `useReportWebVitals`：本番環境での実際の数値を収集しアナリティクスに送信

ラボデータとフィールドデータの乖離が大きい場合は、JS のサイズや画像の最適化より、サーバーレスポンス時間（TTFB）の改善を先に検討してください。

LCP（Largest Contentful Paint）の改善

LCP はページの主要コンテンツが表示されるまでの時間です。ヒーロー画像や大きなテキストブロックが対象になることが多いです。

• `<Image>` コンポーネントの `priority` prop：Above the fold の画像に必ず付ける。fetchpriority=high が自動で付与され、プリロードされる

• フォントの最適化：`next/font` を使うとフォントファイルをビルド時にダウンロードし、セルフホストすることで外部リクエストをゼロにできる

• Server Components の活用：データフェッチをサーバー側で行うことで、クライアントへの JS 転送量を削減しレンダリング開始を早める

INP（Interaction to Next Paint）の改善

INP はクリックや入力に対してページがどれだけ素早く応答するかを測る指標です（旧 FID の後継）。

• 重い処理を `startTransition` でラップ：UI をブロックせずに状態更新できる

• イベントハンドラ内の同期処理を減らす：DOM 操作や計算は Web Worker に分離することを検討

• 不要な re-render を `memo` / `useMemo` / `useCallback` で防ぐ：ただしやりすぎると逆効果になるので計測しながら適用する

CLS（Cumulative Layout Shift）の改善

CLS はページ読み込み中に要素が突然動いてしまう現象の累積スコアです。

• 画像・動画に必ず width と height を指定する（または `aspect-ratio` CSS）

• 動的に挿入するバナーや広告のために事前にスペースを確保する

• Web フォントのロード中のテキストずれを防ぐため `font-display: swap` を設定する

キャッシュ戦略との組み合わせ

Next.js の ISR（Incremental Static Regeneration）と `fetch` のキャッシュを活用することで、動的コンテンツを静的ページ並みの速度で配信できます。`revalidate` の値はコンテンツの更新頻度に合わせて調整してください。更新頻度が低いページは長めに、ニュースやリアルタイム性が求められるページは短めに設定します。

Core Web Vitals の改善は一度やって終わりではありません。デプロイのたびに Lighthouse を実行し、回帰がないかを確認する仕組みを CI に組み込むことが、スコアを維持するための現実的なアプローチです。