推迟非关键 CSS

Demián Renzulli

重要提示：本指南介绍了一种可以提升性能的高级性能技术，但如果未正确实现，也可能会导致 bug。大多数网站应该无需实现此技术即可实现我们建议的所有性能目标。

CSS 文件是会阻止内容呈现的资源：它们必须在浏览器呈现网页之前进行加载和处理。如果网页包含不必要的大型样式表，则需要更长的时间才能呈现出来。

在本指南中，您将了解如何推迟非关键 CSS，以优化关键渲染路径并改进 First Contentful Paint (FCP)。

示例：CSS 加载方式不理想

以下示例包含一个包含三个隐藏文本段落的折叠式列表，每个段落都采用不同的类设置样式：

此页面请求包含 8 个类的 CSS 文件，但并非所有这些类都必须用于呈现“可见”内容。

本指南的目标是优化此页面，以便仅同步加载关键样式，而以非阻塞方式加载其余样式（包括段落样式）。

测量

在页面上运行 Lighthouse，然后前往性能部分。

报告会显示值为“1s”的 First Contentful Paint 指标，以及指向 style.css 文件的消除阻塞渲染的资源机会：

Lighthouse 报告建议您简化样式表，以加快网页加载速度。

注意：此演示网站使用非常小的样式表。在生产场景中，通常需要更大的 CSS 文件。如果 Lighthouse 检测到某个网页在渲染首屏内容时至少有 2048 字节的 CSS 规则未使用，还会显示移除未使用的 CSS建议。

要直观呈现此 CSS 如何阻止渲染，请执行以下操作：

1. 在 Chrome 中打开相应网页。
2. 按 Control+Shift+J（在 Mac 上，按 Command+Option+J）打开开发者工具。
3. 点击 Performance（效果）标签页。
4. 在“性能”面板中，点击重新加载。

在生成的轨迹中，您会看到 FCP 标记会在 CSS 加载完毕后立即放置：

在未优化的演示页面上，CSS 加载完毕之前不会发生 FCP。

这意味着，浏览器需要等待所有 CSS 加载并处理完毕后，才能在屏幕上绘制单个像素。

优化

如需优化此页面，您需要了解哪些类被视为关键类。如需确定这一点，请使用覆盖率工具：

1. 在 DevTools 中，按 Control+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单。
2. 输入“覆盖率”，然后选择显示覆盖率。
3. 点击重新加载，重新加载页面并开始记录覆盖率。

覆盖率报告会显示初始网页加载实际使用的 CSS 数量。

双击报告即可查看详细信息：

• 标记为绿色的课程为关键课程。浏览器需要使用它们来呈现可见内容，包括标题、字幕和手风琴按钮。
• 标记为红色的类是非关键类，仅影响不能立即显示的内容，如隐藏的段落。

有了这些信息，您就可以优化 CSS，让浏览器在网页加载后立即开始处理关键样式，并将非关键 CSS 延迟到稍后处理：

1. 提取覆盖率报告中标有绿色的类定义，并将这些类放在网页标头的 <style> 代码块中：

   <style type="text/css">
   .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
   </style>
   

2. 通过应用以下模式，异步加载其余类：

   <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="styles.css"></noscript>
   

这不是加载 CSS 的标准方式。具体方法如下：

• link rel="preload" as="style" 异步请求样式表。如需详细了解 preload，请参阅“预加载关键素材资源”指南。
• link 中的 onload 属性可让浏览器在样式表加载完毕后处理 CSS。
• 在使用 onload 处理程序后将其“置 null”有助于某些浏览器在切换 rel 属性时避免重新调用该处理程序。
• noscript 元素中对样式表的引用为不执行 JavaScript 的浏览器提供了回退选项。

注意：

在真实的生产环境中，我们建议使用 CSS 延迟函数（例如 loadCSS），这些函数可以封装此行为，并在各种浏览器中正常运行，并且支持可能不允许内嵌 onload JavaScript 的内容安全政策。

您还可以在页面底部放置 CSS 链接，让内容在渲染之前就显示，而无需在 Firefox 和 Chrome 中等待样式表。 不过，在这种情况下，浏览器仍会优先处理样式表，因此仍可以在所有浏览器中屏蔽重要内容。

结果页看起来与上一个版本完全一样，即使大多数样式是异步加载的也是如此。下面是 HTML 文件中内嵌样式和对 CSS 文件的异步请求的外观：

监控

使用开发者工具在优化页面上运行另一个性能跟踪记录。

FCP 标记会在网页请求 CSS 之前显示，这意味着浏览器无需等待 CSS 加载即可渲染网页：

在优化页面上，FCP 可在样式表加载之前启动。

最后，在优化页面上运行 Lighthouse。

在报告中，您会看到 FCP 页面缩短了 0.2 秒（改进了 20%）：

缩短的 FCP 时间。

移除阻塞渲染的资源建议不再显示在优化建议下，而是显示在已通过审核部分：

该网页现在通过了阻塞性资源的审核。

后续步骤和参考文档

在本指南中，您学习了如何通过手动提取页面中未使用的代码来延迟非关键 CSS。对于更复杂的生产环境，提取关键 CSS 指南介绍了一些用于提取关键 CSS 的常用工具，并提供了一个 Codelab 来帮助您了解这些工具的实际工作原理