前端性能优化：从理论到实践

为什么性能很重要

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

总结

性能优化是持续过程，不是一次性任务。建立监控 → 测量 → 优化 → 验证的闭环，才能真正控制应用的性能表现。