关键CSS必须内联且紧贴之后，位置错则失效；需严格按→→其他标签顺序放置，体积≤1KB，禁用@import，须匹配真实设备视口精准提取。
关键CSS必须内联，且必须紧贴<meta charset>之后——位置错，等于没做。
关键CSS内联位置必须严格在
浏览器按顺序解析HTML，遇到<link rel="stylesheet">就会暂停渲染，直到该CSS下载并解析完成。哪怕你已经写了<style></style>，只要它后面跟着一个外部CSS链接，阻塞就依然存在。
-
<meta charset="utf-8">→<style></style>→ 其他所有标签（包括<title></title>、<link>、<script></script>） - 常见错误：把
<style></style>放在<title></title>之后，或夹在两个<link>之间 - DevTools里看到Parse HTML阶段卡在某个
main.css请求上，基本就是这个原因
提取的critical CSS不能靠“截开头10KB”或宽屏模拟
移动端首屏样式和桌面端完全不同，用width: 1300提取出来的规则，90%在手机上根本不会触发。更糟的是，工具会把@font-face、@keyframes、display: none区块的样式也塞进来——它们不参与首屏绘制，却白白增大HTML体积。
- 真实设备视口优先：移动端用
{ width: 375, height: 667 }（iPhone SE）或{ width: 414, height: 896 }（iPhone 12） - 推荐工具：
critical（Node.js）、penthouse（Puppeteer驱动），它们能结合getComputedStyle()和getBoundingClientRect()动态判定哪些样式真正在首屏生效 - CSS-in-JS生成的类名（如
jsx-abc123）识别率低，SSR时建议用renderStylesToString()序列化，而非依赖静态提取
内联体积超1KB会拖慢TTFB，尤其在3G弱网下
很多人以为“越多越快”，但实测表明：内联CSS从1KB涨到5KB，在3G网络下会使HTML主文档传输延迟增加400ms以上。服务端也无法缓存这部分样式，每次HTML变更都得重传全部内联内容。
立即学习“前端免费学习笔记（深入）”；
- 目标体积：≤1KB（不是“尽量小”，而是硬性上限）
- 过滤动作必须手动验证：禁用网络后刷新页面，还能正常显示的标题、按钮、轮播容器，其对应的选择器才值得保留
- 禁止在
<style></style>里写@import——它会触发同步网络请求，等价于新增一个阻塞点
最容易被忽略的不是怎么提取，而是视口匹配精度和HTML缓存策略联动：critical CSS内联后，HTML本身成了样式缓存单元，Cache-Control: max-age必须同步缩短（比如设为3600），否则样式更新无法及时生效。
