我把首页从 3.2 秒压到 380 毫秒，记一笔流水账

不是「前端性能十大技巧」那种爽文。这是一份按时间顺序的真实记录，包括那些我做了、但几乎没用的事。

我的首页原本加载要 3.2 秒。对一个博客来说，这太慢了。于是我开始一个个改。

第一个改动：把那张英雄大图换掉

原来首屏顶着一张 1.2MB 的图。换成一张压缩过的 WebP，体积直接掉到 80KB。

效果：少了约 1.1 秒。 这一项就贡献了最大头的提升。

教训：很多时候瓶颈就是「图太大」，根本不用上什么高级手段。

之前用的网络字体是「先显示空白，字体到了再换」，用户会看到文字突然跳一下。改成 font-display: swap 之后，先用系统字体顶着，网络字体到了再无缝替换。

效果：首屏文字出现快了约 600 毫秒，而且没有了那下讨厌的抖动。

首页引了一个其实只在文章页才用得到的代码高亮库。把它从首页拆出去、按需加载。

效果：又省了约 400 毫秒。

到这里，三个改动加起来，已经从 3.2 秒掉到了 1.1 秒左右。后面我做的十几件事，加起来才再省 700 毫秒。

说实话，下面这些我花了不少时间，收益却小得可怜：

上 Service Worker 做缓存：理论上很美，但我的页面本来就不大，缓存省下的那点时间，被 Service Worker 本身的启动成本吃掉了。
给所有图片加懒加载：问题是我首页根本没几张图，懒加载救不了什么。
拆了一堆小模块做并行加载：微观优化，用户根本感知不到。

性能优化不是收集技巧，是找到那几个最肥的瓶颈，先把它掐掉。剩下的，能改就改，改不动也别硬来。