⚡ 性能优化
性能指标
| 指标 | 含义 | 目标值 |
|---|---|---|
| FCP | 首次内容绘制 | < 1.8 秒 |
| LCP | 最大内容绘制 | < 2.5 秒 |
| TTI | 可交互时间 | < 3.8 秒 |
| TBT | 总阻塞时间 | < 200ms |
| CLS | 累积布局偏移 | < 0.1 |
图片优化
图片通常占官网 60% 以上的体积。
| 优化方法 | 说明 | 效果 |
|---|---|---|
| WebP/AVIF 格式 | 现代图片格式 | 比 JPEG 小 30-50% |
| 响应式图片 | srcset 根据设备加载 | 避免加载过大图片 |
| 懒加载 | 滚动到视口再加载 | 减少首屏加载 |
| 图片压缩 | TinyPNG、Squoosh | 无损压缩 20-30% |
| CDN 分发 | 就近节点提供图片 | 降低延迟 |
JavaScript 优化
- ✅ 代码分割：按路由或组件分割
- ✅ Tree Shaking：移除未使用代码
- ✅ 异步加载：defer/async 非关键 JS
- ✅ 预加载关键资源：<link rel="preload">
- ✅ 减少依赖：使用轻量替代
- ✅ Web Workers：耗时任务离线程
CSS 优化
- ✅ 关键 CSS 内联：首屏样式直接嵌入 HTML
- ✅ 移除未使用 CSS：PurgeCSS 工具
- ✅ CSS 压缩：生产环境压缩
- ✅ 避免 @import：使用 link 标签
- ✅ 减少选择器复杂度：避免深层嵌套
缓存策略
| 缓存类型 | 说明 | 配置示例 |
|---|---|---|
| 浏览器缓存 | 静态资源长期缓存 | Cache-Control: max-age=31536000 |
| CDN 缓存 | 边缘节点缓存 | CDN 控制台配置 |
| Service Worker | 离线缓存 | Workbox 库 |
| HTTP/2 | 多路复用 | 服务器配置 |
性能监控工具
| 工具 | 用途 |
|---|---|
| Lighthouse | 综合性能审计 |
| PageSpeed Insights | Google 官方性能分析 |
| WebPageTest | 多地点测试 |
| SpeedCurve | 持续性能监控 |
| Chrome DevTools | 本地性能分析 |