前端性能优化：让网页飞起来

为什么性能重要？

• 47% 用户期望页面 2 秒内加载
• 每延迟 1 秒，转化率下降 7%
• Google 将页面速度作为排名因素

核心优化指标

• FCP (First Contentful Paint)：首次内容绘制
• LCP (Largest Contentful Paint)：最大内容绘制
• CLS (Cumulative Layout Shift)：累积布局偏移
• FID (First Input Delay)：首次输入延迟

图片优化

1. 选择合适格式

• WebP：比 JPEG 小 30%，支持透明
• AVIF：更新格式，压缩率更高
• SVG：图标和简单图形

2. 懒加载

<img src="image.jpg" loading="lazy" alt="...">

3. 响应式图片

<img srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 600px) 480px, 768px"
     src="medium.jpg">

代码优化

1. 代码分割

// 动态导入
const module = await import("./heavy-module.js");

2. 树摇 (Tree Shaking)

只打包实际使用的代码，移除未引用部分。

3. 压缩混淆

使用 Terser、esbuild 等工具压缩代码。

缓存策略

# 静态资源长期缓存
location ~* \.(jpg|jpeg|png|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

CDN 加速

将静态资源部署到 CDN，就近访问提升速度。

性能监控

• Lighthouse：本地审计
• Web Vitals：真实用户监控
• PageSpeed Insights：在线分析

性能优化是持续过程，定期检测持续改进！