直接内联关键首屏CSS是提升移动端H5首屏渲染速度最有效手段，关键CSS指确保首屏内容完成FCP所必需的样式，不包含非首屏、交互态、媒体查询等规则，需通过critters或inline-critical自动提取并验证，内联后须配合media="print"加载剩余CSS、禁用@import、确保SSR同步更新。
直接内联关键首屏 CSS 是提升移动端 H5 首屏渲染速度最有效、最可控的手段之一，但不是“把所有 CSS 都塞进 ”——那样反而会增大 HTML 体积、拖慢解析，尤其在弱网下更明显。
哪些 CSS 算“关键”？
关键 CSS 指：能确保首屏内容（即用户滚动前看到的部分）完成首次内容绘制（FCP）所必需的样式规则。它不包含以下内容：
- 非首屏区域的布局、动画、媒体查询（如
@media (min-width: 768px)） - 交互态样式（如
:hover、:focus、.modal--open） - 字体加载相关声明（如
@font-face，应预加载或用font-display: swap） - 第三方组件未使用的默认样式（如完整
normalize.css，只取首屏 DOM 所需的那几条）
典型范围包括：html/body 重置、首屏容器尺寸与定位、标题/按钮/图标基础样式、骨架屏结构类（如 .skeleton-card）、以及所有首屏 DOM 元素直接用到的 class 或标签选择器。
怎么提取并内联？别手写，也别全量复制
手动维护关键 CSS 几乎不可行——设计改一稿、DOM 变一下，就可能漏掉某条规则导致白屏或错位。推荐两种落地方式：
- 构建时自动提取：用
critters（Webpack/Vite 插件）或penthouse，基于实际首屏 HTML 快照生成最小关键 CSS，自动注入中的 - 服务端动态提取（适合 SSR 场景）：用
inline-critical库，在 Node 层对渲染后的 HTML 做一次轻量解析 + 关键样式提取 + 内联，再返回给客户端
⚠️ 注意：提取后务必验证效果。常见错误是提取不全（比如漏了 .header-logo img 的 max-width: 100%），导致首屏图片溢出；或提取过度（把整个 common.css 塞进去），使 HTML 超过 14KB（HTTP/1.1 下单包传输上限），触发额外 TCP 分包。
内联后还要注意这三件事
内联只是第一步，后续链路断了照样白忙：
-
link rel="stylesheet"加载剩余 CSS 时，必须加media="print"或onload回调切换，否则会阻塞渲染： - 内联 CSS 里禁用
@import—— 它会同步阻塞解析，等同于外链；所有依赖必须已展开为真实规则 - 如果用了 CSS-in-JS（如 Emotion、Styled Components），确认其 SSR 模式已启用 critical CSS 提取，且未把动态插入的 style 标签放在
底部（那样就失去意义）
真正容易被忽略的是：关键 CSS 必须和首屏 HTML 同步更新。一旦你上线了新图标但没重新提取关键 CSS，旧规则里没有对应 background-position，用户看到的就是空白方块——这种问题不会报错，只会在真机上静默发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
