整站样式抽成 critical.css 内联进 head 之后 FCP 反而从 2.1 秒变成 2.6 秒 HTML 的体积从 28KB 涨到 210KB 而且每个页面都在重复下载同一段样式。乍看像缓存或者权限的锅，追下去往往不是。
npx critical example.com --inline --minify > head.html npx lighthouse example.com --preset=desktop --view
追下去是这么回事：内联进 HTML 的样式既不能被浏览器缓存 也不好单独压缩 多页面站点每次导航都要重传一遍 关键样式只该留首屏可见的那部分 其余异步加载。
「关键 CSS 内联」相关的验证我通常做两遍，改完一次、隔天再看一次，确认不是临时生效。接口问题先分清是没发出去、发出去了没收到，还是收到了处理失败。
偶发问题先统计频率，一小时几次和一天一次，查法完全不同。改完顺手把文档补一句，省得下次自己重新推一遍。
具体做法是，用 Coverage 面板看首屏实际用到多少 CSS 一般不到总体积的三成；只内联首屏用到的规则 其余样式用 preload 加 onload 异步加载；内联部分压在 14KB 以内 方便塞进第一个 TCP 包里一次发完。
验收就看一点，HTML 里的 style 不超过 14KB 时 FCP 比改动前更快 首屏该有的样式仍然没有缺失。