关键css内联必须紧贴之后首个位置，顺序为→→其他标签，禁用@import，体积≤1kb，仅含首屏真实渲染所需样式，非首屏css须用media隔离或延迟注入。
关键CSS内联必须紧贴之后
浏览器解析HTML是流式顺序执行，<style></style>标签的位置直接决定它能否参与首次渲染树构建。如果它被放在任何<link rel="stylesheet">之后，哪怕中间只隔一个<title></title>，浏览器就会先暂停解析去加载那个外部CSS——首屏就卡住不动。
常见错误现象：FCP没改善、甚至变差；DevTools里Parse HTML阶段卡在某个main.css请求上——说明关键CSS没抢到“首发位”。
-
<meta charset="utf-8">必须是中第一个标签 -
<style></style>必须是第二个（或紧随<title></title>之后的第三个），且不能有任何<link>、<script></script>或<meta name="viewport">插队 - 禁止在
<style></style>内部使用@import，它会触发同步网络请求，等价于新增一个阻塞点
非关键CSS必须用media隔离或延迟注入
浏览器默认把没声明media的<link rel="stylesheet">当作media="all"，即刻阻塞渲染。非首屏样式（如模态框、分页、暗色模式、打印样式）不该进关键路径。
手动删掉<link>不可取——响应式断点和媒体查询逻辑会失效；简单套display: none也不行，样式仍会下载并解析，照样拖慢CSSOM构建。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐方案：
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">，浏览器默认不加载print样式，onload在资源就绪后才切换media，避免FOUC - 更稳妥做法：在
DOMContentLoaded后动态插入，或配合requestIdleCallback延迟加载 - 条件加载场景（如仅桌面端需要）直接用
media="(min-width: 768px)"，浏览器原生支持，无需JS
preload不能替代内联，但必须配对onload接管
<link rel="preload">只是提前下载资源，不会自动接入CSSOM构建流程。没配对onload逻辑的preload，等于白加。
常见失效不是因为没写preload，而是没接管——预加载完，样式还是没参与首次渲染。
- CSS preload必须带
as="style"+onload="this.onload=null;this.rel='stylesheet'"，否则预加载完也不会挂载到CSSOM - 字体preload必须同时满足
as="font"+crossorigin（Chrome 120+强制CORS检查，漏掉任一报错） - 不要对含
@import的CSS文件preload——浏览器仍需发起新请求，失去预加载意义；应先用构建工具展开依赖，再对最终输出文件preload -
href值必须与最终实际加载路径完全一致（含查询参数），否则无法命中缓存
内联体积超1KB反而拉长首屏时间
很多人以为“越多越快”，但实测表明：内联CSS从1KB涨到5KB，在3G弱网下会使HTML主文档传输延迟增加400ms以上，TTFB和初始解析都受影响。服务端也无法缓存这部分样式，每次HTML变更都得重传全部内联内容。
提取关键CSS不能靠截取main.css前10KB——手动剪切或Webpack插件无差别打包，大概率把@keyframes、@font-face、暗色模式媒体查询、display: none区块的样式全塞进去了，这些规则不参与首屏绘制，却白白增大HTML体积。
- 真正有效的提取，必须基于真实视口和首屏DOM节点动态捕获：用
critters（Vite/Webpack）或criticalCLI驱动Puppeteer，模拟{ width: 375, height: 667 }访问页面 - 手动验证时禁用网络后刷新，还能正常显示的标题、按钮、轮播容器，其对应的选择器才值得保留
- CSS-in-JS生成的动态类名（如
jsx-abc123）识别率低，建议SSR时用renderStylesToString()序列化关键样式，而非依赖工具提取
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
