在网页加载流程中，浏览器遇到外部CSS文件时会暂停页面渲染，优先下载并解析CSS，这个阻塞过程会延长首屏可见时间。关键CSS是首屏内容渲染所必须的最小CSS代码集合，将其内联到HTML中可以直接被浏览器解析使用，避免等待外部CSS加载，有效提升首屏渲染速度。
什么是关键CSS
关键CSS指的是页面首屏区域渲染时必需的CSS样式，不包含首屏之外的元素样式、交互相关的非必要样式。通常首屏区域的界定是用户打开页面后不需要滚动就能看到的内容区域，不同设备的首屏尺寸不同，提取时需要考虑主流设备的视口范围。
提取关键CSS的方法
手动提取
适合小型项目或者首屏样式较少的页面，开发者可以直接查看首屏元素的样式，将对应的CSS规则复制出来。这种方式操作简单，但是维护成本高，页面样式修改后需要同步更新内联的关键CSS。
工具自动提取
可以使用专业的工具自动提取关键CSS，常用的工具包括Critical、Penthouse等，这些工具可以模拟浏览器渲染过程，自动识别首屏所需的CSS规则。以下是使用Critical工具提取关键CSS的示例：
// 安装critical依赖
// npm install critical --save-dev
const critical = require('critical');
critical.generate({
// 待处理的HTML文件路径
base: 'dist/',
src: 'index.html',
// 提取后的HTML输出路径
dest: 'index-critical.html',
// 视口配置，匹配主流设备尺寸
width: 1300,
height: 900,
// 是否内联关键CSS
inline: true
}, (err, output) => {
if (err) {
console.error('提取关键CSS失败', err);
} else {
console.log('关键CSS提取完成');
}
});
内联关键CSS的实践步骤
提取到关键CSS之后，需要将其内联到HTML的<head>标签中，同时将原有的外部CSS文件改为异步加载，避免阻塞渲染。具体步骤如下：
1. 内联关键CSS到head中
将提取到的关键CSS代码放在<style>标签中，直接插入到HTML的<head>区域，这样浏览器解析到<head>时就可以直接获取并使用这些样式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关键CSS内联示例</title>
<!-- 内联关键CSS -->
<style>
/* 关键CSS内容，首屏必需样式 */
.header {
height: 60px;
background-color: #f5f5f5;
display: flex;
align-items: center;
}
.banner {
width: 100%;
height: 300px;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="header">网站头部</div>
<div class="banner">首屏横幅</div>
</body>
</html>
2. 异步加载非关键CSS
原有的外部CSS文件中非关键部分需要改为异步加载，避免阻塞渲染。可以使用rel="preload"或者media属性实现异步加载，以下是两种常用方式：
- 使用rel="preload"预加载，加载完成后手动应用样式
- 使用media="print"属性，加载完成后切换为all媒体类型
<!-- 方式1：使用preload预加载非关键CSS --> <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="styles.css"></noscript> <!-- 方式2：使用media属性异步加载 --> <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
实践注意事项
内联关键CSS时需要注意以下几点：
- 关键CSS的体积需要控制，建议不超过14KB，因为TCP慢启动阶段的最大传输报文通常是14KB，超过会导致额外的网络请求。
- 避免内联过多的CSS，否则会增大HTML文件体积，影响HTML的加载和解析速度。
- 如果页面有多个页面模板，需要为每个模板单独提取对应的关键CSS，避免内联无关的样式。
- 动态内容的首屏样式需要提前考虑，避免提取的关键CSS遗漏动态渲染元素的必要样式。
效果验证
实践完成后可以通过Chrome DevTools的Lighthouse工具检测页面性能，查看首次内容绘制（FCP）指标的变化，通常内联关键CSS后FCP指标会有明显提升。也可以对比内联前后的首屏渲染时间，验证优化效果。
critical_CSSinline_CSSHTML性能优化首屏渲染修改时间：2026-07-14 19:36:30