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=6&hl=el)
缩减 CSS 文件大小如何提高性能
缩减 CSS 文件大小可提高网页加载性能。 CSS 文件通常大于实际需求。例如:
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
可缩减为:
h1,
h2 {
background-color: #000000;
}
从浏览器的角度来看,这 2 个代码示例在功能上是等效的,但第二个示例使用的字节数更少。Minifier 可以通过移除空格来进一步提高字节效率:
h1,
h2 {
background-color: #000000;
}
有些缩减器会利用巧妙的技巧来最小化字节。
例如,颜色值 #000000
可进一步缩减为 #000
,这是它的简写形式。
Lighthouse 根据在 CSS 中找到的注释和空白字符提供预估的潜在节省金额。这是一个保守的估算值。
如前所述,缩减器可以执行一些巧妙的优化(例如将 #000000
缩减为 #000
),以进一步缩减文件大小。因此,如果您使用缩减器,可能会发现比 Lighthouse 报告的内容节省更多。
使用 CSS 缩减器缩减 CSS 代码大小
对于您不经常更新的小型网站,您可以使用在线服务来手动缩减文件的大小。将 CSS 粘贴到服务的界面中,它会返回精简版的代码。
对于专业开发者,您可能希望设置一个自动化工作流,在部署更新后的代码之前自动缩减 CSS 的大小。这通常使用 Gulp 或 Webpack 等构建工具完成。
了解如何通过 Minify CSS(缩减 CSS 大小)来缩减 CSS 代码大小。
针对特定堆栈的指南
Drupal
在管理 > 配置 > 开发中启用聚合 CSS 文件。您还可以通过其他模块配置更高级的聚合选项,从而通过串联、缩减和压缩您的 CSS 样式来加快网站速度。
Joomla
许多 Joomla 扩展程序都可通过串联、缩减和压缩您的 CSS 样式来加快您网站的加载速度。部分模板也提供此功能。
Magento
在您商店的开发者设置中启用 Minify CSS Files 选项。
回应
如果您的构建系统可自动缩减 CSS 文件大小,请确保您部署的是应用的正式版 build。您可以使用 React Developer Tools 扩展程序对此进行检查。
WordPress
许多 WordPress 插件都可通过串联、缩减和压缩您的样式来加快您网站的加载速度。您可能还需要使用构建流程预先执行此缩减操作(如果可能)。