如何在 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 Component。 ## 优化 LCP 图片 ```tsx import Image from "next/image";

// 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 ``` 对体积大、非关键的客户端组件（图表、编辑器、模态框）进行懒加载，使它们不会让初始 bundle 膨胀。 ## 流式传输较慢的内容 ```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 分数的方法。