如何修复 WordPress 中的 Minify CSS 问题？

WordPress 使用核心软件、主题和插件来塑造网站。 级联样式表或 CSS 是布局设计的支柱，这些项目中的每一个都将添加自己的 CSS。 您可以通过在浏览器中查看页面源来查看站点上使用的 CSS 文件。 优化这些 CSS 文件对于提高 WordPress 站点的页面加载速度是必要的。

什么是 CSS 缩小？

这有助于压缩和减小文件的大小，从而减少从服务器下载这些文件所需的时间。 开发人员使用 CSS 文件中的注释来进行理解和跟踪。 但是，这些注释对于功能来说不是必需的，因此删除它们不会影响您网站的工作设计。

为什么要缩小 CSS？

您想到的下一个问题是，为什么有人应该从文本文件中删除空格和注释以减少几 KB 的大小。 问题是，如果您不减小文件大小，Google PageSpeed Insights 和其他速度测量工具将显示缩小 CSS 文件的建议。

• 您可以在 Google PageSpeed Insights 工具的“Opportunities”部分下的“Minify CSS”中找到这个问题。
• 该工具还将向您展示使用 CSS 缩小可以实现的节省大小。
• “Minify CSS”问题将影响First Contentful Paint (FCP) 和Largest Contentful Paint (LCP)。 由于 LCP 是 Core Web Vitals 的一部分，如果您不缩小 CSS 文件，您的页面体验将会受到影响。
• 提供缩小的 CSS 文件将解决此问题，您会发现检查已通过并在“Passed Audits”部分下以绿色显示。

缩小内容和文件的示例

