电商网站性能优化案例

作者：陈川阅读数：11867人阅读分类：性能优化

背景与问题分析

某电商平台日均UV超过100万，大促期间峰值QPS达到5000+。随着业务增长，页面加载速度从1.2秒恶化到4.5秒，移动端首屏渲染时间超过5秒，导致转化率下降23%。通过Lighthouse检测发现主要问题：

未优化的图片资源占总体积78%
未拆分的JavaScript包达到3.2MB
第三方脚本阻塞主线程达1.8秒
未启用HTTP/2导致请求排队严重

静态资源优化

图片懒加载与格式选择

<!-- 原生懒加载实现 -->
<img src="placeholder.jpg" data-src="product.jpg" loading="lazy" alt="商品图">

<!-- WebP回退方案 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg"> 
  <img src="image.jpg" alt="商品展示">
</picture>

实施效果：

首屏图片请求从28个减少到6个
平均图片体积从450KB降至120KB
采用AVIF格式的Banner图比JPEG小65%

字体文件优化

/* 使用font-display避免布局偏移 */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

关键措施：

将TTF转换为WOFF2格式，体积减少40%
预加载关键字体：<link rel="preload" href="font.woff2" as="font" crossorigin>
移除未使用的字重，从12个字体文件精简到4个

JavaScript优化

代码拆分与按需加载

// 动态导入商品详情模块
const loadDetailModule = () => import('./productDetail.js');

// 路由级代码拆分
const ProductPage = React.lazy(() => import('./ProductPage'));

优化效果：

主包体积从3.2MB降至1.4MB
通过SplitChunksPlugin将vendor包拆分为lodash、moment等独立包
使用Tree Shaking清除未引用代码，减少35%无用代码

Web Workers处理计算任务

// 主线程
const worker = new Worker('./searchWorker.js');
worker.postMessage({ query: '手机' });
worker.onmessage = (e) => updateResults(e.data);

// worker.js
self.onmessage = (e) => {
  const results = performHeavySearch(e.data.query);
  self.postMessage(results);
};

应用场景：

商品搜索过滤计算
价格排序算法
购物车金额汇总

网络层优化

HTTP/2与服务器推送

Nginx配置示例：

server {
  listen 443 ssl http2;
  
  location / {
    http2_push /static/css/main.css;
    http2_push /static/js/runtime.js;
  }
}

实施效果：

资源加载时间减少40%
通过多路复用减少TCP连接数
服务器推送关键CSS使FCP提前300ms

CDN策略优化

# 缓存规则示例
/*.js    cache-control: public, max-age=31536000, immutable
/*.css   cache-control: public, max-age=31536000
/*.avif  cache-control: public, max-age=604800

改进点：

边缘节点命中率从72%提升到98%
动态API路由使用stale-while-revalidate策略
智能压缩：Brotli用于文本，Zopfli用于图片

渲染性能优化

虚拟滚动长列表

// React实现示例
<VirtualList
  itemCount={10000}
  itemSize={200}
  renderItem={({index, style}) => (
    <div style={style}>商品#{index}</div>
  )}
/>

性能对比：

渲染10000条商品：DOM节点从10万+降到20个
内存占用减少85%
滚动帧率从8fps提升到60fps

优化CSS选择器

/* 不推荐 */
div.container ul li a.btn {}

/* 推荐 */
.product-btn {}

优化原则：

避免超过3层的嵌套选择器
减少通用选择器使用
对动态内容使用BEM命名法

监控与持续优化

性能指标埋点

// 使用Performance API
const [fcp, lcp] = await Promise.all([
  performance.getEntriesByName('first-contentful-paint')[0],
  performance.getEntriesByName('largest-contentful-paint')[0]
]);

// 发送到监控系统
tracker.send('PERF_METRICS', {
  fcp: fcp.startTime,
  lcp: lcp.startTime,
  cls: getCLS()
});

监控体系：