Lighthouse 报告的“优化建议”部分列出了所有使用了未使用的 CSS 的样式表,有望节省 2 KiB 或更多。移除未使用的 CSS 以减少网络活动消耗的不必要的字节数:
![Lighthouse 移除未使用的 CSS 审核的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/unused-css-rules/image/a-screenshot-the-lightho-48e33e715ffd9.png?authuser=5&hl=da)
未使用的 CSS 会如何降低性能
使用 <link>
标记是向网页添加样式的常用方法:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
浏览器下载的 main.css
文件称为外部样式表,因为它与使用它的 HTML 是分开存储的。
默认情况下,浏览器必须先下载、解析和处理遇到的所有外部样式表,然后才能将任何内容显示或渲染到用户的屏幕上。对于浏览器来说,在样式表处理之前就尝试显示内容是没有意义的,因为样式表可能包含会影响页面样式的规则。
每个外部样式表都必须从网络下载。 这些额外的网络行程可能会显著增加用户必须等待的时间,才能在屏幕上看到任何内容。
未使用的 CSS 还会减慢浏览器构建渲染树的速度。呈现树与 DOM 树类似,只不过它还包含每个节点的样式。为了构建渲染树,浏览器必须遍历整个 DOM 树,并检查哪些 CSS 规则适用于每个节点。 未使用的 CSS 越多,浏览器可能需要花费越多的时间来计算每个节点的样式。
如何检测未使用的 CSS
Chrome 开发者工具的“Coverage”标签页有助于您发现关键和不重要的 CSS。 请参阅使用“覆盖率”标签页查看已使用和未使用的 CSS。
![Chrome 开发者工具:“覆盖率”标签页](https://developer.chrome.google.cn/static/docs/lighthouse/performance/unused-css-rules/image/chrome-devtools-coverage-6915c1e9c2a93.png?authuser=5&hl=da)
内嵌关键 CSS 并推迟非关键 CSS
与 <script>
标记中的内嵌代码类似,在 HTML 页面 head
的 <style>
块内进行首次绘制所需的内嵌关键样式。然后使用 preload
链接异步加载其余样式。
请考虑使用关键工具自动执行提取和内嵌“首屏”CSS 的流程。
如需了解详情,请参阅推迟非关键 CSS。
特定于堆栈的指南
Drupal
建议您移除未使用的 CSS 规则。请仅将所需的 Drupal 库附加到相关网页或网页中的组件。如需了解详情,请参阅定义库。
Joomla
建议您减少或改变会在您网页中加载未使用的 CSS 的 Joomla 扩展程序的数量。
WordPress
建议您减少或改变会在您网页中加载未使用的 CSS 的 WordPress 插件的数量。