Next.js 性能优化实战

为什么性能如此重要

Core Web Vitals 是 Google 评估网页体验的三个核心指标：LCP（最大内容绘制）、INP（与下一次绘制交互）和 CLS（累计布局偏移）。这些指标直接影响 SEO 排名和用户留存率。Next.js 内置了多种优化手段，让我们能轻松达标。

图片优化

使用 `next/image` 组件替代原生 `<img>` 标签。它能自动进行尺寸优化、格式转换（WebP/AVIF）、懒加载和模糊占位符：

<Image src="/hero.jpg" alt="Hero" width={1200} height={630} priority // 首屏图片使用 priority placeholder="blur" /> ```

字体优化

使用 `next/font` 自动托管和优化字体，消除外部字体请求造成的布局偏移：

const geist = Geist({ subsets: ["latin"] }) ```

字体文件会在构建时下载并自托管，配合 `size-adjust` 等 CSS 属性来消除 FOIT 和布局偏移。

代码分割与懒加载

Next.js 自动按路由分割代码，但你也可以手动懒加载组件：

const HeavyChart = dynamic(() => import("./Chart"), { loading: () => <p>加载中...</p>, }) ```

缓存策略

Next.js 提供了多层缓存机制：请求记忆化、数据缓存、全路由缓存和路由器缓存。理解这些缓存的层级和失效规则，能帮你避免不必要的数据请求和重复渲染。

静态生成 vs 动态渲染

对于内容不变的页面，优先使用静态生成（SSG），可以部署到 CDN 实现极致性能。对于实时内容，根据需要选择流式渲染或增量静态再生成（ISR），在新鲜度和速度之间找到平衡。

监控与持续优化

在项目上线后，使用 Vercel Analytics 或 Lighthouse CI 持续监控 Core Web Vitals。性能优化不是一次性的工作，而是一个持续改进的过程。