Next.jsでパフォーマンスとCore Web Vitalsをどのように最適化しますか？

Question

Accepted Answer

Next.jsは多くのパフォーマンスツールを提供します。それらを上手に使うことで、Core Web Vitals — LCP（読み込み）、CLS（レイアウト安定性）、INP（インタラクティビティ）をターゲットにすることができます。

クライアントJavaScriptを最小化する（最大の効果）

tsx

// ✅ Keep components as Server Components; ship "use client" only at interactive leaves
// A Server Component sends ZERO JS for itself → smaller bundle → better INP/load

App Routerの強みは、より少ないJSを配信することです。複雑なロジックとデータ処理はサーバー側に残し、本当にインタラクティブな「アイランド」だけをClient Componentsにします。

LCP画像を最適化する

tsx

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## フォントを最適化する（CLS + 読み込み） ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## 重いクライアントコンポーネントをコード分割する ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` 大規模で非クリティカルなクライアントコンポーネント（チャート、エディタ、モーダル）を遅延ロードして、初期バンドルを膨張させないようにします。 ## 遅いコンテンツをストリーミングする ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## キャッシュを積極的に、再検証を正確に ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## メトリクスにマップされたチェックリスト ```text LCP ↓ : next/image + priority, streaming, CDN/static caching, preconnect CLS ↓ : image width/height, next/font, reserve space for dynamic content INP ↓ : less client JS (Server Components), code-splitting, avoid heavy effects ``` ## 測定する、推測しない ```text next build → see per-route JS sizes Lighthouse / PageSpeed Insights, the Web Vitals lib, Vercel Analytics → real metrics @next/bundle-analyzer → find what's bloating the bundle ``` ## なぜ重要なのか Next.jsのパフォーマンスは主に、**より少ないJavaScriptを配信する**こと（Server Components、コード分割）と、組み込みオプティマイザー（`next/image`、`next/font`、ストリーミング、キャッシング）を使うことです — それぞれがCore Web Vitalに直接マップされます。どのツールがどのメトリクスを改善するのか（そして推測ではなく`next build`/Lighthouseで測定する）を知ることが、LCP/CLS/INPのスコアを体系的に達成する方法です。