BlogOctober 20, 2026把首屏从 2.1s 压到 0.8s
一次没什么技术含量的优化，但每一步都有用 这个笔记站最早是拿来试组件的，一路加东西加到首屏 2.1s。上个月重写组件库，顺手把性能也过了一遍，现在稳定在 0.8s 左右。没有黑科技，就是四件事。
之前用 Google Fonts 的 <link>，中文字体文件大，首屏一直在等。改成 font-display: swap 加系统字体兜底之后，文字先出来，字体后面替换。
代价是切换瞬间会有一次轻微的布局跳动，用 size-adjust 调了行高之后基本看不出来。
原来所有封面图都没写宽高，浏览器无法预留空间，列表会抖一下再稳定。加上 width/height 之后，CLS 直接归零。
顺带把首屏之外的图全部改成懒加载，初始请求从 14 个降到 5 个。
组件库里有一半的包只用了一次，还有一个只为了一行日期格式化。删掉之后 bundle 少了 40%。
这件事的教训是：每次 npm install 之前先问一遍真的需要吗。
原来文章列表是在渲染时排序和读文件元信息的。改成构建期生成索引，运行时只读一个 JSON。
四件事加起来大概做了两个晚上。回头看，性能问题很少是"某个技术点不会"，多是"没人认真数过请求"。
