CSS 文件是会阻止内容呈现的资源: 它们必须在浏览器呈现网页之前进行加载和处理。网页 包含不必要大的样式表的广告需要更长的呈现时间。
在本指南中,您将了解如何推迟非关键 CSS 以优化 关键渲染路径和改进 First Contentful Paint (FCP)。
示例:不理想的 CSS 加载
以下示例包含一个手风琴菜单,其中包含三个隐藏段落, 每个文本的样式各不相同:
此网页请求了一个包含 8 个类的 CSS 文件,但这些类并非全部 呈现“可见”内容。
本指南的目标是优化此页面,以便仅使用关键样式 其余部分(包括段落样式)会同步加载, 加载网页时不会阻塞
测量
运行 Lighthouse 页面上,然后转到 性能部分。
报告会显示“First Contentful Paint”指标,其值为“1s”,并且 提示:删除阻塞渲染的资源,使其指向 style.css 文件:
<ph type="x-smartling-placeholder">![灯塔
针对未优化网页的报告,显示 FCP 为“1”以及“消除阻止”
资源的在“优化”下](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-unopti-ea4f2b5757cb6.png?authuser=7&hl=ro)
要直观呈现此 CSS 如何阻止渲染,请执行以下操作:
- 在 Chrome 中打开相应网页。
- 按
Control+Shift+J
(在 Mac 上,按Command+Option+J
)打开开发者工具。 - 点击 Performance(性能)标签页。
- 在“性能”面板中,点击重新加载。
在生成的跟踪记录中,您会看到 FCP 标记立即被放置 在 CSS 加载完成后:
<ph type="x-smartling-placeholder">![未优化页面的开发者工具性能跟踪记录,显示 FCP 在 CSS 加载后启动。](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-724db16c16b84.png?authuser=7&hl=ro)
这意味着浏览器需要等待所有 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?authuser=7&hl=ro)
双击该报告即可查看详细信息:
- 标记为绿色的课程为关键课程。浏览器需要使用它们来呈现 包括标题、副标题和手风琴按钮。
- 标记为红色的类为非关键类,仅 影响无法立即显示的内容(如隐藏的段落)。
根据这些信息,优化您的 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: 样式表加载完成。- “nulling”一些浏览器在使用
onload
处理程序后, 在切换rel
属性时重新调用处理程序。 - 通过引用
noscript
元素内的样式表,您可以获得 不执行 JavaScript 的浏览器后备。
生成的网页与 即使大多数样式是异步加载的也是如此。下面介绍了 内联样式和异步请求到 CSS 文件,如在 HTML 代码中 文件:
监控
使用开发者工具在 经过优化的网页。
FCP 标记显示在网页请求 CSS 之前,这意味着 浏览器无需等待 CSS 加载完毕,即可呈现网页:
<ph type="x-smartling-placeholder">![DevTools
优化网页的性能跟踪记录,显示 FCP 在 CSS 之前启动
。](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-e14b71d2acb39.png?authuser=7&hl=ro)
最后,在优化页面上运行 Lighthouse。
在该报告中,您会看到 FCP 网页缩短了 0.2 秒(20%) 改进!):
<ph type="x-smartling-placeholder">![Lighthouse 报告,其中显示 FCP 值为“0.8s”。](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-893a491e6aa3.png?authuser=7&hl=ro)
系统将不再显示移除阻塞渲染的资源建议。 机会,而位于已通过的审核部分:
<ph type="x-smartling-placeholder">![灯塔
显示“消除阻塞资源”的报告在“已通过审核”
部分。](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-e989cb5e2e2fd.png?authuser=7&hl=ro)
后续步骤和参考
在本指南中,您学习了如何通过手动提取 网页中未使用的代码对于更复杂的生产环境, 提取关键 CSS 指南介绍了 用于提取关键 CSS 的最常用工具,包括 一个 Codelab,了解 实际运作方式