了解如何利用关键的 CSS 技术缩短渲染时间。
浏览器必须先下载并解析 CSS 文件，然后才能显示网页，这使得 CSS 成为阻塞渲染的资源。如果 CSS 文件很大或网络状况不佳，那么请求 CSS 文件可能会显著增加网页的渲染时间。
将提取的样式内嵌在 HTML 文档的 <head> 中，这样就无需发出额外的请求来获取这些样式。CSS 的其余部分可以异步加载。
缩短渲染时间会对感知性能产生巨大影响，尤其是在网络条件不佳的情况下。无论带宽如何，在移动网络上，都会出现高延迟问题。
如果您的 First Contentful Paint (FCP) 不佳，并且在 Lighthouse 审核中看到“消除阻塞渲染的资源”的机会，则建议您尝试一下关键的 CSS。
为了最大限度地减少首次呈现的往返次数，您应力求将首屏内容保持在 14 KB（压缩后）以内。
此方法对性能的影响取决于您网站的类型。一般而言，网站的 CSS 越多，内嵌 CSS 可能带来的影响就越大。
工具概览
有许多很棒的工具可以自动确定网页的关键 CSS。这是好消息，因为手动执行此操作会非常繁琐。它要求分析整个 DOM，以确定应用于视口中每个元素的样式。
严重
Key 功能可提取、缩减和内嵌首屏 CSS，并作为 npm 模块提供。它可以与 Gulp（直接）或 Grunt（作为plugin）一起使用，并且还有一个 webpack 插件。
这款工具简单易用，需要您在设计过程中充分考虑各种因素。您甚至都不需要指定样式表，“关键”会自动检测这些样式表。它还支持为多种屏幕分辨率提取关键 CSS。
criticalCSS
CriticalCSS 是另一个提取首屏 CSS 的 npm 模块。它也可以作为 CLI 使用。
它不提供内嵌和缩减关键 CSS 的选项，但可以让您强制包含实际不属于关键 CSS 的规则，并且可让您更精细地控制包含 @font-face 声明。
顶层豪华客房
如果您的网站或应用中有大量样式或样式被动态注入到 DOM 中（在 Angular 应用中很常见），则 Penthouse 是一个不错的选择。它在后台使用了 Puppeteer，甚至还提供在线托管版本。
Penthouse 不会自动检测样式表，您必须指定要为其生成关键 CSS 的 HTML 和 CSS 文件。其优点是它善于并行运行多个作业。