我的前端首屏性能优化实战：从 3 秒到 800 毫秒

去年接手公司一个中后台项目时，线上首页的白屏时间稳定在 3 秒以上，用户在圈里吐槽「打开慢得像在拨号上网」。这段时间我把首屏从 3 秒优化到 800 毫秒，踩了不少坑，也沉淀出一套对绝大多数前端项目都适用的套路。这篇文章不堆砌理论，只分享我实际动手做过的优化清单。

第一步：先测量，别凭感觉优化

性能优化的第一铁律是「先测量，再动手」。我一开始凭直觉压缩了几个 PNG，又删掉了几行看起来多余的代码，结果 Lighthouse 分数纹丝不动。后来我用 Chrome DevTools 的 Performance 面板和 `web-vitals` 埋点跑了一整天真实用户数据，才发现问题根本不在 Javascript 执行时间，而是出在网络请求的串行阻塞上。

我推荐把优化分成三个层面看待：一是「体积」，也就是资源到底有多大；二是「数量」，也就是发起请求的次数；三是「时机」，也就是什么时候请求。很多团队只盯着体积，却忘了首屏慢往往是被几十个小的 `