Lighthouse 报告列表中的“优化”部分 所有未缩小的 CSS 文件 以及可能节省的千比字节 (KiB) 文件压缩后的大小:
![Lighthouse Minify CSS 审核的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/unminified-css/image/a-screenshot-the-lightho-9935f05e8c4cd.png?authuser=0000&hl=hu)
缩减 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 插件都可以加快您的 是通过串联、缩减和压缩您的样式来实现的您可能还希望 尽可能使用构建流程预先执行此缩减操作。