推迟非关键 CSS

Demián Renzulli

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

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

示例：不理想的 CSS 加载

以下示例包含一个手风琴菜单，其中包含三个隐藏段落， 每个文本的样式各不相同：

此网页请求了一个包含 8 个类的 CSS 文件，但这些类并非全部 呈现“可见”内容。

本指南的目标是优化此页面，以便仅使用关键样式 其余部分（包括段落样式）会同步加载， 加载网页时不会阻塞

测量

运行 Lighthouse 页面上，然后转到 性能部分。

报告会显示“First Contentful Paint”指标，其值为“1s”，并且 提示：删除阻塞渲染的资源，使其指向 style.css 文件：

<ph type="x-smartling-placeholder">

</ph>

Lighthouse 报告建议您简化 以提高网页加载速度。

。

注意： 此演示网站使用了一个非常小的样式表。在生产环境中 通常需要更大的 CSS 文件如果 Lighthouse 检测到某个网页存在 呈现 首屏内容，则也会显示移除未使用的 CSS 建议。

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

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

在生成的跟踪记录中，您会看到 FCP 标记立即被放置 在 CSS 加载完成后：

<ph type="x-smartling-placeholder">

</ph>

在未优化的演示页面上，无法发生 FCP 直到 CSS 加载完毕为止

这意味着浏览器需要等待所有 CSS 加载完毕并得到处理 然后再在屏幕上绘制一个像素

优化

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

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

。 <ph type="x-smartling-placeholder">

</ph>

“覆盖率”报告会显示 实际上是在初始网页加载过程中用到的。

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

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

根据这些信息，优化您的 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： 样式表加载完成。
• “nulling”一些浏览器在使用 onload 处理程序后， 在切换 rel 属性时重新调用处理程序。
• 通过引用 noscript 元素内的样式表，您可以获得 不执行 JavaScript 的浏览器后备。

。

注意：

在实际生产场景中，我们建议使用 CSS 推迟函数 例如 loadCSS 可以封装此行为，并在各种浏览器中正常运行； 内容安全政策支持一项可能 允许内嵌 onload JavaScript。

您还可以将 CSS 链接放在页面底部， 而无需等待 Firefox 和 Chrome 中开始呈现样式表。 不过，在这种情况下，浏览器仍然会优先考虑样式表，因此它 仍可以在所有浏览器中屏蔽关键内容。

生成的网页与 即使大多数样式是异步加载的也是如此。下面介绍了 内联样式和异步请求到 CSS 文件，如在 HTML 代码中 文件：

监控

使用开发者工具在 经过优化的网页。

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

<ph type="x-smartling-placeholder">

</ph>

在优化网页上，FCP 可以在 即可。

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

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

<ph type="x-smartling-placeholder">

</ph>

全新的 FCP 有所减少。

系统将不再显示移除阻塞渲染的资源建议。 机会，而位于已通过的审核部分：

<ph type="x-smartling-placeholder">

</ph>

现在，网页会传递 审核。

后续步骤和参考

在本指南中，您学习了如何通过手动提取 网页中未使用的代码对于更复杂的生产环境， 提取关键 CSS 指南介绍了 用于提取关键 CSS 的最常用工具，包括 一个 Codelab，了解 实际运作方式