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 DevTools 的“覆盖率”标签页可帮助您发现关键 CSS 和非关键 CSS。请参阅使用“覆盖率”标签页查看已使用和未使用的 CSS。
内嵌关键 CSS 并推迟非关键 CSS
与在 <script> 标记中内嵌代码类似，在 HTML 页面的 head 中，在 <style> 块内内嵌首次绘制所需的关键样式。然后，使用 preload 链接异步加载其余样式。
考虑使用重要工具自动提取和内嵌“可见区域”CSS。
如需了解详情，请参阅推迟非关键 CSS。
特定于堆栈的指导
Drupal
建议您移除未使用的 CSS 规则，仅将所需的 Drupal 库附加到相关网页或网页中的组件。如需了解详情，请参阅 Drupal 文档。
若要找出会添加无关 CSS 的附加库，请尝试在 Chrome 开发者工具中运行代码覆盖率测试。在 Drupal 网站中停用 CSS 聚合后，您可以从样式表的网址确定导致问题的主题背景或模块。
请留意列出了多个样式表且代码覆盖率偏红的主题和模块。主题和模块应仅附加网页中确实用到的样式表库。
Joomla
某些 Joomla 扩展程序会在您的网页中加载未使用的 CSS，建议您减少这类扩展程序的数量，或改用其他扩展程序。
WordPress
建议您减少或改变会在您网页中加载未使用的 CSS 的 WordPress 插件的数量。