Next.jsでCore Web Vitalsを改善する設定まとめ

はじめに

Next.jsはCore Web Vitalsの改善を強く意識した設計がなされており、適切な設定を行うことでPageSpeed InsightsのモバイルスコアをWordPressと比較して構造的に高く維持できます。しかし「Next.jsを使えば自動的にスコアが上がる」という認識は不十分で、適切な設定・実装が必要です。

本記事では、Next.jsでCore Web Vitalsを改善するための設定・実装ポイントを体系的にまとめます。

Next.jsがデフォルトで提供するパフォーマンス最適化

自動コード分割

Next.jsはページごとに必要なJavaScriptのみをロードする「自動コード分割」を実装しています。全ページのJavaScriptを一度に読み込む従来のSPAと異なり、現在表示しているページに必要なコードだけがロードされます。

これによりJavaScriptのダウンロード量・実行時間が削減され、FCP・LCPの改善につながります。

プリフェッチ

next/link コンポーネントを使用すると、リンク先のページをバックグラウンドで事前読み込み（プリフェッチ）します。ユーザーがリンクをクリックしたときに即座に次のページが表示されます。

Server Componentsによるバンドルサイズの削減

App RouterのServer Componentsはサーバー上でレンダリングされ、JavaScriptとして送信されません。これにより、クライアントに送信されるJavaScriptのバンドルサイズが削減されます。

設定1：next/imageによる画像最適化（LCP・CLS改善）

前記事でも解説したnext/imageは、LCPとCLSの改善に最も直接的に貢献するコンポーネントです。

必須設定：priorityの正しい使い方

ファーストビューの最大コンテンツ（LCPの対象になる要素）には必ずpriorityを設定します。

next.config.tsでのドメイン設定

外部URLの画像をnext/imageで最適化する場合、next.config.ts（またはnext.config.js）に許可するドメインを設定します。

設定2：next/fontによるフォント最適化（CLS・LCP改善）

前記事で解説したnext/fontをlayout.tsxで設定します。

設定3：Metadata APIによるSEO設定

App RouterのMetadata APIでタイトル・メタディスクリプション・OGPを設定します。SEO改善と同時に、OGPの画像サイズ指定でSNSシェア時のCLSを防ぎます。

設定4：レンダリング戦略の最適化（LCP改善）

ページの特性に応じた適切なレンダリング戦略を選択することが、LCPの最大化に重要です。

静的生成（SSG）：コーポレートサイト・ブログ記事向け

ISR（Incremental Static Regeneration）：頻繁に更新されるコンテンツ向け

サーバーコンポーネント（動的コンテンツ向け）

設定5：サードパーティスクリプトの最適化（INP・LCP改善）

Google Analytics・広告スクリプト・チャットウィジェット等のサードパーティスクリプトは、メインスレッドをブロックしてINPとLCPを悪化させる原因になります。

next/scriptコンポーネントを使用してスクリプトの読み込みタイミングを制御します。

strategyの選択基準

• beforeInteractive：ページがインタラクティブになる前に必要なスクリプト（使用を最小限にする）

• afterInteractive（デフォルト）：ページがインタラクティブになった後に読み込む（GA等）

• lazyOnload：ブラウザのアイドル時間に読み込む（チャットウィジェット等）

設定6：Vercelの設定でパフォーマンスを最大化

エッジ配信の活用

Next.jsをVercelにデプロイするだけで、自動的に世界中のエッジネットワークからコンテンツが配信されます。静的に生成されたページはCDNで完全にキャッシュされ、ユーザーに最も近いエッジから配信されます。

Vercel Analyticsによるリアルタイム計測

VercelはCore Web Vitalsのリアルタイムモニタリング機能を提供しています。

SpeedInsights コンポーネントを追加するだけで、実際のユーザーのCore Web Vitalsデータ（Field Data）をVercelのダッシュボードで確認できるようになります。

Core Web Vitals設定チェックリスト

LCP改善

• next/imageを使用し、ファーストビューの画像にpriorityを設定しているか

• 適切なレンダリング戦略（SSG/ISR）を採用しているか

• Vercelエッジ配信を活用しているか

• サードパーティスクリプトはafterInteractive以降で読み込んでいるか

INP改善

• Cient Componentsのuse clientの使用を最小限にしているか

• 長いJavaScriptタスクがないかLighthouseで確認しているか

• サードパーティスクリプトをlazyOnloadで読み込んでいるか

CLS改善

• next/imageを使用してすべての画像にwidth・heightが設定されているか

• next/fontを使用してWebフォントを最適化しているか

• 動的に挿入されるコンテンツ（広告・バナー等）のスペースを事前に確保しているか

まとめ

Next.jsでCore Web Vitalsを最大化するためのキーポイントは5つです。

• next/imageとpriorityの正しい設定（LCP・CLS）

• next/fontの活用（CLS・LCP）

• ページ特性に応じたレンダリング戦略（LCP）

• next/scriptによるサードパーティスクリプトの制御（INP・LCP）

• Vercelのエッジ配信とSpeedInsightsの活用

次の記事では、CDNとエッジキャッシュの仕組み・Vercelのエッジネットワーク活用を解説します。