关键CSS内联可提升页面加载速度，通过将首屏必需的最小CSS嵌入HTML头部，减少渲染阻塞。使用工具如Critical或Penthouse自动提取关键CSS，并在<head>中用<style>标签内联，非关键CSS异步加载。需控制内联体积在14KB内，按页面单独提取，避免冗余。结合preload预加载和缓存策略优化性能，提升FCP指标，是前端性能优化的基础实践。
页面加载速度直接影响用户体验和SEO排名，其中CSS的加载方式尤为关键。将关键CSS（Critical CSS）以内联形式嵌入HTML头部，能有效减少渲染阻塞，让首屏内容更快呈现。以下是具体实践方法。
什么是关键CSS
关键CSS是指页面首次渲染所必需的最小CSS规则集合。它通常包括首屏元素的样式，比如页头、导航栏、主标题等。非关键CSS（如折叠区域、底部组件）可以延迟加载。
通过只内联这部分核心样式，浏览器无需等待外部CSS文件下载即可开始渲染，显著提升“首次内容绘制”（FCP）指标。
如何提取关键CSS
手动提取费时且易出错，推荐使用工具自动化处理：
立即学习“前端免费学习笔记（深入）”；
- Penthouse：基于Puppeteer生成关键CSS，支持自定义视口尺寸。
- Critical（由Addy Osmani开发）：集成到构建流程中，自动为每个页面提取并内联关键CSS。
- Webpack插件：如critters，在打包时分析并内联关键CSS。
以critical为例：
const critical = require('critical');
critical.generate({
base: 'dist/',
src: 'index.html',
target: 'index-critical.html',
inline: true
});
在HTML中内联关键CSS
将提取出的关键CSS插入HTML的<head>中，使用<style>标签包裹：
<head>
<style>
/* 内联关键CSS */
body { font-family: Arial; }
.header { color: #333; margin: 0; }
.hero { height: 300px; background: #f0f0f0; }
</style>
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
</head>
注意：非关键CSS通过media="print"初始禁用，加载完成后切换为media="all"，实现异步加载。
优化与注意事项
内联关键CSS虽快，但需控制体积，避免HTML过大：
- 保持关键CSS在14KB以内（HTTP/1.1限制），优先保障移动端性能。
- 针对不同页面分别提取关键CSS，避免通用“全局关键样式”造成冗余。
- 结合preload预加载重要CSS：
<link rel="preload" href="non-critical.css" as="style"> - 使用HTTP缓存策略，让非关键CSS文件可被浏览器缓存复用。
基本上就这些。关键CSS内联是现代前端性能优化的基础手段之一，配合懒加载和资源提示，能让页面加载更流畅。不复杂但容易忽略细节。
