如何在 WordPress 中缩小 CSS / JavaScript 信息（3 种策略）

已发表: 2022-04-26

您想缩小 WordPress 网页上的文档吗？

缩小您的 WordPress CSS 和 JavaScript 信息可以使它们更快地加载并加速您的 WordPress 网站。

在本手册中，我们将向您展示如何在 WordPress 中简单地缩小 CSS/JavaScript 文件以提高性能和速度。

Easily minify CSS and JavaScript files in WordPress

什么是缩小，你什么时候需要它？

“缩小”一词用于描述使您的网站文件尺寸更小的系统。它通过从资源代码中删除空格、行和不需要的人来做到这一点。

这是标准 CSS 代码的一个实例：

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

缩小代码后看起来像这样：

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

通常，建议仅缩小发送到用户浏览器的文档。这包含 HTML、CSS 和 JavaScript 文件。

您也可以缩小 PHP 文档，但缩小它不会提高客户的页面加载速度。这是因为 PHP 是一种服务器端编程语言，这意味着它在将某些内容发送到访问者的 Internet 浏览器之前在服务器上运行。

考虑到压缩信息的加载速度更快，缩小数据文件的好处是提高了 WordPress 的速度和整体性能。

尽管如此，一些专家认为大多数网站的功能进步很小，不值得困难。缩小只会删除大多数 WordPress 网站上几千字节的数据。您可以通过优化万维网图像来最大限度地减少网站加载时间。

如果您试图在 Google Pagespeed 或 GTMetrix 软件上获得 100/100 的评分，那么缩小 CSS 和 JavaScript 会显着提高您的分数。

提到这一点，让我们看一下如何轻松地缩小 WordPress 网页上的 CSS/JavaScript。

我们将提供超过 3 种独特的选择供您选择：

可以了，好了？让我们从我们提出的最佳流程开始。

过程 1. 使用 WP Rocket 缩小 WordPress 中的 CSS/JavaScript

这种技术更容易，建议所有消费者使用。无论您使用的是哪个 WordPress 主机，它都会运行。

最初，您需要安装并激活 WP Rocket 插件。有关其他详细信息，请参阅我们的分阶段移动指南，了解如何设置 WordPress 插件。

WP Rocket 是市场上最好的 WordPress 缓存插件。它允许您非常轻松地将缓存插入 WordPress，并大大提高网站速度和网站加载时间。

有关更多信息，请参阅我们关于如何在 WordPress 中安装和建立 WP Rocket 的教程。

激活后，您需要查看设置 » WP Rocket网页并切换到“文件优化”选项卡。

从这里开始，您需要查看 Minify CSS 文档解决方案。

然后 WP Rocket 将向您显示一个警告，这可能会在您的网站上分裂点。继续，只需单击“激活缩小 CSS”按钮。如果它触发了您的 Internet 站点的任何问题，您可以不断地停用此选择。

随后，您必须向下滚动到下方的 JavaScript 文档部分。

在这里，只需测试“缩小 JavaScript 文件”可能性旁边的框。

同样，您会看到一条警告，指出这可能会破坏您网站上的内容。继续，只需单击“激活缩小 JavaScript”按钮。

在那之后，永远不要忽略单击“保留调整”按钮以保留您的配置。

WP Rocket 现在将开始缩小您的 CSS 和 JavaScript 信息。您可以在插件设置中非常清除缓存，以确保它开始为未来的网页访问者使用缩小的 CSS 和 JavaScript。

技巧 2. 在 WordPress 中使用 SiteGround 缩小 CSS/JavaScript

如果您将 SiteGround 作为您的 WordPress 网络托管服务提供商，那么您可以使用 SiteGround Optimizer 缩小 CSS 文件。

SiteGround Optimizer 是一个通用的性能优化插件，可以在他们的系统上执行。它与他们的 Ultrafast PHP 一起表现良好，可以加强您网站的加载时间。

只需在您的 WordPress 网站上设置并激活 SiteGround Optimizer 插件即可。有关更多详细信息，请参阅我们关于如何安装 WordPress 插件的分步指南。

之后，您需要单击 WordPress 管理侧栏中的 SG Optimizer 菜单。

这只会带您进入 SG Optimizer 设置。

在本文中，您需要单击“转到前端”按钮而不是“其他优化”。

在下一台显示器上，您需要切换“缩小 CSS 文件”解决方案即将到来的切换开关。

接下来，您必须切换到 JavaScript 选项卡并打开即将到来的“缩小 JavaScript 文件”选项的切换。

就这些！您现在可以清空 WordPress 缓存并查看您的站点以加载缩小版本的 CSS 和 JS 文档。

方法 3. 使用 Autooptimize 缩小 CSS/JavaScript

此方法适用于不在 SiteGround 且未使用 WP Rocket 的消费者。

最初，您需要设置并激活 Autooptimize 插件。有关更多详细信息，请参阅我们关于如何安装 WordPress 插件的分阶段操作指南。

激活时，您需要查看选项»自动优化网页以配置插件选项。

从本文开始，您首先需要验证 JavaScript 选项下的“优化 JavaScript 代码”选项。

之后，您需要向下滚动到 CSS 选择并检查“优化 CSS 代码”选项旁边的框。

永远不要忘记单击“保存调整”按钮来存储您的配置。

然后，您只需单击 Vacant Cache 按钮即可开始处理您的缩小数据文件。该插件还可用于处理 WordPress 中的渲染阻塞 JavaScript 和 CSS。

我们希望这篇文章能帮助您缩小 WordPress 网页上的 CSS 和 JavaScript。您可能还想查看我们关于在 WordPress 中优化核心网络生命力的教程，并遵守我们最出色的 WordPress 通用性能教程。

如果您喜欢这篇文章，请务必订阅我们的 YouTube 频道以获取 WordPress 电影教程。您也可以在 Twitter 和 Facebook 上找到我们。