Lighthouse 报告列表中的“优化”部分 所有未缩小的 CSS 文件 以及可能节省的千比字节 (KiB) 文件压缩后的大小：
缩减 CSS 文件大小如何提高性能
缩减 CSS 文件大小可提高网页加载性能。 CSS 文件通常会比实际大小大一些。例如：
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
可以缩减为：
h1,
h2 {
background-color: #000000;
}
从浏览器的角度来看 这 2 个代码示例在功能上等效， 但第二个示例使用的字节数要少一些。 缩减器可以通过移除空格来进一步提高字节效率：
h1,
h2 {
background-color: #000000;
}
一些缩减器会利用巧妙的技巧来最小化字节数。
例如，颜色值 #000000 可以进一步缩减为 #000，
这是其简写形式。
Lighthouse 提供预估的潜在节省方案
标记在 CSS 中找到的注释和空白字符。
这是一个保守的估算值。
如前所述
缩减器可以执行巧妙的优化（例如将 #000000 缩减为 #000）
以进一步缩减文件大小。
因此，如果您使用缩减器
您实际节省的费用可能比 Lighthouse 所报告的费用更高。
使用 CSS 压缩工具缩减 CSS 代码的大小
对于您不经常更新的小型网站 您或许可以使用在线服务手动缩减文件大小。 您将 CSS 粘贴到该服务的界面，它会返回缩减版代码。
对于专业开发者来说 您可能需要设置一个自动化的工作流，以自动缩减 CSS 的大小 然后再部署更新的代码。 这通常使用 Gulp 或 Webpack 等构建工具来完成。
如需了解如何缩减 CSS 代码的大小，请参阅缩减 CSS 大小。
针对特定堆栈的指南
Drupal
在管理中启用汇总 CSS 文件 >配置 > 开发。您还可以配置更高级的汇总选项 其他单元 通过串联、缩减和压缩您的 CSS 来加快您网站的加载速度 样式。
Joomla
多种 Joomla 扩展程序 可以通过串联、缩减和压缩 CSS 来加快您网站的加载速度 样式。还有一些模板可以提供此功能。
Magento
启用 Minify CSS Files 选项 在商店的“开发者设置”中确认
回应
如果您的构建系统可自动缩减 CSS 文件大小，请确保您 在 Android Vitals 中 应用场景您可以使用 React 开发者工具对此进行检查 。
WordPress
许多 WordPress 插件都可以加快您的 是通过串联、缩减和压缩您的样式来实现的您可能还希望 尽可能使用构建流程预先执行此缩减操作。