前端性能优化实战手册

性能优化不是玄学，而是工程。让我们用数据驱动的方式逐项击破瓶颈。

关键指标：Core Web Vitals

• LCP < 2.5s：最大内容渲染
• INP < 200ms：交互响应
• CLS < 0.1：布局稳定性

优化清单

图像优化

• WebP / AVIF 格式
• 响应式 srcset
• loading="lazy" + fetchpriority

字体优化

• 自托管字体 + preload
• font-display: swap
• unicode-range 子集化

JavaScript

• 代码分割 + 动态 import
• React 19 Server Components
• 移除未使用依赖