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