问题描述
日照某海鲜电商网站反映：用户投诉网站太慢，尤其是在手机上打开首页要等8秒以上。数据分析显示跳出率高达73%（行业平均约40%），直接影响了销售额。
性能诊断过程
工具链
- Lighthouse（Chrome DevTools内置）
- PageSpeed Insights（Google在线工具）
- WebPageTest（多地点测试）
- Chrome DevTools Performance面板（深入分析）
诊断结果（优化前Lighthouse评分：38分）
- 首屏渲染(FCP)：6.8秒（目标小于1.8秒）
- 最大内容绘制(LCP)：8.2秒（目标小于2.5秒）
- 首次输入延迟(FID)：180ms（目标小于100ms）
- 累积布局偏移(CLS)：0.25（目标小于0.1）
- 总阻塞时间(TBT)：2800ms（目标小于200ms）
优化措施（按影响排序）
优化一：图片优化（影响最大！节省约4秒）
- 首页有38张图片，原图总大小12MB
- 改为WebP格式（压缩率比JPEG高30-50%）
- 实施响应式图片（不同屏幕尺寸加载不同分辨率）
- 懒加载（视口外的图片延迟加载）
- 缩略图用CSS背景图替代img标签
- 结果：图片总大小从12MB降至1.8MB
优化二：减少HTTP请求（节省约1.2秒）
- 合并10个CSS文件为1个（从10次请求减到1次）
- 合并15个JS文件为2个（vendor.js + app.js）
- 使用SVG Sprite替代10个小图标PNG
- 内联关键CSS（首屏需要的CSS直接放在HTML里）
优化三：启用压缩和缓存（节省约0.8秒）
- Gzip压缩（文本资源压缩率70%+）
- Brotli压缩（比Gzip再高15-20%）
- 设置合理的Cache-Control头（静态资源缓存1年，用hash文件名做版本控制）
优化四：代码层面的优化（节省约0.7秒）
- 删除 unused CSS（从120KB精简到45KB）
- Tree Shaking删除未使用的JS代码
- 延迟加载非首屏JS（第三方统计/聊天插件等）
- 预连接(preconnect)到关键第三方域名
- DNS预解析(prefetch)下一页可能需要的资源
优化五：服务端优化（节省约0.5秒）
- 数据库查询优化（首页SQL从14条优化到3条，大量用缓存）
- Redis缓存热门商品数据（TTL=5分钟）
- 开启HTTP/2（多路复用，解决队头阻塞）
- 接入CDN（静态资源从就近节点加载）
优化结果
Lighthouse评分：38上升到94分
FCP：6.8s降到1.2s | LCP：8.2s降到1.5s | FID：180ms降到45ms | CLS：0.25降到0.05
跳出率：73%降到41% | 平均停留时间：48秒升到2分15秒
GMV（月成交额）：优化后次月环比增长22%