CSS 文件是阻塞渲染的资源:浏览器必须先加载并处理这些文件,然后才能呈现网页。如果网页包含的样式表过大,则需要更长的时间才能呈现。
在本指南中,您将了解如何推迟非关键 CSS 来优化关键渲染路径并改进首次内容绘制 (FCP)。
示例:次优 CSS 加载
以下示例包含一个手风琴,其中包含三个隐藏的文本段落,其中每个段落的样式都使用不同的类:
此页面请求了包含 8 个类的 CSS 文件,但呈现“可见”内容并不需要全部类。
本指南的目标是优化此页面,以便仅同步加载关键样式,而以非阻塞方式加载其余样式(包括段落样式)。
测量
在页面上运行 Lighthouse,然后前往 Performance 部分。
该报告显示值为“1s”的 First Contentful Paint 指标,以及指向 style.css 文件的优化建议Eliminate render-blocking resources:
![未优化页面的 Lighthouse 报告,其中显示 FCP 为“1 秒”,“消除阻塞资源”在“优化建议”下显示](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-unopti-ea4f2b5757cb6.png?hl=lt)
要直观呈现此 CSS 如何阻止呈现,请执行以下操作:
- 在 Chrome 中打开相应网页。
- 按
Control+Shift+J
(在 Mac 上,按Command+Option+J
)即可打开开发者工具。 - 点击效果标签页。
- 在“性能”面板中,点击重新加载。
在生成的轨迹中,您会看到 FCP 标记在 CSS 完成加载后立即放置:
![开发者工具中未优化页面的性能跟踪记录,显示 CSS 加载后启动的 FCP。](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-724db16c16b84.png?hl=lt)
这意味着,浏览器需要等待所有 CSS 加载完成并处理完毕,然后才能在屏幕上绘制单个像素。
优化
为了优化此页面,您需要了解哪些类被视为关键。如需确定这一点,请使用覆盖率工具:
- 在开发者工具中,按
Control+Shift+P
或Command+Shift+P
(Mac) 打开命令菜单。 - 输入“覆盖率”,然后选择显示覆盖率。
- 点击重新加载,重新加载页面并开始捕获覆盖率。
![CSS 文件的覆盖率,显示 55.9% 的未用字节。](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/coverage-css-file-showi-7147a6123af9d.png?hl=lt)
双击该报告即可查看详细信息:
- 标为绿色的课程为关键课程。浏览器需要它们来呈现可见内容,包括标题、副标题、手风琴式折叠按钮。
- 标为红色的类不是关键类,只会影响并非直接可见的内容,例如隐藏的段落。
利用这些信息,您可以优化 CSS,以便浏览器可以在网页加载后立即开始处理关键样式,并将非关键 CSS 延迟到下一阶段:
在覆盖率报告中提取标记为绿色的类定义,并将这些类放入页面顶部的
<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>
通过应用以下模式异步加载其余类:
<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 文件的异步请求在 HTML 文件中如下所示:
监控
使用开发者工具在经过优化的页面上运行另一个性能跟踪记录。
FCP 标记在网页请求 CSS 之前显示,这意味着浏览器无需等待 CSS 加载完成即可呈现网页:
![开发者工具中已优化页面的性能跟踪记录,显示 FCP 在 CSS 加载之前启动。](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-e14b71d2acb39.png?hl=lt)
最后,在经过优化的页面上运行 Lighthouse。
在该报告中,您会看到 FCP 页面减少了 0.2 秒(提高了 20%!):
![Lighthouse 报告,显示的 FCP 值为“0.8s”。](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-893a491e6aa3.png?hl=lt)
“消除阻塞渲染的资源”建议将不再显示在机会下,而是显示在“已通过的审核”部分中:
![Lighthouse 报告,在“已通过的审核”部分显示了“Eliminate block resources”(清除阻塞资源)。](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-e989cb5e2e2fd.png?hl=lt)
后续步骤和参考文档
在本指南中,您学习了如何通过手动提取网页中未使用的代码来推迟非关键 CSS。对于更复杂的生产环境,请参阅提取关键 CSS 指南,其中介绍了一些用于提取关键 CSS 的最热门工具,并且还提供了 Codelab,以便了解这些工具的实际工作方式。