通常，浏览器必须先下载并解析 CSS 文件，然后才能显示页面，这使得 CSS 成为阻塞渲染的资源。 如果 CSS 文件很大，或者网络条件很差，那么对 CSS 文件的请求会显着增加网页渲染所需的时间。
术语：Critical CSS 是一种提取首屏内容CSS的技术，以便尽可能快地向用户呈现内容。下文中提到的关键CSS一般指Critical CSS。
将提取的样式内联到 HTML 文档的 head 中，无需增加额外的请求来获取这些样式。 CSS 的其余部分可以异步加载。
缩短渲染时间可以对用户体验产生巨大影响，尤其是在较差的网络条件下。而在移动网络上，无论带宽如何，高延迟都是一个问题。
如果你的 First Contentful Paint (FCP) 很差，并且在 Lighthouse 检测中看到了“消除渲染阻塞资源”，那么试试Critical CSS是个不错的选择。
当然，凡事都有利弊。请记住，如果你内联了大量 CSS，则会延迟 HTML 文档其余部分的传输。内联也有一些缺点，因为它会阻止浏览器缓存 CSS 以便在后续页面加载时重用，因此最好谨慎使用它。
为了最大限度地减少首次渲染的次数，应将首屏内容保持在 14 KB（压缩）以下。
是否使用Critical CSS取决于你网站的类型。一般而言，网站拥有的CSS越多，内联CSS可能产生的影响就越大。
相关工具
有一些很棒的工具可以自动确定页面的Critical CSS。因为手动执行此操作将是一个乏味的过程，它需要分析整个 DOM 以确定应用于视口中每个元素的样式。
Critical
Critical 可以进行关键CSS提取、缩小和内联头部 CSS，可作为 npm 模块使用。 它可以与 Gulp（直接）或 Grunt（作为插件）一起使用，并且还有一个 webpack 插件。
criticalCSS
criticalCSS 是一个提取首屏 CSS 的 npm 模块，它也可用于 CLI。
它没有内联和缩小关键CSS的选项，但是它允许你强制包含实际上不属于关键CSS的规则，并提供了对包括@font-face声明的更精细的控制。
Penthouse
如果你的站点或应用具有大量动态注入 DOM 的样式（在 Angular 应用程序中很常见），那么 Penthouse 是一个不错的选择。它使用 Puppeteer，还提供在线版本。
Penthouse 不会自动检测样式表，你必须指定要为其生成关键 CSS 的 HTML 和 CSS 文件。好处是它擅长并行多个作业。
翻译自：https://web.dev/extract-critical-css/
