Core Web Vitalsを劇的改善！Next.jsパフォーマンス最適化テクニック

「PageSpeed Insightsのスコアが真っ赤…」

そんな悩みを抱えていませんか？2021年以降、GoogleはCore Web Vitalsをランキング要因に含めています。つまり、サイトが遅いと検索順位が下がる可能性があるということ。

この記事では、Next.jsでCore Web Vitalsを改善する具体的なテクニックを紹介します。

Core Web Vitalsとは？

Googleが定義する「ユーザー体験の品質指標」です。

指標	意味	目標値
LCP (Largest Contentful Paint)	最大コンテンツの表示時間	2.5秒以下
INP (Interaction to Next Paint)	応答性	200ms以下
CLS (Cumulative Layout Shift)	レイアウトのずれ	0.1以下

※FID（First Input Delay）は2024年3月にINPに置き換わりました。

1. LCP（最大コンテンツ表示）の改善

LCPは「ページ内で一番大きな要素が表示されるまでの時間」。多くの場合、ヒーロー画像がこれに該当します。

1-1. next/imageを正しく使う

TSX

ポイント：

priority属性で優先読み込み
placeholder="blur"で表示までの体験改善
サイズを明示してレイアウトシフト防止

1-2. 画像フォーマットの最適化

JavaScript

AVIFとWebPは従来のJPEG/PNGより30-50%小さい。Next.jsは自動で最適なフォーマットを配信します。

1-3. 外部画像の最適化

JavaScript

1-4. サーバーレスポンスの高速化

TypeScript

2. INP（応答性）の改善

INPは「ユーザー操作から次の描画までの時間」。JavaScriptの実行が重いと悪化します。

2-1. 重いコンポーネントの遅延読み込み

TypeScript

2-2. イベントハンドラの最適化

TypeScript

2-3. スクロールイベントのデバウンス

TypeScript

2-4. バンドルサイズの削減

Bash

大きなライブラリがあれば、軽量な代替を検討：

重いライブラリ	軽量な代替
moment.js (300KB)	date-fns (75KB) / dayjs (6KB)
lodash (70KB)	必要な関数だけimport
chart.js	recharts / lightweight-charts

3. CLS（レイアウトシフト）の改善

CLSは「読み込み中にレイアウトがずれる量」。画像やフォントが遅れて読み込まれると発生。

3-1. 画像のサイズを明示

TSX

3-2. フォントの最適化

TypeScript

display: 'swap'で、フォント読み込み中はシステムフォントを表示。レイアウトシフトを防ぎます。

3-3. 動的コンテンツのスペース確保

TSX

3-4. iframeのサイズ指定

TSX

4. その他の最適化

4-1. プリロードの活用

TSX

4-2. 不要なJavaScriptの削除

JavaScript

4-3. スクリプトの遅延読み込み

TSX

strategy	タイミング
`beforeInteractive`	ハイドレーション前
`afterInteractive`	ハイドレーション後（デフォルト）
`lazyOnload`	ページ読み込み完了後