你知道吗？移动端用户能忍受的页面加载时间只有3秒——而HTH官方网页版在改版前平均加载要4.2秒。这意味着将近一半的访客在页面完全呈现前就已经关掉了。我们团队花了三个月，把加载时间砍到了0.8秒。怎么做到的？下面三个步骤全是实战经验。
第一步：图片体积砍掉70%——WebP + 懒加载的真实案例
很多人以为优化图片就是压压尺寸，那就错了。HTH官方网页版有大量高清产品图，最初每张图1.5MB，首屏要下载5MB的图片资源。我们干了两件事：一是把所有图片转成WebP格式，配合 图片优化技术，体积直接缩到原始JPEG的30%。二是给非首屏图片加了懒加载——用户滚到哪，才加载哪。再配合CDN缓存，首屏大小从5.1MB降到了0.9MB。坦白讲，这一步就省掉了80%的带宽成本，而且画质肉眼根本看不出区别。
第二步：代码分块——从整包JS到按需加载的实战
HTH官方网页版早期是单一大包，一个app.js就2.3MB。用户访问首页，却要加载整个后台逻辑的代码。我用webpack的代码分割把路由、组件拆成多个chunk。比如用户只点登录，就只加载登录模块的代码，其他模组暂时不管。同时用Prefetch预加载核心组件。这样一来，首页JS体积从2.3MB降到400KB。说实话，光这一步，页面交互响应时间就快了3倍。你可能会担心请求数增多——其实HTTP/2多路复用完全扛得住。
第三步：服务端渲染——首屏白屏时间从1.2秒到0.3秒
前面两步搞定了体积，但HTH官方网页版是SPA应用，首屏需要先