内联关键CSS可将FCP压至300ms内，但需基于真实设备视口（如iPhone SE 375×667）用critters或critical驱动Puppeteer动态提取首屏DOM实际应用的规则，过滤@font-face、@keyframes、display:none元素样式及不匹配媒体查询，并确保<style>置于<head>最顶部、体积≤10KB、禁用@import和url()声明。
内联关键 CSS 能把 FCP 压到 300ms 内，但塞错内容、放错位置、超体积，反而让首屏更慢。
怎么提取真正影响首屏的 CSS 规则
不是截取 main.css 前几 KB，也不是照搬开发环境的全量样式。关键 CSS 必须基于真实设备视口和首屏 DOM 节点动态提取：
- 用
critters（Vite/webpack 插件）或criticalCLI 驱动 Puppeteer，在模拟 iPhone SE（{ width: 375, height: 667 }）下访问页面，捕获实际应用的规则 - 手动验证时禁用网络，刷新页面——还能显示的标题、按钮、轮播图容器，对应的选择器才值得内联
- 过滤掉
@font-face、@keyframes、display: none元素的样式，以及未匹配的媒体查询（如@media (min-width: 1200px)） - CSS-in-JS 生成的动态类名（如
jsx-abc123）工具识别率低，建议改用运行时注入，不走内联
内联位置和 HTML 结构必须严格控制
哪怕提取对了，放错地方也白搭。浏览器按顺序解析，关键 CSS 必须抢在第一个 <link rel="stylesheet"> 之前生效：
-
<style>标签必须放在<head>最顶部，紧贴<meta charset>后面 - 后面不能紧跟任何阻塞型
<link rel="stylesheet">，否则浏览器仍会暂停渲染去加载它 - 避免在内联
<style>中使用@import——它会触发同步网络请求，直接退化为阻塞源 - 图片背景、字体等含
url()的声明必须剔除；这类资源应改用<link rel="preload" as="image">或交由非关键 CSS 管理
体积与缓存怎么不崩
内联块没有独立缓存，HTML 文件一变，整个页面缓存就失效。线上出问题最多的是构建漏步骤或 CDN 返回旧版本：
立即学习“前端免费学习笔记（深入）”；
- 内联 CSS 必须作为构建必经环节输出为单独文件（如
critical.css），再由模板引擎读取注入，而非硬编码在 HTML 源码里 - HTML 文件名加哈希（如
index.abc123.html），防止 CDN 缓存污染 - gzip 后体积建议 ≤10KB；超过 1KB 就开始拖慢 TTFB，尤其弱网下；HTTP/2 且已开启服务器推送时，内联收益明显下降
- AB 测试或灰度发布时，确保用户看到的 HTML 版本与 JS 逻辑一致，否则骨架节点可能提前被 hydration 清掉，而样式还没就位
最常被忽略的是：内联不是万能解药。营销页、产品介绍页这类静态结构固定、转化路径短的页面才值得投入；新闻页、实时数据页因首屏高度动态，每次构建都可能漏规则，优先优化 TTFB 和资源压缩更实在。
