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

元のページ: <https://chot-inc.com/knowledge/nextjs-core-web-vitals>

サイト表示速度の改善方法｜Core Web Vitals対策ガイド

Next.jsでCore Web Vitalsを改善する設定をまとめて解説します。next/image・next/font・Metadata API・next/script・Vercel SpeedInsightsの活用方法を整理しています。

## **はじめに**

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のバンドルサイズが削減されます。

Next.jsはReactをベースにしたフレームワークで、React Server Componentsなどの仕組みを活用しています。Next.jsとReactの役割や特徴について詳しく知りたい方は「[**ReactとNext.jsの違い**](https://chot-inc.com/knowledge/react-vs-nextjs)」をご覧ください。

## **設定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のエッジネットワーク活用を解説します。

## エージェント型Web・AIアプリ 開発のご相談

chot inc.ではエージェント型Webの設計・構築・ 運用を 一貫してサポートしています。

[お問い合わせ](https://chot-inc.com/contact)

## このテーマの他の記事

- ### [サイト表示速度とは？なぜUXとSEOの両方に影響するのか](https://chot-inc.com/knowledge/what-is-site-speed)
  [サイト表示速度とは何か、なぜUXとSEOの両方に影響するのかを解説します。直帰率・CV率・Core Web Vitalsのランキング要因としての位置づけ・速度が遅くなる6つの原因をまとめています。](https://chot-inc.com/knowledge/what-is-site-speed)
- ### [Core Web Vitalsとは？LCP・INP・CLSの意味と目標値](https://chot-inc.com/knowledge/core-web-vitals-explained)
  [Core Web VitalsのLCP・INP・CLSの意味と目標値を解説します。各指標の定義・良好・要改善・不良の基準・悪化する原因・Field DataとLab Dataの違いをまとめています。](https://chot-inc.com/knowledge/core-web-vitals-explained)
- ### [Lighthouseの使い方｜スコアの見方と表示速度の改善手順](https://chot-inc.com/knowledge/lighthouse-guide)
  [LighthouseとはGoogleのパフォーマンス計測ツールです。PageSpeed Insights・Chrome DevTools・CLIの3つの起動方法・スコアの読み方・改善サイクルの回し方をまとめています。](https://chot-inc.com/knowledge/lighthouse-guide)

[サイト表示速度の改善方法｜Core Web Vitals対策ガイド一覧](https://chot-inc.com/knowledge/themes/web-performance)