了解如何利用关键的 CSS 技术缩短渲染时间。
浏览器必须先下载并解析 CSS 文件,然后才能显示网页,这就使得 CSS 成为阻碍渲染的资源。如果 CSS 文件较大或网络条件较差,请求 CSS 文件可能会显著增加网页呈现所需的时间。
。 <ph type="x-smartling-placeholder">![一幅插图,图中有一台笔记本电脑和一台移动设备,网页溢出了屏幕边缘](https://web.developers.google.cn/static/articles/extract-critical-css/image/an-illustration-a-laptop-aa65b58e2ff2a.png?authuser=5&hl=ca)
通过将提取的样式内嵌到 HTML 文档的 <head>
中,您无需额外请求获取这些样式。CSS 的其余部分可以异步加载。
![标头中内嵌了关键 CSS 的 HTML 文件](https://web.developers.google.cn/static/articles/extract-critical-css/image/html-file-critical-css-i-fe0cbe9d63e5.png?authuser=5&hl=ca)
缩短渲染时间可显著改善感知性能,尤其是在网络条件不佳下。在移动网络中,无论带宽高低,延迟时间长都会导致问题。
![幻灯影片视图:通过 3G 连接加载使用阻止渲染的 CSS 的网页(顶部)与使用内嵌关键 CSS 加载同一网页(底部)的 3G 连接。顶部的幻灯影片显示六个空白帧,然后最终显示内容。底部幻灯影片在第一帧中显示有意义的内容。](https://web.developers.google.cn/static/articles/extract-critical-css/image/filmstrip-view-comparison-d7cdd821e772.png?authuser=5&hl=ca)
如果您的首次内容绘制 (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 文件。其优点在于适合并行运行多个作业。