提取关键 CSS

了解如何使用关键 CSS 技术缩短呈现时间。

Milica Mihajlija
Milica Mihajlija
X GitHub 首页

浏览器必须先下载并解析 CSS 文件，然后才能显示网页，这使得 CSS 成为阻塞渲染的资源。如果 CSS 文件很大或网络状况较差，对 CSS 文件的请求可能会显著增加网页呈现所需的时间。

一张插图，显示了笔记本电脑和移动设备，网页超出屏幕边缘

在 HTML 文档的 <head> 中内嵌提取的样式后，您无需发出额外的请求即可提取这些样式。其余 CSS 可以异步加载。

在 head 中内嵌关键 CSS 的 HTML 文件
内嵌关键 CSS

缩短渲染时间可以显著提升感知性能，尤其是在网络状况不佳的情况下。在移动网络上，无论带宽如何，高延迟都是一个问题。

在 3G 连接下，使用会阻塞渲染的 CSS 加载网页（顶部）与使用内嵌关键 CSS 加载同一网页（底部）的影片片段视图比较。顶部影片片段会显示六个空白画面，然后才会最终显示内容。底部影片片段在第一帧中显示有意义的内容。
在 3G 连接下加载包含阻塞渲染的 CSS 的页面（顶部）与加载包含内嵌关键 CSS 的同一页面（底部）的对比情况

如果您的首次内容绘制 (FCP) 时间较长，并且在 Lighthouse 审核中看到“消除渲染阻塞资源”优化建议，不妨尝试使用关键 CSS。

Lighthouse 审核中存在“消除会阻塞渲染的资源”或“推迟未使用的 CSS”优化建议

为了尽量减少首次呈现的往返次数，请尽量将可见区域上的内容保持在 14 KB 以下（压缩后）。

您可以通过此技术实现的性能提升取决于您网站的类型。一般而言，网站的 CSS 越多，内嵌 CSS 可能产生的影响就越大。

工具概览

有许多出色的工具可以自动确定网页的关键 CSS。这是一个好消息，因为手动执行此操作是一个繁琐的过程。它需要分析整个 DOM，以确定应用于视口中每个元素的样式。

严重

重要：提取、缩减和内嵌可见 CSS，并以 npm 模块的形式提供。它可以与 Gulp（直接）或 Grunt（作为plugin）搭配使用，并且还有一个 webpack 插件。

这是一个简单的工具，可以让您省去很多思考。您甚至无需指定样式表，Critical 会自动检测它们。它还支持针对多种屏幕分辨率提取关键 CSS。

criticalCSS

CriticalCSS 是另一个用于提取可见 CSS 的 npm 模块。它还提供 CLI 版本。

它没有内嵌和缩减重要 CSS 的选项，但可以让您强制包含实际上不属于重要 CSS 的规则，并让您更精细地控制包含 @font-face 声明。

顶层豪华客房

如果您的网站或应用包含大量样式或动态注入 DOM 的样式（在 Angular 应用中很常见），则 Penthouse 是一个不错的选择。它在后台使用 Puppeteer，甚至还提供在线托管版本。

Penthouse 不会自动检测样式表，您必须指定要为哪些 HTML 和 CSS 文件生成关键 CSS。优点是，它擅长并行运行多个作业。