慢一秒丢多少单

有个数据你可能不信：网页加载时间每增加1秒，转化率下降7%。亚马逊做过测试，页面慢100毫秒，收入就降1%。这不是吓唬人，是真实数据。

昆山一家做3C配件的电商公司，去年双十一前找我们做性能优化。他们的网站首页加载时间3.2秒，商品详情页更慢，4.5秒。老板姓周，说用户反馈"你们网站怎么这么卡"，后台数据显示跳出率62%，购物车放弃率48%。优化完之后，首页加载降到0.8秒，跳出率降到39%，订单转化率从1.8%涨到2.7%。收入算下来，一个月多卖了11万。周老板后来见人就说：性能优化是最划算的投入。

下面是具体怎么做的。

第一刀：图片优化（效果最明显）

电商网站70%的页面体积是图片。周老板的网站，首页Banner图3.2MB一张，商品图每张800KB-1.2MB，一屏展示12个商品，光图片就十几兆。用户打开页面，浏览器要下载这些图片，3G/4G网络下能不慢吗？

做了三件事：

第一，图片压缩。用WebP格式替代JPEG，同等画质体积减少30%-50%。Banner图从3.2MB压到680KB，商品图从1MB压到200KB左右。质量几乎看不出差别。

第二，懒加载。用户打开页面，只加载可视区域内的图片，下面的图片等用户滚动到了再加载。首屏加载量直接减少60%。

第三，多尺寸切图。商品列表用缩略图（200x200），详情页用大图（800x800），不要一刀切都用原图。后台上传一张图，系统自动生成3-4个尺寸版本。

光图片优化这一项，页面加载时间从3.2秒降到1.8秒。

第二刀：缓存策略（性价比最高）

很多电商网站每次访问都去数据库查数据，这是最大的性能浪费。商品信息、分类树、首页推荐位这些内容，更新频率很低，完全可以用缓存。

给周老板的网站加了三层缓存：

浏览器缓存——静态资源（CSS、JS、图片）设置缓存头，用户第二次访问直接读本地缓存，不用重新下载。Cache-Control设为max-age=31536000（一年），文件名带版本号hash，更新时自动失效。

CDN缓存——全国各地的用户访问网站，数据从苏州服务器传过去，距离远的地方延迟高。接入CDN后，静态资源缓存在全国各节点，用户从最近的节点取数据。张家港的用户和新疆的用户，访问速度差不多。CDN费用不贵，周老板用的阿里云CDN，每月流量100GB，费用80块钱。

服务端缓存——商品详情、分类列表这些高频查询的数据，用Redis缓存。数据库查询量降了75%，服务器CPU占用从80%降到30%。

加完缓存，加载时间从1.8秒降到1.1秒。

第三刀：数据库优化（治本）

缓存只是治标，数据库本身慢，早晚还是瓶颈。周老板的数据库有200万条商品数据，商品列表页查询要1.2秒，太慢了。

排查发现两个问题：一是缺少索引，商品分类查询走的是全表扫描；二是有个大SQL，关联了6张表，查一次要扫几十万行数据。

优化方案：给常用查询字段加索引（category_id、status、sort_order），查询时间从1.2秒降到50毫秒。那个大SQL拆成3个小查询，在应用层组装数据，总耗时从2.3秒降到180毫秒。

还有一个技巧：分库分表。订单表数据量增长最快，周老板的网站日均订单3000单，半年就积累了50万条订单记录。按月分表后，单表数据量控制在10万以内，查询速度稳定在100毫秒以下。

第四刀：前端瘦身（细节但有效）

最后0.3秒的优化在前端。做了几件事：

CSS和JS合并压缩——原来23个CSS文件、31个JS文件，合并后各变成3个，体积减少40%。

异步加载——第三方脚本（统计代码、客服插件、分享按钮）用async或defer异步加载，不阻塞页面渲染。

预连接——页面里用到的第三方域名（如支付接口、图片服务器），在head里加preconnect，提前建立TCP连接，省掉DNS解析和握手时间。

HTTP/2——服务器开启HTTP/2，多路复用，一个TCP连接并行传输多个文件，比HTTP/1.1快30%以上。

全部做完，加载时间稳定在0.8秒以内。周老板用GTmetrix测了一下，Performance Score从38分飙到94分。

优化不是一次性的

网站上线后，数据量会增长，功能会增加，性能会慢慢退化。建议每月做一次性能检测，用Google PageSpeed Insights或GTmetrix跑一下，发现退化及时处理。周老板现在每月花半天做性能巡检，每次都能找到一两个可以优化的点。这个习惯值千金。

性能优化不是玄学，是有方法的。图片、缓存、数据库、前端，四个维度逐个排查，效果看得见。苏州做电商的老板们，如果你的网站打开超过2秒，赶紧优化，每拖一天都在丢订单。