内联关键CSS能加速首屏渲染，因其使浏览器在解析HTML时同步构建CSSOM，避免网络请求阻塞；关键CSS仅含首屏必需样式，需工具自动化提取并控制体积，非关键CSS须异步加载。
内联关键 CSS 是加速首屏渲染最直接有效的手段之一，核心在于让浏览器在解析 HTML 的同时就能拿到首屏必需的样式，跳过网络请求和外部文件加载环节，从而显著缩短 First Paint 时间。
为什么内联关键 CSS 能加快 First Paint
浏览器必须完成 CSSOM（CSS 对象模型）构建后才能开始渲染。如果关键样式放在 <link rel="stylesheet"> 中，会触发阻塞式网络请求，延迟 CSSOM 生成，进而推迟 First Paint。而内联在 <head><style>...</style></head> 中的 CSS 随 HTML 一并下载、同步解析，CSSOM 可立即构建，渲染流程得以提前启动。
哪些 CSS 算“关键”——只留首屏真正需要的
关键 CSS 不是整个样式表，而是仅覆盖用户首次视口内可见内容所需的最小规则集：
- 导航栏（
.header）、首屏横幅（.hero）、主标题、首屏按钮、首屏图文容器等结构与视觉样式 - 影响布局的基础类（如
.container、栅格类、响应式断点中实际生效的部分） - 字体大小、颜色、间距、背景色等直接影响首屏可读性和外观的声明
- 避免包含：折叠菜单、底部版权栏、模态框、打印样式、
@import、@font-face、含 URL 的background-image
怎么安全高效地内联关键 CSS
手动提取适合简单页面；中大型项目务必借助工具自动化，并人工校验结果：
立即学习“Java免费学习笔记（深入）”；
- 用
critical（Node.js 工具）或penthouse基于真实 URL 或 HTML 文件自动提取，支持指定设备宽度（如width: 375） - 体积控制在 ≤14 KB（避免突破 TCP 初始拥塞窗口），移动端建议进一步压缩至 ≤1 KB
- 服务端渲染场景（如 Next.js/Nuxt）可在构建时预生成关键 CSS 并注入模板，或使用
crittersWebpack 插件自动处理 - 确保内联样式位于
<head>内，且不包含会触发额外请求的语法
非关键 CSS 必须异步加载，不干扰首屏
剩余样式不能丢进 <head> 里，否则仍会阻塞渲染。推荐以下现代写法：
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="non-critical.css"></noscript>- 或用
media="print"+ JS 切换：<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'"> - 媒体查询分条件加载也有效，例如：
<link rel="stylesheet" href="mobile-nav.css" media="screen and (max-width: 768px)">，浏览器仅在匹配时才加载
