商城小程序里，商品详情页是转化的关键页——首屏白屏超过3秒，约一半用户会直接退出。本文从图片、接口、渲染三个维度讲清楚详情页怎么优化，全部是可落地的数值和做法。
一、首屏图片是最大头
详情页首屏往往是轮播图加标题加价格。一张商品原图动辄3到5MB，不做压缩和格式优化，弱网下首屏要8到10秒。常用做法：用WebP或AVIF替代JPG，同等画质体积大约小30%到50%；首屏图压缩到宽度750px、质量80，单张控制在150KB以内；非首屏图用懒加载，进入视口前不请求。
| 优化项 | 不优化 | 优化后 |
|---|---|---|
| 首图体积 | 约2MB | 约150KB |
| 首屏耗时(4G) | 约6s | 约1.8s |
| 跳出率 | 约55% | 约28% |
二、接口：详情数据别一次拉全
常见错误是一个接口把轮播、价格、库存、详情图文、推荐位全返回，单接口2MB以上。拆法是：首屏只取必要字段，标题、价格、库存、主图列表加起来约20KB；详情富文本和推荐商品滚动后再加载；价格和库存走短轮询，不要塞进主详情接口。
三、渲染：长详情页别一次性渲染
图文详情经常几千字加几十张图，一次性塞进页面会明显卡顿。分段渲染：先渲染前3屏，滚动到底部再渲染下一段；图片用微信官方懒加载；列表页点进详情时把已有数据传过来，详情页先渲染骨架屏，接口回来再补，避免白屏。
四、一组实测数据
一个月活10万的商城，详情页按上面改造后：首屏平均耗时从5.8s降到1.9s，详情页到加购的转化率从2.1%升到3.4%，加载相关接口量降了约40%。投入主要是图片压缩和接口拆分，后端改动并不大。
常见问题
问：一定要上CDN吗？
答：商品图建议走CDN加图片处理服务，按宽度裁剪和格式自适应，成本很低但收益最大。
问：详情页用原生还是webview？
答：商城建议用原生小程序渲染，webview首屏更慢，而且和下单链路割裂。
问：图片压缩会不会糊？
答：宽度750、质量80肉眼几乎无差别，WebP在微信小程序里全端支持。
问：首屏要等接口吗？
答：列表传参先渲染骨架，接口200ms内回来即可，超过3秒展示兜底图。
问：怎么衡量优化效果？
答：盯首屏耗时、接口成功率、详情到加购转化率三个指标，不要只看包体积。
