建站资源3步瘦身，加载快1.8倍

　　去年三月，老何在数据中台盯AB分流报表的时候，窗外雨刮器正一下一下刮着玻璃，左快右慢，节奏错开——跟我们当时埋点的timestamp对不上一模一样。他接了个电话，说“啊？CDN缓存没清？哦…那我重跑下session粒度”，挂了就把泡面汤倒进绿植盆里，那盆绿萝上星期刚枯死半边。

　　建站资源3步瘦身，加载快1.8倍。这数字不是我算的，是运维小吴拿LightHouse比对三次之后扔过来的截图，水印都糊了，但1.8那个小数点特别清晰，像钉进去的。我原以为得砍JS包、上code-splitting、配预加载提示符，结果他第一刀切的是“首页轮播图底下那个‘客户证言’浮动弹窗”——压根没人点，连hover都不到三百七十次/天。第二刀更绝：把六个第三方监测SDK砍成两个，剩下来那个还是因为BI要拉source_id才勉强续命。第三刀……第三刀其实是把Webpack里写的“自动注入谷歌字体”的插件给注释掉了——就一行，require('@google-fonts/roboto')，我们自己托管了woff2，省掉DNS+TLS握手+字体解析三段延迟。就这么三下，不碰核心逻辑，不动接口协议，甚至没动React版本号。

　　但你知道最讽刺的是啥？去年双十一前夜，增长组在灰度页测裂变按钮，A/B两组首屏TTFB差了整整十八秒——就因为B组页面多嵌了一个「实时在线客服」悬浮窗，里面塞了三套兼容性脚本，还带SVG雪碧图base64内联。他们没报性能问题，只报转化率掉点。我去看监控，发现LCP卡在客服图标渲染上，但监控报警阈值设的是2.5秒，它卡在2.7，没爆。我当场把告警阈值改成2.3，然后盯着看——十分钟后，告警邮件真来了，红色加粗，标题写着【LCP degrade】。可这玩意儿压根不是性能问题，是设计决策问题。设计师说“用户需要安全感”，运营说“竞品都有”，开发说“加个loading就没事”。结果呢？loading动画倒是转了，但转完用户已经切走了。小吴后来在我桌上放了张便签：“别信loading，信FID。”字歪得像喝多了。

　　优胜劣汰这个判断，我敢打包票站得住。不是玄学淘汰，是真实被业务甩掉的——那个客户证言弹窗，上线三个月零点击热力图，产品经理上周删需求文档时手抖划掉两行，连评审会都没开；六个SDK里的四个，其中一个叫“神策全链路追踪增强版”的，上周日志里查出半年没上报过任何event，最后一次alive心跳是去年腊八；至于Roboto字体，我们自查发现，所有用到该字体的CSS class，都在未激活tab页里，首页实际只用了系统默认字体。这哪是技术优化？这是把积灰三年的橱窗布扯下来，露出来后面本来就有光的窗框。

　　但有个事我说不准：到底是不是1.8倍。因为小吴的Lighthouse跑的是本地无痕模式+Throttling=Slow 3G，而真实用户跑的是各种Carrier、WiFi穿墙、iOS后台降频。上季度末我看了一眼RUM数据，首页FCP中位数确实从2.1秒压到了1.2秒，但尾部95分位没动，还是3.8秒左右。所以1.8这个倍数，大概率是中位数和均值之间的数学魔术——就像我们算DAU时把试用期用户和测试账号全塞进去，数字好看，但没人敢拿它批预算。

　　中间有天下午三点十七分，机房空调坏了，制冷机组嗡嗡响得像拖拉机挂二档，IT小李蹲在机柜旁边拿听诊器听风扇轴承，听出三个异响，其中一个是旧硬盘快挂的征兆。我们那会儿正调CDN缓存头，他说：“你们缓存策略写得太细，Cache-Control: max-age=300, stale-while-revalidate=60——你当浏览器是财务部？还等复核？”说完起身，袖口蹭了柜门上一块黑渍，像干掉的咖啡渍，也像没擦净的指纹油。我没接话，但那天之后我把所有max-age都改成了整数倍60，懒得再配revalidate，宁可让缓存稍微旧一点。

　　还有一次，增长组老周来找我聊裂变页，说“你看下为什么分享成功率卡顿”，我打开DevTools，Network里一堆pending状态，一刷新——原来是分享组件里绑了微信JSSDK初始化，但wx.config()之前没校验当前环境是否支持，导致iOS WebView里反复超时重试。我顺手把那段逻辑移到了share click事件触发后才加载，而不是页面load就拉。老周看着控制台里pending瞬间归零，说：“你早该这么干。”我没吭声。其实三个月前我就标红了这段代码，备注写的是“建议懒加载”，但他工单里没抄送运维，也没打优先级标签，就被吞在Jira backlog第27页里。现在他记得，是因为影响了当日GMV目标达成率报表的颜色——从黄变红了。

　　说回那三步。第一步切弹窗，我手抖删了两行HTML，忘了清CDN，第二天凌晨两点接到告警：一个海外节点返回了404，因为HTML里引用的JS路径还在，但文件已被删。第二步砍SDK，我漏看了友盟的UTM参数自动拼接逻辑，导致后续归因丢失，花了四小时回滚+补打埋点。第三步……第三步最搞笑：我注释掉字体引入之后，突然发现管理后台的Modal弹窗标题字号变小了——不是bug，是我们全局CSS里写了font-family: 'Roboto', -apple-system, sans-serif，而Robo­to没了，它直接降级到-sans，但iOS上-sans默认是SF Pro，字号渲染比原来小两像素。我盯着那两像素，愣了三分钟。最后没改CSS，只在modal标题外层加了个class，硬指定font-size: 16px。这事很小，但让我想起一件事：所谓“加载快1.8倍”，快的是谁？是Lighthouse跑分工具？是首屏首字节？还是那个盯着手机等弹窗出来的用户？

文章配图，仅供参考

　　下周我要去跟前端组开会，议程第一条写的是“讨论是否把字体子集化生成woff2+preconnect到静态域”，但我打算先掏出上周的RUM毛刺时间点，拉出三条典型失败链路——有一条卡在WebWorker加载阶段，worker里有个importScripts()地址是HTTP而非HTTPS，在新版Chrome里被block了。这事不疼，也不慢，就是每二十次访问，有一次白屏三秒。我不准备提优化，就放那儿，看看谁先伸手。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!