性能预算：给博客上枷锁

团队项目有性能委员会，个人项目只有自己。所以性能必须从”美德”降维成”预算”——一组写死的数字，进 CI 卡口，超了就是构建失败，没有商量。

我的预算表

指标	预算	检测方式
首屏 JS	≤ 60KB gzip	构建报告
CSS	≤ 40KB gzip	构建报告
LCP（4G）	≤ 2.0s	Lighthouse mobile
CLS	≤ 0.05	Lighthouse
单页图片总量	≤ 800KB	构建期脚本
首屏请求数	≤ 25	DevTools

预算怎么变成卡口

CI 里跑 Lighthouse CLI 的 autorun，断言写进配置文件。预算不是报告，报告没人看；断言才会让人疼：

{
  "assertions": {
    "categories:performance": ["error", {"minScore": 0.9}],
    "largest-contentful-paint": ["error", {"maxNumericValue": 2000}]
  }
}

静态站怎么把预算花在刀刃上

• 装饰全部 CSS 生成：扫描线、网格底纹、半调网点，零请求。
• 字体自托管 + 子集化：中文按 unicode-range 切片，浏览器按需下载，绝不引第三方 CDN。
• 搜索索引懒加载：Pagefind 的索引在用户第一次按 Ctrl+K 时才请求。
• 图片构建期转 WebP，宽度给足 srcset，懒加载只对首屏以下生效。

性能预算的本质是把”以后再说”变成”现在就疼”。

结果

Lighthouse mobile 四项全过 90，首屏请求 14 个，总 JS 不足 40KB。代价是写样式时多想十秒。个人博客的读者没有义务等你的字体和脚本，枷锁戴在自己身上，速度留给访客。