关键CSS应内联至HTML的<head>中，仅包含首屏元素必需的最小样式集合，如导航栏、大标题、主按钮及核心卡片的基础结构样式，排除非首屏交互与响应式样式；推荐用Penthouse等工具自动提取并压缩至14KB内，配合preload加载非关键CSS，并通过DevTools和Lighthouse验证生效。
页面刚打开时内容突然“闪现”、文字堆叠、布局错乱，通常是因为关键 CSS 还没加载或解析完，浏览器已开始渲染 HTML。解决的核心思路是：让最关键的样式（即 首屏渲染必需的 CSS）在 HTML 加载的同时就能被立即读取和应用——最有效的方式就是将关键 CSS 内联到 HTML 的 <head> 中。
哪些 CSS 算“关键”？
关键 CSS 不是全部样式，而是仅覆盖用户首次视口（通常是顶部 100vh 区域）内元素所需的最小样式集合，例如：
- 头部导航栏的宽高、背景、字体颜色
- 首屏大标题、主按钮的字体大小、边距、颜色
- 核心卡片/列表项的基础结构（如 display: flex、padding、border）
- 避免重排重绘的必要属性（如 width、height、font-family）
不包括：折叠菜单的 hover 效果、底部联系方式、分页组件、动画类、媒体查询中大屏幕专属样式（除非首屏就用到）。
如何提取并内联关键 CSS？
手动提取容易遗漏或过度，推荐工具辅助生成：
立即学习“前端免费学习笔记（深入）”；
- Penthouse：Node.js 工具，可自动化分析真实页面生成关键 CSS
- critical（由 penthouse 封装）：支持命令行或 Webpack/Vite 插件集成
- Vite 插件如 vite-plugin-critical-css：开发时自动注入，适合现代构建流程
生成后，把输出的 CSS 字符串插入 HTML 模板的 <head> 中，用 <style></style> 包裹，确保无网络依赖。
内联后还要注意什么？
内联只是第一步，需配合其他优化防止副作用：
- 内联 CSS 应压缩（去除空格、注释），控制体积在 14KB 以内（避免触发 TCP 慢启动额外往返）
- 剩余非关键 CSS 用 <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> 异步加载
- 服务端若支持 HTTP/2 Server Push，可主动推送关键 CSS（但现代实践中更倾向 preload）
- 避免在内联样式中使用 @import，它会阻塞解析
验证是否生效？
打开 Chrome DevTools → Network → 刷新页面 → 查看 HTML 请求的“waterfall”，确认：
- HTML 响应体中已包含 <style> 标签，且内容非空
- 首屏元素在 DOMContentLoaded 阶段已有正确样式（用 “Rendering” 面板勾选 Paint Flashing 可直观观察）
- Lighthouse 的 “Eliminate render-blocking resources” 审计项不再报关键 CSS 阻塞
