关键 CSS

定义

关键 CSS（Critical CSS）是一种首屏渲染优化技术：提取渲染首屏内容所必需的最小样式集合，直接内联到 HTML 的 style 标签中，其余样式表改为异步加载，从而消除外部 CSS 的渲染阻塞。

原理

CSS 是渲染阻塞资源，浏览器必须等样式表下载并解析完成才能绘制。将首屏样式内联后，首次绘制不再依赖网络往返；非关键样式常用如下方式异步加载： ``html <link rel="preload" href="main.css" as="style"> ``

工具

手工维护关键样式不现实，社区有 critical、penthouse、critters 等工具在构建期用无头浏览器渲染页面并自动抽取首屏规则，部分框架已内置类似能力。

权衡

• 内联样式无法利用 HTTP 缓存，重复访问反而多传输；
• 首屏定义随视口尺寸变化，抽取结果需覆盖多种设备；
• 页面模板多时维护成本上升。

因此该技术更适合首访体验敏感的内容型与营销页面。