5年运维实战：建站资源优化，首屏快3倍、存储省70%

文章配图，仅供参考

　　先扔结论：首屏快三倍、存储省七十%，靠的不是新工具，是活人手里的剪刀。我们上周把所有 PNG 按尺寸切三档，JPG 改成 AVIF（只对 Chrome 和 Edge 生效），Safari 用户继续啃他们祖传的 JPEG2000——这个我敢打包票，因为 QA 的 Mac mini 装着 macOS 12.6，测出来 Lighthouse 跑分截图发到群里没人回，连个表情包都没有。后端老张昨天用 Python 写了个自动裁边脚本，结果忘了关服务器上的 SELinux，图片压缩进程卡在 audit.log 里打了两千行 denied 记录，他自己倒了杯水回来才看见。水杯是蓝色的，带公司logo那种，杯底有点裂纹，倒水时左手无名指一直压着杯沿。

　　真·剪刀操作：首页 banner 图原来是一张两千四百像素宽、带 alpha 通道的 PNG，大小六百一十三 KB；现在拆成三张——1x 留给旧 Android，2x 给主流机型，3x 专供折叠屏预加载。每张都手动抠过毛边，导出时关掉“保留编辑历史”，关掉“嵌入颜色配置文件”，关掉“保存为 PSD 副本”。勾选合并请求前我数了三遍：第一次确认路径是否写错，第二次确认 mime-type 是 image/avif 不是 image/webp，第三次……第三次其实是盯着桌面那个没关的录屏软件，进度条停在 00:27:18，录的是上周五凌晨两点的 nginx 错误日志分析，我没删，也不记得为什么开始录的。

　　存储省七十%？算的是静态资源总目录。但你猜怎么着——CDN 账单上月涨了十八点三。因为 AVIF 解码耗 CPU，Edge 浏览器在低端机上直接把内存吃满，触发了边缘节点自动升配。我翻了三次 billing dashboard，发现有个隐藏的“视频编码加速”开关默认开了，关掉之后省回来的钱刚好够抵扣三个月白名单域名续费。这事儿我没跟 PM 说，说了他又要加个“首屏首帧解码延迟监控”进 OKR。他上周刚把 KPI 折算成“每人每月降低两百毫秒用户体验熵值”，我在茶水间听见他就觉得胃酸上涌。

　　对面工程师换了一根充电线。Type-C，灰色，带编织纹，和他上个月那根不一样。他接上 MacBook 后屏幕亮了两秒又灭，重插三次才稳定——这事跟我优化无关，但它就发生在我双击 webpack.config.js 的同一分钟。我盯着他线缆接口处那一圈微微发白的胶皮，忽然想起去年十月我们砍掉的 Brotli 预压缩服务：本来省了三百兆带宽，结果 Nginx worker 进程多占了 4.7% CPU，高峰期超时翻倍。那次我认栽，这次我不认。

　　失败案例有俩：一是把 iconfont 全换成 SVG Sprite，结果某次 CI 发现某个按钮图标渲染错位了十九个像素，查了六小时发现是 CSS transform: scale(.98) 和 SVG viewBox 四舍五入冲突；二是给所有 JS chunk 加了 modulepreload，结果 Safari 15.4 直接拒载——不报错，就是白屏。我们后来加了个 UA sniffing，只对 Safari ≥16.5 推送，其他全回退。这事儿前端骂了三天，但没人提当年是他自己写死的 “navigator.userAgent.includes(‘Version/15’)” 判断逻辑。

　　我原以为把 Webpack 升到 5.89 就能自动解决 Tree Shaking，结果它连 lodash 的 debounce 都摇不掉——因为代码里写了 require(‘lodash/debounce’)，而 Webpack 5 的默认 mode=production 不开 ESM 模式。我加了 {type: 'module'} 才生效。但这么干之后，某个内部工具的 UMD 包直接炸了，require is not defined。最后是后端老张用 sed 在构建后临时补了一行 window.require = window.require || function(){}；我说这不优雅，他说：“运维要啥优雅，只要明天不告警就行。”

　　其实最狠的不是技术，是那张“用户留存与首屏耗时相关性”PPT。运营塞进来的时候说“每慢一百毫秒，次日留存降零点二个百分点”。我打开原始埋点数据看了三分钟——他们统计口径是“DOMContentLoaded 时间”，可我们优化的是 FCP。两个指标在安卓低配机上平均差四百十一毫秒。我把截图甩进群，底下回复是“按产品口径对齐”，然后 PM 发了个“辛苦啦”的微信表情。我关掉钉钉的时候，听见隔壁工位有人讲电话：“对，对，K8s 集群扩容的事再缓缓……客户说他们 CDN 好像比我们快。”

　　下一步？我打算把所有字体子集生成逻辑从 Node 移到 Nginx 模块里做 on-the-fly 字体切片——已经 fork 了 ngx_http_font_filter_module，正在改它的正则匹配部分。不过我现在不敢动线上配置，因为上次改 gzip_static，搞丢了三小时的日志索引，ES 里到现在还有个 unassigned shard 在那儿喘气。所以……先等等。等哪天服务器散热风扇彻底停了，我就知道该动手了。

（编辑：站长网）

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