如何在 WordPress 中缩小 CSS/JavaScript 文件的三种方法

博客2年前 (2022)更新 铭创网络
165 0 0
Elementor编辑器

您想缩小WordPress网站上的文件吗?缩小您的 WordPress CSSJavaScript文件可以使它们加载得更快并加快您的 WordPress 网站。在本指南中,我们将向您展示如何在 WordPress 中轻松缩小 CSS / JavaScript 文件以提高性能和速度。

如何在 WordPress 中缩小 CSS/JavaScript 文件的三种方法

什么是缩小,何时需要?

术语“缩小”用于描述使您的网站文件大小变小的方法。它通过从源代码中删除空格、行和不必要的字符来实现此目的。下面是一个普通 CSS 代码的示例:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

缩小代码后,它将如下所示:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

通常,建议仅缩小发送到用户浏览器的文件。这包括 HTML、CSS 和 JavaScript 文件。您也可以缩小 PHP 文件,但缩小它不会提高用户的页面加载速度。这是因为 PHP 是一种服务器端编程语言,这意味着它在将任何东西发送到访问者的 Web 浏览器之前在服务器上运行。缩小文件的优点是提高了 WordPress 的速度和性能,因为紧凑的文件加载速度更快。

但是,一些专家认为,对于大多数网站来说,性能提升非常小,不值得麻烦。缩小只能删除大多数 WordPress 网站上的几千字节数据。您可以通过优化 Web 图像来减少更多的页面加载时间。如果你想在 Google Pagespeed 或 GTMetrix 工具上达到 100/100 分,那么缩小 CSS 和 JavaScript 将大大提高你的分数。

话虽如此,让我们来看看如何在 WordPress 网站上轻松缩小 CSS / JavaScript。我们将介绍 3 种不同的选项供您选择:

准备?让我们从我们推荐的最佳方法开始。

方法 1.使用 WP Rocket 在 WordPress 中缩小 CSS / JavaScript

此方法更简单,建议所有用户使用此方法。无论您使用哪种 WordPress 托管,它都可以工作。首先,您需要安装并激活WP Rocket插件。WP Rocket 是市场上最好的 WordPress 缓存插件。它使您可以轻松地将缓存添加到 WordPress,并显着提高网站速度和页面加载时间。激活后,您需要访问设置» WP Rocket页面并切换到“文件优化”选项卡。

如何在 WordPress 中缩小 CSS/JavaScript 文件的三种方法

在这里,您需要勾选 缩小 CSS 文件 选项。然后,WP Rocket 将向您显示一条警告,指出这可能会破坏您网站上的内容。继续并单击“激活缩小 CSS”按钮。如果此选项导致您的网站出现任何问题,您可以随时停用此选项。

如何在 WordPress 中缩小 CSS/JavaScript 文件的三种方法

接下来,您需要向下滚动到下面的 JavaScript 文件部分。在这里,只需选中“缩小 JavaScript 文件”选项旁边的框即可。

如何在 WordPress 中缩小 CSS/JavaScript 文件的三种方法

同样,您会看到一条警告,指出这可能会破坏您网站上的内容。继续并单击“激活缩小 JavaScript”按钮。之后,不要忘记单击“保存更改”按钮以存储您的设置。

WP Rocket 现在将开始缩小你的 CSS 和 JavaScript 文件。您可以在插件设置中清除缓存,以确保它开始为下一个网站访客使用缩小的 CSS 和 JavaScript。

方法 2.使用 SiteGround 在 WordPress 中缩小 CSS / JavaScript

如果您使用 SiteGround 作为 WordPress 托管服务提供商,则可以使用 SiteGround Optimizer 缩小 CSS 文件。SiteGround Optimizer 是一个性能优化插件,可在自己的平台上工作。它可以与他们的超快 PHP 很好地配合使用,以改善您网站的加载时间。只需在您的 WordPress 网站上安装并激活 SiteGround Optimizer 插件即可。之后,您需要单击 WordPress 管理侧边栏中的 SG 优化器菜单。

如何在 WordPress 中缩小 CSS/JavaScript 文件的三种方法

这将使您进入 SG 优化器设置。从这里,您需要单击“其他优化”下的“转到前端”按钮。

如何在 WordPress 中缩小 CSS/JavaScript 文件的三种方法

在下一个页面上,您需要打开“缩小 CSS 文件’选项旁边的开关。

如何在 WordPress 中缩小 CSS/JavaScript 文件的三种方法

接下来,您需要切换到 JavaScript 选项卡,然后打开“缩小 JavaScript 文件”选项旁边的切换开关。就这样!您现在可以清空 WordPress 缓存并访问您的网站以加载 CSS 和 JS 文件的缩小版本。

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

对于不在 SiteGround 上并且不使用 WP Rocket 的用户,建议使用此方法。首先,您需要安装并激活Autooptimize插件。激活后,您需要访问设置»自动初始化页面以配置插件设置。从这里开始,首先您需要检查 JavaScript 选项下的“优化 JavaScript 代码”选项。

如何在 WordPress 中缩小 CSS/JavaScript 文件的三种方法

之后,您需要向下滚动到 CSS 选项,然后选中“优化 CSS 代码’选项旁边的框。

如何在 WordPress 中缩小 CSS/JavaScript 文件的三种方法

不要忘记单击“保存更改”按钮以存储您的设置。然后,您可以单击“清空缓存”按钮开始使用缩小的文件。该插件还可用于修复 WordPress 中的渲染阻塞 JavaScript 和 CSS。

最后,我们希望这篇文章能帮助你在你的 WordPress 网站上缩小 CSS 和 JavaScript,提升您网站的访问加载速度和用户体验。

© 版权声明
Vultr VPS 重磅限时优惠

相关文章

暂无评论

暂无评论...