杭州未来科技城某SaaS团队攻克首屏卡顿的完整记录

杭州未来科技城「云藜SaaS」的注册页，连续三周被用户投诉打开慢。运营总监陈帆把截图甩进技术群：苹果手机上那个转圈圈要转四秒多。他们后端是Go，前端是Next.js，按理不该这么拉。

定位问题只花了四十分钟

陈帆的团队用Chrome DevTools录了一次加载，瀑布图里排第一的是一张没压缩的团队合影，2.3MB。第二是首页一次性import了整个图表库，其实只用了三个折线图。第三是字体文件走了外网CDN，杭州到节点绕了半圈。

说白了，不是框架不行，是没做按需加载。他们把合影压到180KB，图表改按需引入，字体换成本地托管。重测一遍，首屏从4.2秒压到0.9秒，提升近百分之七十九。

首屏卡顿八成是资源没管好，不是代码写烂。我们顺手帮他们加了预连接和骨架屏，白屏时间再砍掉三百毫秒。

上线后那组对比数字

改动上线两周，注册转化率从百分之十一点七涨到百分之十六点四。陈帆算了笔账：他们每月新注册约两千人，多出来的四百多个注册，按客单价折算一年多进账大约三十万。而这次优化总共花了两个工程师一天半。

别天真，以为加服务器就能解决。云藜原本准备把带宽从五兆升到二十兆，报价每月多付一千二。我们拦住了，告诉他们先治本。后来证明，治本比加带宽便宜二十倍。

杭州滨江另一家「栖屿科技」遇到过更怪的：页面在安卓机上快，在苹果机上慢。后来查出是某个动画用了没加前缀的CSS属性，iOS旧版不认，回退成重排。一行代码，问题解决。

这类事我们见得太多了。城西科技园一家做招聘小程序的团队，首屏慢是因为把城市列表三千条全塞进首屏请求。改成懒加载后，请求体积从1.1MB掉到90KB。用户留存当天就动了。

给陈帆团队留了条规矩：每次发版前跑一次Lighthouse，性能分低于九十不让合。半年下来他们性能分稳定在九十五以上，投诉归零。这套动作我们现在给杭州六个客户都铺了，反馈一致：省心。

回头看，首屏问题最怕瞎猜。有人一慢就加缓存、换框架、堆CDN，钱花了问题还在。云藜这事告诉我们，先量再改，四十分钟定位比三天乱试值钱得多。