减少阻塞渲染的 CSS

目标

单个大型 CSS 文件阻塞渲染，导致首次内容绘制延迟。本配方把首屏关键样式内联，其余样式用 media 技巧改为非阻塞加载，并提供 noscript 回退，从而让首屏立即用内联样式渲染；提醒内联会增大 HTML 并影响缓存，关键 CSS 应基于真实页面渲染生成。

步骤要点

1. 内联首屏关键 CSS。
2. 用非阻塞方式加载其余样式表。
3. 为无 JS 用户提供 noscript 回退。
4. 基于真实页面渲染生成关键 CSS。

<style>/* critical above-the-fold styles */</style>
<link rel="stylesheet" href="/styles/app.css" media="print" onload="this.media='all'">

排错提示

• 内联不足会出现无样式闪烁。
• 关键 CSS 判断错误会漏样式。
• 后到的非关键样式可能引发回流。

适用边界

• 内联会增大 HTML、削弱缓存。
• 关键 CSS 需按模板生成。