主题的 style.css 顶部 @import 了 base、layout、components、page 四个文件，其中两个又各自 @import 了变量和重置样式，串成四层。Lighthouse 12.2 报「消除阻塞渲染的资源」约 600ms。试过直接合并全部文件，结果样式顺序错乱，页面乱了两天又回滚了。
一开始怀疑是「首屏关键样式没有内联，浏览器要等整份 CSS 才敢渲染」，查了一圈，方向不对。
原因不止一个，得分开看。@import 是串行加载，下一层要等上一层下载并解析完才发请求。也可能是合并时没处理层叠顺序，后加载的样式覆盖了前面的规则。
少数情况下是字体声明写在 CSS 顶部，又额外拖慢了一次首屏绘制。
数清 @import 的层数和文件数量
grep -rn '@import' static/css/ | wc -l然后按依赖顺序合并成一份，保留原有先后
cat base.css layout.css components.css page.css > bundle.css再往下把首屏用到的规则内联进 head，其余异步加载
<style>/* critical */</style>复测首次绘制和 LCP 的时间差
npx lighthouse https://www.example.com/ --only-audits=render-blocking-resources --view改完先别撤，确认这几项。首屏只需要一次 CSS 请求，阻塞时间从 600ms 降到 180ms 左右，页面样式和合并前完全一致。
合并 CSS 的风险全在顺序，按原来的加载顺序拼接，改动前后各截一张图对比，比看报告更直观。改动前把原配置备份一份，出问题能马上回滚，这比任何技巧都实用。