地铁里点开一个活动页，转圈转了八秒，页面还没出来，多数人直接就划走了。数据上这叫首屏流失，活动还没开始，一半用户已经在加载条里丢掉了。投放买来的流量尤其可惜，每一秒加载都是钱。H5网页制作的加载优化不算高深技术，关键是有没有人认真做下面这几件事。先说结论：大部分卡顿的页面，问题都不出在玄学，出在没人管体积。
图片永远是大头
一个活动页的体积里，图片通常占七成以上。设计师交付的原图动辄好几兆，直接塞进页面就是灾难。该做的动作很固定：主视觉大图压缩到两百KB以内，格式优先用WebP，比传统格式小三成左右；长页面里的配图做懒加载，用户滑到哪里加载到哪里，首屏只扛首屏的量。这一套做完，页面体积从十几兆降到两三兆是常态，肉眼几乎看不出画质差别。设计师交付图的时候，顺手让他们导一份压缩版，这一步的沟通成本为零，收益巨大。
请求数和CDN别忽视
图片之外，加载慢还有个常见原因是请求太碎。图标、小图、接口请求堆到几十个，每个都有握手延迟，加起来就是几秒。该合并的图标合成雪碧图，接口能合并的做合并。静态资源务必放上CDN，用户就近取资源，这一步对分散在全国各地的用户效果立竿见影，成本一个月几十块起，是所有优化手段里性价比最高的，没有之一。有个数据可以参考，同样一个页面，上CDN前后首屏加载能差出两三秒，活动高峰期这个差距就是留资和流失的差距。
首屏体验要有兜底设计
再快的页面也有慢的时候，首屏要设计加载态：骨架屏或者带品牌元素的加载动画，让用户知道页面活着。核心内容优先渲染，轮播图、视频这类非关键模块延后加载。分享进来的用户第一眼看到的应该是有内容的画面，而不是一片空白加转圈，很多人等不了第二次。H5网页制作的首屏优化说到底是取舍，砍掉炫技的部分，把加载预算留给真正卖货的内容。
- 首屏大图压到两百KB内，用WebP格式
- 长页面配图懒加载
- 静态资源上CDN
- 首屏设计骨架屏兜底
建议两条：验收页面时别在办公WiFi里看，用手机流量实测一次加载速度，那才是用户真实的环境。对加载有硬性要求的项目，让比格网络这类团队在开发阶段就把体积预算写进验收标准，页面做好再优化，永远比不上从一开始就按规范做。三秒不是玄学，是用户耐心的大概底线，别让页面死在起跑线上。
