关键css内联化需基于真实设备视口动态提取首屏样式，置于最顶部且≤10kb，避免@import及非首屏规则，否则反致fcp升高或fouc。
关键 CSS 内联化确实能压低 FCP（首次内容绘制），但不是简单把 main.css 前几行复制进 <style></style> 就完事——塞错规则、放错位置、超体积，反而让首屏更慢。
怎么提取真正影响首屏的 CSS 规则
关键 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></style>标签必须放在最顶部，紧贴<meta charset>后面 - 后面不能紧跟任何阻塞型
<link rel="stylesheet">，否则浏览器仍会暂停渲染去加载它 - 禁止在内联
<style></style>中使用@import——它会触发同步网络请求，直接退化为阻塞源 - 确保内联
<style></style>体积 ≤10KB；超过后部分规则可能被浏览器截断或延迟解析
常见错误现象与实测指标反向验证
内联失败最直接的表现不是“没效果”，而是性能变差或视觉异常。
- FOUC（Flash of Unstyled Content）：说明关键样式没生效，或被后续
<link>覆盖 - Lighthouse 报 “Eliminate render-blocking resources”：大概率是内联位置错误，或仍有外部 CSS 在首屏前加载
- 实测 FCP > 2s：可能是提取范围过大（含非首屏规则）、体积超标、或存在
url()等触发网络请求的声明 - 用 Chrome DevTools 的 Coverage 工具验证：禁用网络后加载页面，看哪些 CSS 规则实际被用到——这才是你该内联的子集
真正难的不是“怎么写 <style></style>”，而是判断哪些规则在首屏真实参与渲染；这个判断一旦出错，内联就从优化变成负优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