下面是带有空格和注释的一小段 CSS 代码示例。

 /* Content */ div.content{ padding-left: 390px; background: #fff; position: relative; } div.panes{ max-width: 1400px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 40px; } .section{ padding-top: 40px; } /* End Content */

转到我们的 CSS 缩小工具并粘贴上面的代码。

单击“提交”按钮以获取缩小的代码作为结果。

缩小后的代码如下所示：

 div.content{padding-left:390px;background:#fff;position:relative;}div.panes{max-width:1400px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 40px;}.section{padding-top:40px;}

如您所见，所有注释和空格都在缩小的输出中被删除。 大多数 WordPress 主题使用 style.css 文件，您可以使用相同的工具上传整个 style.css 文件并获得缩小的文件。

单击“下载”按钮将缩小的文件下载到您的计算机。

最终的输出文件将有一行删除所有空格和减小大小的注释。

缩小 WordPress 中的 CSS 和 JS

现在您了解了缩小的目的及其工作原理。 但是，由于以下原因，使用在线工具缩小文件在 WordPress 中不起作用：

• 您的主题、插件和核心 WordPress 将使用许多文件。 手动缩小和替换原始文件是一项耗时的任务。
• 文件将随着您的主题、插件和核心 WordPress 更新而更新。 因此，每次更新时，手动上传的文件将被替换为普通版本。

为避免这种手动操作的麻烦，您可以使用 minify 插件自动和动态地完成工作，而不会影响更新过程。 这些插件将压缩您的文件并以 .min 扩展名提供服务，表明提供的是缩小的文件而不是原始文件。

有时，您的主题和插件也可能提供文件的缩小版本，您无需再次缩小它们。

如何在 WordPress 中缩小 CSS 和 JS 文件？

有许多插件可用于缩小 WordPress 中的 CSS 和 JavaScript。 但是，用法取决于情况，我们将解释为您解决问题的不同插件。 在 Google PageSpeed Insights 中，您将看到一个指向“WordPress 插件”的链接并点击它。 这将通过应用搜索​​过滤器 minify+CSS 将您带到 WordPress 插件存储库页面。

删除查询字符串

在尝试缩小 CSS 文件之前，我们建议删除附加到文件 URL 的查询字符串参数。 静态 CSS 和 JS 文件的压缩工作如下所示：

 https://www.your-site.com/wp-content/themes/theme-name/style.css

但是，主题和插件文件将有一个版本参数作为附加到 URL 的查询字符串。 通常，它将如下所示，并且这些 URL 本质上被认为是动态的。

 https://www.your-site.com/wp-content/themes/theme-name/style.css?ver=1626631618

为了更好地缩小工作，建议从文件 URL 中删除查询字符串。 这也将有助于 CDN 和其他系统（服务器和浏览器）有效地缓存您的文件。 考虑到这一事实，我们将解释提供缩小和查询字符串删除功能的插件。

1. 蜂鸟 – 免费选项

像 W3 Total Cache 这样的插件有数百个选项，并且很难为新的 WordPress 用户设置。 另一方面，像 Autooptimize 这样的简单插件可以组合和缩小文件，而无需单独执行。 这可能不适用于所有托管环境，尤其是不需要合并文件的 HTTP/2 服务器。 此外，组合很容易破坏布局，最好分别使用缩小和组合选项来控制行为。

Hummingbird 是用于在 WordPress 中缩小 CSS 的最佳免费插件之一。 它还提供了完整的缓存解决方案，以便您可以将其用作站点的缓存插件。

• 转到 WordPress 管理面板中的“插件 > 添加新”部分。
• 搜索“minify”以找到“Hummingbird – Optimize Speed, Enable Cache, Minify CSS & Defer Critical JS”插件。 单击“安装”按钮，然后单击“激活”以开始在您的站点上使用该插件。

• 该插件会要求您扫描并推荐选项。 但是，我们将在本文中重点介绍删除查询字符串和缩小 CSS 的设置。
• 转到“蜂鸟 > 高级工具”部分。 针对“常规”部分下的“URL 查询字符串”启用“从我的资产中删除查询字符串”选项。 向下滚动并单击“保存更改”按钮。

• 转到“蜂鸟 > 资产优化”菜单并启用“资产”部分下的“自动”选项。
• 向下滚动并启用“配置”部分下的“CSS 文件”。 请记住，就在此部分的上方，您可以在“资产”部分下有一个名为“Speedy”的选项来组合 CSS 文件。 如果您发现布局已损坏，您可以禁用此功能。

• 单击“发布更改”按钮将更改应用到您的站点。

2. WP Rocket – 高级插件

WP Rocket 是唯一一款高级插件，它改变了人们优化 WordPress 网站的方式。 您有一个简单的仪表板部分，可以轻松导航和切换所需的选项。

• 从开发人员站点购买 WP Rocket 并安装在您的站点上。
• 您需要激活许可证密钥才能获得插件更新和支持。
• 转到“文件优化”选项卡并启用“CSS 文件”部分下的“缩小 CSS 文件”选项。

如上所述，WP Rocket 为 CSS 文件提供了作为单独选项的缩小和组合。 您还将看到建议不要为 HTTP/2 服务器启用组合选项。 通过这种方式，您可以切换所需的选项以在 Google PageSpeed Insights 和其他工具中获得良好的页面速度分数。

3. SiteGround Optimizer – 托管提供的插件

如今，许多托管服务提供商提供自己的优化插件已成为一种趋势。 这是最好的选择，因为该插件在本机托管环境中效果更好。 我们在此处使用 SiteGround Optimizer 插件进行解释，您需要与您的托管公司确认他们是否提供任何用于缩小目的的插件。

• 当您在 SiteGround 托管中安装 WordPress 时，SiteGround Optimizer 插件预装在您的网站上。
• 转到“SiteGround > Frontend”菜单并启用“CSS”部分下的“Minify CSS Files”。

• 您的设置将自动保存，您将看到一条显示“CSS 缩小已启用”的成功消息。 确保单击顶部管理栏上显示的“清除缓存”选项以清除旧的缓存文件。
• 如果前端有任何问题，请使用“从 CSS 缩小中排除”选项来排除特定的 CSS 文件并解决问题。

如您所见，SiteGround Optimizer 插件还提供缩小和组合作为两个不同选项来有效管理结果。

4. 像 Cloudflare 一样使用 CDN 进行压缩

几乎每个 WordPress 网站所有者都使用内容交付网络 (CDN) 来加速 HTML、CSS 和 JS 静态文件的交付。 由于这些文件是静态的并且不会一直更改，因此在您的 CDN 设置中使用缩小功能而不是在您的站点上额外使用插件是一个不错的选择。 在这里，我们将解释在 Cloudflare CDN 中启用缩小选项。 您可能需要咨询您的 CDN 提供商，了解如何启用缩小选项。

• 登录 Cloudflare 帐户并选择您要启用缩小 CSS 选项的站点。
• 转到“速度”部分下的“优化”设置。
• 在右侧窗格中向下滚动并启用“CSS”选项对“Auto Minify”。
• 您的设置会自动保存，并使用 Cloudflare 为您的 WordPress 站点启用 CSS 缩小。

在 CDN 设置中使用 minify 功能时，您应该注意两个要点：

• 如果您使用缓存插件或服务器端缩小选项，请确保此功能不重叠。 例如，WP Rocket 插件提供了一个附加组件来配置 Cloudflare 设置以避免干扰。 同样，您可以在 SiteGround 托管面板（称为站点工具）中配置 Cloudflare 设置。
• 每当您更新站点上的某些内容时，请转到 CDN 设置并清除缓存。 这将避免提供旧的 CSS 和 JS 文件并开始使用最新的更新版本。

我怎么知道缩小作品？

检查文件是否缩小的简单方法是检查页面源。 在启用缩小选项之前，在 Chrome 或其他浏览器中打开任何页面，右键单击空白区域并选择“查看页面源代码”选项。 这将在新选项卡中打开页面的源内容，您可以在其中搜索主题的 style.css。 例如，下面是显示带有版本号的 style.css 的 GeneratePress 子主题的外观。

删除查询字符串并应用 minify 后，您应该发现所有静态文件都使用 .min.css 版本进行压缩和缩小。 在我们的示例中，GeneratePress 子主题的 style.css 将作为 style.min.css 提供，没有任何查询字符串，如下所示：

另一种检查方法是在 Google PageSpeed Insights 工具中测试您的网站。 您应该在“Passed Audits”部分下看到绿色的“Minify CSS”项。 这表明文件被压缩并以减小的大小提供。

最后的话

在 WordPress 中缩小 CSS 是一项简单的任务，使用有助于减小文件大小的插件。 您可以使用上述选项之一并修复 Google PageSpeed Insights 工具中的 minify CSS 问题。 尽管免费插件足以做到这一点，但我们始终建议使用像 WP Rocket 这样的高级插件在需要时获得适当的支持。