关键CSS必须内联且保留匹配的@media块，@font-face和:root须一并内联，体积控制在1KB内；非关键响应式样式用media属性延迟加载；禁用@import；需用DevTools验证优化效果。
关键CSS必须内联，且保留匹配的@media块
首屏渲染依赖的样式（比如 .header、.hero-banner 及其在移动端生效的 @media (max-width: 768px) 规则）不能放在外部 CSS 文件里——哪怕只差一行，浏览器也会卡住渲染树构建。内联到 <style> 标签是唯一能绕过网络请求的方案。
- 提取时必须开启
includeMediaQueries: true（如用critters），否则工具会丢掉所有@media块，导致手机端布局错乱 - 内联内容要包含完整的媒体查询语法，不能只复制选择器和声明；例如：
@media (min-width: 640px) { .container { max-width: 640px; } } -
@font-face和:root自定义属性必须一并内联，<style>标签不支持跨文件引用 - 体积控制在 1KB 内，超出后仍可能触发额外解析开销；可用
cssnano压缩，但别删掉@media或重命名类名（影响语义匹配）
非关键响应式样式用延迟加载
把仅用于大屏栅格、页脚悬停、打印或暗色模式的响应式规则，拆到独立 CSS 文件，并用 media 属性标记。浏览器会在解析 HTML 时直接跳过不匹配的 <link>，既不发起请求，也不参与 CSSOM 构建。
- 写法示例：
<link rel="stylesheet" href="desktop-grid.css" media="(min-width: 992px)">，桌面访问时加载，手机访问时完全忽略 - 避免
media="screen"：它等价于没写，照样阻塞渲染 -
media="not all"可彻底禁用初始加载，后续用 JS 切换为media="all"激活（适合主题切换） - IE11 及更早版本会忽略带
media的<link>，所以关键样式绝不能放这里
@import 是关键路径杀手，必须替换为
@import 让 CSS 加载串行化：浏览器必须先下载并解析完前一个 CSS，才能发现里面的 @import 并发起下一个请求。这会把本可并行的资源变成排队等待，显著拉长关键路径。
- 把
@import url('base.css');改成独立的<link rel="stylesheet" href="base.css"> - 多个响应式 CSS 文件（如
mobile.css、tablet.css）应各自用<link>引入，并配合media属性 - 字体 CSS 同理：不要在主样式表里
@importGoogle Fonts，改用<link rel="preload" as="style">预加载
验证是否真优化成功，别信感觉
优化后白屏时间没变短？大概率是关键 CSS 提取不全，或者某处漏了 media 属性。必须用 Chrome DevTools 实测：
立即学习“前端免费学习笔记（深入）”；
- Performance 面板录制加载过程，重点看
Parse HTML后是否被Recalculate Style卡住超过 50ms - Network 面板筛选
css类型，检查Initiated by列：如果是parser，说明该资源在 HTML 解析中途被同步拉取，仍是阻塞点 - 禁用 JavaScript 后刷新页面，如果首屏结构（logo、标题、Banner 容器）显示异常，说明对应样式没进内联关键 CSS
最容易被忽略的是：媒体查询本身不决定“是否关键”，而是“在当前设备上是否匹配”。同一份 @media (max-width: 768px) 在手机上是关键，在桌面端就是纯冗余——提取和内联必须按设备视口做判断，不是按文件切分。
