Lighthouse 报告列表中的“优化”部分 使用未使用的 CSS 的所有样式表有望节省 2 KiB 或更多。 移除未使用的 CSS 减少网络活动消耗的不必要的字节数：
未使用的 CSS 会如何降低性能
使用 <link> 标记是向网页添加样式的常用方法：
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
浏览器下载的 main.css 文件称为外部样式表，
因为它与使用它的 HTML 是分开存储的。
默认情况下，浏览器必须下载、解析和处理所有外部样式表 向其显示或渲染任何内容到用户屏幕上之前所遇到的事件。 让浏览器尝试显示内容没有意义 在样式表处理完成之前 因为样式表可能包含影响网页样式的规则。
每个外部样式表都必须从网络下载。 这些额外的网络行程可能会显著增加 用户必须等待一段时间才能在其屏幕上看到任何内容。
未使用的 CSS 还会减慢浏览器构建 渲染树。 呈现树与 DOM 树相似，只不过它还包含每个节点的样式。 要构建渲染树，浏览器必须遍历整个 DOM 树，并检查每个节点适用的 CSS 规则。 未使用的 CSS 越多 浏览器可能需要花在计算每个节点的样式上的时间就越长。
如何检测未使用的 CSS
Chrome 开发者工具的“覆盖率”标签页可帮助您发现关键和非关键 CSS。 请参阅通过“覆盖率”标签页查看已使用和未使用的 CSS。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">内嵌关键 CSS 并推迟非关键 CSS
与在 <script> 标记中内嵌代码类似，
内嵌首次渲染所需的关键样式
在 HTML 页面的 head 处的 <style> 代码块内。
然后使用 preload 链接异步加载其余样式。
考虑自动执行提取和内嵌“首屏”的过程CSS 使用重要工具。
如需了解详情，请参阅推迟非关键 CSS。
针对特定堆栈的指南
Drupal
请考虑移除未使用的 CSS 规则。仅附加所需的 Drupal 库 与相关页面或页面中的组件相关联请参阅定义库 了解详情。
Joomla
建议您减少或改变在网页中加载未使用的 CSS 的 Joomla 扩展程序的数量。
WordPress
建议您减少或改变会在您网页中加载未使用的 CSS 的 WordPress 插件的数量。