压缩 CSS

Lighthouse 报告的“优化建议”部分列出了所有未缩减的 CSS 文件,以及缩减这些文件后可能会节省的千字节 (KiB) 大小:

Lighthouse Minify CSS 审核的屏幕截图

缩减 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 插件都可通过串联、缩减和压缩您的样式来加快您网站的加载速度。您可能还需要使用构建流程预先执行此缩减操作(如果可能)。

资源