前端性能优化:从理论到实践
为什么性能很重要
Google 研究表明,页面加载时间每增加 1 秒,移动端转化率下降 20%。性能不是锦上添花,而是直接影响业务指标的核心功能。
Core Web Vitals
Google 定义的三个核心性能指标:
- LCP(Largest Contentful Paint)— 最大内容绘制,衡量加载体验,目标 < 2.5s
- FID(First Input Delay)— 首次输入延迟,衡量交互响应,目标 < 100ms
- CLS(Cumulative Layout Shift)— 累计布局偏移,衡量视觉稳定性,目标 < 0.1
测量工具
# Lighthouse CLI
npx lighthouse https://example.com --output json
# web-vitals 库(在代码中埋点)
import { getCLS, getFID, getLCP } from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
实践优化手段
资源加载优化:
- 图片使用
next/image,自动 WebP 转换 + 懒加载 - 字体使用
next/font,消除布局偏移 - 第三方脚本用
next/script控制加载策略
代码分割:
import dynamic from "next/dynamic";
const HeavyComponent = dynamic(() => import("./HeavyComponent"), {
loading: () => <Skeleton />,
});
缓存策略:
- 静态资源:
Cache-Control: max-age=31536000, immutable - HTML 页面:
Cache-Control: no-cache(配合 ETag) - API 响应:根据数据时效性设置合适的 TTL
总结
性能优化是持续过程,不是一次性任务。建立监控 → 测量 → 优化 → 验证的闭环,才能真正控制应用的性能表现。