前端性能优化：从 5 秒到 1 秒的实战经验

上周优化了一个电商首页，首屏加载从 5 秒降到 1 秒。分享具体做法。

性能分析先行

用 Chrome DevTools 的 Lighthouse：

# 命令行运行
npx lighthouse https://your-site.com --view

关键指标：

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

优化策略

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

<!-- ❌ 原始 -->
<img src="product.jpg" alt="商品">

<!-- ✅ 优化后 -->
<img 
  src="product.webp" 
  srcset="product-400.webp 400w, product-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  loading="lazy"
  alt="商品"
>

收益：图片体积减少 70%

2. 代码分割

// ❌ 全部打包
import { Chart, Table, Modal } from "./components";

// ✅ 按需加载
const Chart = lazy(() => import("./components/Chart"));
const Table = lazy(() => import("./components/Table"));

Webpack 配置：

optimization: {
  splitChunks: {
    chunks: "all"
  }
}

收益：初始包体积减少 60%

3. 缓存策略

# Nginx 配置
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

收益：二次访问速度提升 90%

4. 预加载关键资源

<link rel="preload" href="/fonts/main.woff2" as="font">
<link rel="prefetch" href="/next-page.js">

5. 减少 HTTP 请求

• 合并小图标为 SVG Sprite
• 使用 CSS Sprite
• 内联关键 CSS

实际效果对比

指标	优化前	优化后	提升
首屏时间	5.2s	1.1s	79%
页面体积	3.8MB	890KB	77%
请求数	87	32	63%

持续监控

// 性能监控
window.addEventListener("load", () => {
  const perf = performance.getEntriesByType("navigation")[0];
  console.log("加载时间:", perf.loadEventEnd - perf.startTime);
});

---

性能优化是持续过程，不是一次性任务。建立监控，持续改进。

每 100ms 的优化，都能提升用户体验。