了解如何利用关键的 CSS 技术缩短渲染时间。
浏览器必须先下载并解析 CSS 文件，然后才能显示网页，这就使得 CSS 成为阻碍渲染的资源。如果 CSS 文件较大或网络条件较差，请求 CSS 文件可能会显著增加网页呈现所需的时间。
。 <ph type="x-smartling-placeholder">
通过将提取的样式内嵌到 HTML 文档的 <head> 中，您无需额外请求获取这些样式。CSS 的其余部分可以异步加载。
缩短渲染时间可显著改善感知性能，尤其是在网络条件不佳下。在移动网络中，无论带宽高低，延迟时间长都会导致问题。
如果您的首次内容绘制 (FCP) 性能不佳，并且看到“消除阻塞渲染的资源”有机会在 Lighthouse 审查中试用，最好是试用一下关键的 CSS。
为了尽可能减少首次呈现所需的往返次数，请力求将首屏内容保持在 14 KB（压缩后）以内。
使用此方法可取得的效果影响取决于您网站的类型。一般来说，网站拥有的 CSS 越多，内嵌 CSS 可能造成的影响就越大。
工具概览
有许多强大的工具可以自动确定网页的关键 CSS。这是个好消息，因为手动完成此过程非常繁琐。它需要分析整个 DOM，以确定应用到视口中每个元素的样式。
严重
Critical 可提取、缩减和内嵌首屏 CSS，可作为 npm 模块提供。它可与 Gulp（直接）或 Grunt（作为插件）搭配使用，此外还有 Webpack 插件。
这款工具简单易用，在制作过程中需要深思熟虑。您甚至不必指定样式表，“严重”系统会自动检测它们。它还支持提取针对多种屏幕分辨率的关键 CSS。
criticalCSS
CriticalCSS 是另一个用于提取首屏 CSS 的 npm 模块。它还以 CLI 的形式提供。
该工具不提供内嵌和缩减关键 CSS 的选项，但可让您强制包含实际不属于关键 CSS 的规则，并且可让您更精细地控制 @font-face 声明的包含情况。
顶层豪华客房
如果您的网站或应用有大量样式或样式正在动态注入到 DOM（在 Angular 应用中很常见），则 Penthouse 是一个不错的选择。它在后台使用了 Puppeteer，甚至还提供在线托管版本。
Penthouse 不会自动检测样式表，您必须指定要生成关键 CSS 的 HTML 和 CSS 文件。其优点在于适合并行运行多个作业。