关键路径CSS必须内联至<head>中<meta charset>之后首个位置，否则浏览器将阻塞渲染等待外链CSS加载；critters通过JSDOM模拟真实DOM与CSSOM构建过程动态提取首屏必需样式，支持Vite/webpack集成，但需规避@import、暗色模式媒体查询及非首屏规则，体积应≤1KB以避免TTFB延长。
关键路径 CSS 必须内联进 <head>，否则浏览器卡在 CSSOM 构建阶段，首屏白屏时间直接等于外链 CSS 加载耗时——这不是可选项，是渲染通路的硬性前提。
critters 是目前最稳的构建期自动提取方案
它不靠正则或 AST 静态扫描，而是用 JSDOM 启动轻量无头环境，把 HTML 模板解析成真实 DOM，再模拟浏览器 CSSOM 构建过程，反向追踪哪些规则真正参与了首屏渲染计算。
- Vite 用户：装
npm install critters --save-dev，然后在vite.config.ts的build.rollupOptions.plugins里加critters() - Webpack 用户：必须用
CrittersPlugin，且显式传入htmlPath（指向最终生成的 HTML 文件），否则找不到入口 - 它默认跳过
media="print"、@media (min-width: 1024px)、不在首屏 DOM 中的类名（如.admin-panel），但不会处理<style>里的@import—— 这部分得提前用postcss-import展开
内联后 HTML 体积和缓存怎么不崩
内联块没有独立缓存，HTML 文件一变，整个页面就失效。线上最常出问题的是构建漏步骤或 CDN 缓存污染。
- 关键 CSS 必须作为构建必经环节输出为单独文件（如
critical.css），再由脚本读取内容注入模板，而非硬编码在 HTML 里 - HTML 文件名加哈希（如
index.abc123.html），避免 CDN 返回旧版本 - CI 流程中必须校验：生成的内联 CSS 是否包含
@media (prefers-color-scheme: dark)（如有暗色模式） - AB 测试或灰度发布时，确保不同用户看到的 HTML 版本与对应 JS 逻辑一致，否则骨架屏可能提前消失而样式未就位
哪些 CSS 绝对不该内联
不是所有“看起来在首屏”的样式都适合内联。内联收益被抵消甚至反转的情况很常见。
立即学习“前端免费学习笔记（深入）”；
- HTTP/2 环境下且已开启服务器推送（
Link: </styles.css>; rel=preload），内联基本无收益 - 首屏高度动态：如新闻页轮播图、实时股价组件，关键 CSS 无法静态预判，每次构建都可能漏规则
- 含大量字体声明（
@font-face）、未使用动画（@keyframes）或全局重置（* { box-sizing: border-box }）——它们不参与首屏绘制却增大 HTML 体积 - 全量
main.css或压缩后仍 >10KB 的样式块，移动端弱网下会拖慢 HTML 解析，得不偿失
真正值得投入的，是营销页、产品介绍页这类静态为主、转化路径短、SEO 要求高的页面；其他场景优先优化 TTFB 和资源压缩更实在。内联本身不难，难的是判断“该内联谁”“内联多少”“怎么让这个决定在 CI 里稳定复现”——这些才是容易被忽略的复杂点。
