前端性能优化实战

页面加载速度直接影响用户体验和转化率。分享我将首页从 3 秒优化到 0.3 秒的完整过程。

性能分析

使用工具

1. Lighthouse：Chrome 内置性能分析
2. WebPageTest：多地点测试
3. Chrome DevTools：Network 面板

关键指标

• FCP (First Contentful Paint): 首次内容绘制
• LCP (Largest Contentful Paint): 最大内容绘制
• TTI (Time to Interactive): 可交互时间

目标：

• LCP < 2.5 秒
• TTI < 3.8 秒

优化策略

1. 图片优化（效果最明显）

问题： 原图总大小 5MB

方案：

# 使用 WebP 格式
convert image.jpg image.webp  # 体积减少 70%

# 懒加载
<img src="placeholder.jpg" data-src="real.jpg" loading="lazy">

# 响应式图片
<picture>
  <source media="(max-width: 600px)" srcset="small.webp">
  <source media="(max-width: 1200px)" srcset="medium.webp">
  <img src="large.webp" alt="描述">
</picture>

效果： 图片体积从 5MB → 800KB

2. 代码分割

问题： 打包后 bundle.js 2MB

方案：

// React 懒加载
const Dashboard = lazy(() => import("./Dashboard"));
const Settings = lazy(() => import("./Settings"));

// 路由级别分割
const routes = [
  { path: "/", component: Home },
  { path: "/dashboard", component: Dashboard },
];

效果： 首屏 JS 从 2MB → 300KB

3. 资源预加载

<!-- 预加载关键资源 -->
<link rel="preload" href="/font.woff2" as="font">
<link rel="prefetch" href="/next-page.js">

<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="//cdn.example.com">

4. 缓存策略

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

# HTML 不缓存
location ~* \.html$ {
  expires -1;
  add_header Cache-Control "no-cache";
}

5. CDN 加速

将静态资源部署到 CDN，全球加速。

配置：

• 图片、字体、JS、CSS 走 CDN
• API 请求回源站

6. 减少 HTTP 请求

// ❌ 多个小请求
fetch("/api/user")
fetch("/api/posts")
fetch("/api/comments")

// ✅ 合并请求
fetch("/api/dashboard") // 返回所有数据

7. Tree Shaking

// ❌ 引入整个库
import _ from "lodash";

// ✅ 按需引入
import debounce from "lodash/debounce";

优化结果

指标	优化前	优化后	提升
首屏时间	3.2s	0.3s	10x
页面大小	5.8MB	650KB	9x
HTTP 请求	85	12	7x
Lighthouse	45	98	53pts

持续监控

// 上报性能数据
window.addEventListener("load", () => {
  const perf = performance.getEntriesByType("navigation")[0];
  sendToAnalytics({
    loadTime: perf.loadEventEnd - perf.startTime,
    domReady: perf.domContentLoadedEventEnd - perf.startTime
  });
});

检查清单

• 图片压缩 + WebP
• 代码分割
• 开启 Gzip/Brotli
• 配置缓存
• 使用 CDN
• 减少请求数
• 移除未用代码
• 懒加载非关键资源

性能优化是持续过程，每次改动都要测量影响！