首屏加载从 8 秒到 1.5 秒：一次完整的性能优化记录

运营反馈说落地页"打开好慢，用户都跑了"。自己用 4G 模拟测了一下，首屏 8.2 秒。花了三天时间优化到 1.5 秒左右，把做了的事和每步的收益记一下。

先测量，别瞎猜

Lighthouse + Chrome Network 面板瀑布图，问题一目了然：

• vendor.js 打包后 2.3MB，没开 gzip，也没拆包
• 首屏大 banner 是 1.8MB 的原图，还叠了个轮播
• 字体文件 4 个，其中两个首屏根本没用上
• echarts 全量引入，页面里只用了折线图

逐项优化

1. 路由懒加载 + 拆包。路由级 component 改成 () => import()，首屏只留必要代码。同时把 echarts 按需引入，vendor 降到 900KB。

2. 开 gzip + 强缓存。Nginx 加 gzip on; gzip_comp_level 5;，JS 体积传输层面直接砍到 300KB 上下。静态资源配 hash 文件名 + 一年强缓存，回访用户基本零下载。

location ~* \.(js|css|woff2)$ {
    expires 365d;
    add_header Cache-Control "public, immutable";
}

3. 图片处理。banner 从 PNG 换成质量 80 的 WebP，1.8MB 变 180KB；轮播首屏之外的图全部 loading="lazy"。老浏览器不支持 WebP 的问题用 picture 标签做了回退。

4. 字体裁剪。字蛛（font-spider）把中文字体从 5MB 裁到 400KB，只包含页面用到的字。

5. 预连接。第三方统计和 CDN 域名加了 preconnect，省了两个 DNS + TLS 握手的时间。

结果

4G 环境下首屏 8.2s → 1.5s，Lighthouse 分数从 31 到 89。收益最大的是 gzip（-4s）和图片（-2s），两件事加起来不到半天工作量。很多时候性能优化不需要什么高级技巧，把最粗的管道问题解决掉就够了。

做完之后把 Lighthouse 塞进了 CI，分数低于阈值就构建失败，防止慢慢劣化回去。这个比优化本身更重要。