移除未使用的 CSS

Lighthouse 报告的“优化建议”部分列出了所有使用了未使用的 CSS 的样式表,有望节省 2 KiB 或更多。移除未使用的 CSS 以减少网络活动消耗的不必要的字节数:

Lighthouse 移除未使用的 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 开发者工具的“Coverage”标签页有助于您发现关键和不重要的 CSS。 请参阅使用“覆盖率”标签页查看已使用和未使用的 CSS

Chrome 开发者工具:“覆盖率”标签页
Chrome 开发者工具:“覆盖率”标签页。

内嵌关键 CSS 并推迟非关键 CSS

<script> 标记中的内嵌代码类似,在 HTML 页面 head<style> 块内进行首次绘制所需的内嵌关键样式。然后使用 preload 链接异步加载其余样式。

请考虑使用关键工具自动执行提取和内嵌“首屏”CSS 的流程。

如需了解详情,请参阅推迟非关键 CSS

特定于堆栈的指南

Drupal

建议您移除未使用的 CSS 规则。请仅将所需的 Drupal 库附加到相关网页或网页中的组件。如需了解详情,请参阅定义库

Joomla

建议您减少或改变会在您网页中加载未使用的 CSS 的 Joomla 扩展程序的数量。

WordPress

建议您减少或改变会在您网页中加载未使用的 CSS 的 WordPress 插件的数量。

资源