前端性能优化：加载速度提升 10 倍

为什么性能重要？

页面加载每慢 1 秒，转化率下降 7%。性能直接影响用户体验和业务指标。

核心优化指标

• FCP (First Contentful Paint): 首次内容绘制
• LCP (Largest Contentful Paint): 最大内容绘制
• CLS (Cumulative Layout Shift): 累积布局偏移
• TTI (Time to Interactive): 可交互时间

图片优化

<!-- 使用 WebP 格式 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="description">
</picture>

<!-- 懒加载 -->
<img src="image.jpg" loading="lazy">

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

代码优化

// 代码分割
const module = await import('./module.js');

//  Tree Shaking
import { debounce } from 'lodash-es';

// 压缩和混淆
// 使用 webpack/rollup/vite 构建

缓存策略

Cache-Control: max-age=31536000, immutable
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

CDN 与资源预加载

<link rel="preload" href="font.woff2" as="font">
<link rel="preconnect" href="https://cdn.example.com">

实用工具

• Lighthouse
• WebPageTest
• Chrome DevTools Performance

性能优化是持续过程，每次改进都能带来更好的用户体验！