提取关键 CSS (Critical CSS)
了解如何使用关键 CSS 技术改进渲染时间。
浏览器必须先下载并解析 CSS 文件，然后才能显示页面，这样 CSS 可能会导致渲染不畅。如果 CSS 文件很大，或者网络条件很差，那么请求 CSS 文件会显着增加网页渲染所需的时间。
将提取的样式内联到 HTML 文档的 <head> 中，从而无需发出额外的请求就能获取这些样式。 CSS 的其余部分可以异步加载。
缩短渲染时间可以对用户体验产生巨大影响，尤其是在较差的网络条件下。在移动网络上，无论带宽如何，高延迟都是一个问题。
如果您的 First Contentful Paint (FCP) 表现很差，并且在 Lighthouse 审计中看到了“消除渲染阻塞资源”，那么试试关键 CSS 是个不错的选择。
为了最大限度地减少首次渲染的次数，应将首屏内容保持在 14 KB （压缩）以下。
此技术可实现的性能提升取决于您的网站类型。一般来说，网站使用的 CSS 越多，内联 CSS 可能产生的影响就越大。
工具概览 #
有许多出色的工具可以自动确定页面的关键 CSS。这是个好消息，因为手动执行此操作会相当乏味。它需要分析整个 DOM 以确定视区中应用的每个元素的样式。
Critical #
Critical 可提取、缩小和内联首部 CSS，可作为npm 模块使用。它可以与 Gulp（直接）或 Grunt（作为插件）一起使用，并且还有一个 webpack 插件。
这是个简单的工具，会在处理时进行大量思考。您甚至不必指定样式表，Critical 会自动检测它们。它还支持为多个屏幕分辨率提取关键 CSS。
criticalCSS #
CriticalCSS 是另一个可以提取首屏 CSS的npm 模块。它也可用于 CLI。
它没有内联和缩小关键 CSS 的选项，但它允许您强制包含实际上不属于关键 CSS 的规则，并提供了对包含 @font-face 声明的更精细的控制。
Penthouse #
如果您的站点或应用程序具有大量的样式或动态注入 DOM 的样式（在 Angular 应用程序中很常见），那么 Penthouse 是一个不错的选择。它使用 Puppeteer，还提供在线版本。
Penthouse 不会自动检测样式表，您必须指定要为其生成关键 CSS 的 HTML 和 CSS 文件。好处是它擅长并行处理多个作业。