Next.js App Router 性能优化：从 LCP 到 INP 的完整指南

Core Web Vitals 的重要性

Google 已将 Core Web Vitals 纳入搜索排名因素。三大核心指标——LCP（最大内容绘制）、INP（交互到下一次绘制）、CLS（累积布局偏移）——直接影响你的网站在搜索结果中的排名。

优化 LCP

LCP 衡量页面主要内容的加载速度，目标值为 2.5 秒以内。在 Next.js 中优化 LCP 的关键措施：

• 使用 next/image 并设置 priority 属性
• 通过 generateStaticParams 预渲染关键页面
• 优化字体加载，使用 next/font

优化 INP

INP 是 2024 年替代 FID 的新指标，衡量用户交互的响应速度。优化 INP 需要减少主线程阻塞，可以使用 useTransition 将非紧急更新标记为低优先级。

Server Components 的性能优势

合理使用 React Server Components 可以将大量 JavaScript 从客户端移除，显著减少 bundle 体积，从而改善所有性能指标。