如何通过缩小来提高 WordPress 网站的性能

已发表: 2018-11-19

网站速度仍然是几乎所有网站所有者长期关注的问题。虽然有几种方法可以提高网站的速度，但有一种经常被忽视（但非常有效）的技术需要考虑——缩小。

简单来说，缩小会优化您网站的代码，使其尺寸更小，运行效率更高。虽然这似乎是一个小问题，但它实际上非常有效。

在本文中，我将向您介绍缩小的概念及其工作原理。我还将向您展示几种方法，您可以自己使用此方法，甚至无需接触代码。让我们开始吧！

“缩小”简介（以及它如何帮助您）

该博客之前多次讨论过保持网站快速运行的重要性。因此，您可能已经知道可以优化网站速度的几种方法。今天，我将讨论另一种方法。

您会看到，加载时间过长的潜在原因之一是代码编写效率低下。大多数网站所有者如今很少（如果有的话）需要编写任何代码，因此您甚至可能无法判断您的代码是否导致您的网站运行缓慢。但是，通过使用称为缩小的过程，您可以忽略它。

如果您不是编码员，这可能看起来非常复杂，但不要担心。缩小实际上是一个简单的过程，只涉及优化 CSS、HTML 和 JavaScript 代码。稍后我将向您展示如何在不需要任何编码技能的情况下实现这一目标。然而，在此之前，让我们看看它在实践中是如何工作的，使用下面的 CSS 片段：

h1 {
    background-color: blue;
}

h2 {
    background-color: red;
}

p {
    background-color: black;
}

即使对 CSS 有点熟悉，这也很容易理解。它只是指定应将哪种样式分配给页面上的不同元素。这是因为代码被编写为人眼可读。为此，使用换行符和额外的空格来使代码的每个部分都清晰定义并且更易于扫描。

然而，这实际上并不是计算机需要理解和运行代码的东西。事实上，额外的字符使代码“更重”，因此计算机读取和执行需要更长的时间。因此，您可以将缩小视为将人类友好代码转换为机器友好代码的过程。

如果你要缩小这段代码，它会变成这样：

h1{background-color:blue}h2{background-color:red}p{background-color:black}

该代码实际上包含与上述代码完全相同的功能，但去掉了所有不必要的部分。虽然看起来没有什么大的区别，但缩小后的代码实际上比原始代码轻了 36%。如果您想象同样的原则适用于您页面上的所有代码，您可能会看到从长远来看这可能是多么有效。

那么，您实际上是如何做到的呢？有几种方法可供您使用，我将在本文中介绍它们。首先，让我们看看如何手动缩小代码。

如何手动缩小代码

缩小代码的一种方法是自己做。如果您正在编写自己的代码，例如创建主题或插件时，这将特别有用。但是，根据数量的不同，使用细齿梳子检查代码可能会很费力，如果不是不可能的话。

幸运的是，有很多工具可以帮助您在几秒钟内生成缩小代码。一个这样的例子是 Minify，它适用于 CSS 和 JavaScript：

只需将要压缩的代码粘贴到文本框中，单击“缩小”，代码就会立即以新形式返回。您甚至会看到新版本与原始版本相比轻了多少的摘要：

当您需要缩小 HTML 代码时，我推荐使用 HTML Minifier：

我特别喜欢这个工具，因为它提供了很多关于如何压缩代码的选项，而且它也是谷歌批准的。您可以使用右侧的设置来根据自己的喜好定制最终输出。

虽然手动缩小代码当然很有用，但大多数时候您可能希望自动化该过程。接下来，我将看看你如何做到这一点。

前端的小细节确实会减慢速度……而且有这么多插件、主题和技术协同工作，可能很难知道从哪里开始。我们的 Performance Insights Add-on 可让您深入了解您网站的高性能和低性能方面。从那里，我们更进一步，直接从我们的专家团队为您提供建议的操作，让您确切地知道在哪里以及如何提高您的网站的速度！在这里了解更多。

3 个 WordPress 插件可帮助您自动缩小代码

到目前为止，实现缩小的最简单方法是使用 WordPress 插件为您完成这项工作。这样的插件会在调用时自动缩小您的代码。

这意味着您可以缩小代码而无需自己查看。考虑到这一点，让我们看看一些最好的缩小插件！

1.自动优化

如果您担心缩小将是一个复杂的过程，那么 Autooptimize 是完美的对位。这是一个“一劳永逸”的解决方案，它将自动缩小您网站的所有脚本，而无需您进行任何输入。您只需安装并激活插件，剩下的就交给它了。但是，如果您确实希望进入技术方面，该插件还提供了几个高级配置选项。

主要特点

使用简单，无需配置。
自动缩小和压缩您网站上的所有脚本。
将所有样式移动到站点标题以获得最佳性能。

定价：该插件是免费的，Autoptimize 还提供高级套餐，起价为 119 欧元，约合 138 美元。

2. 快速缩小

所有这些插件的运行主题是简单。与之前的产品一样，Fast Velocity Minify 开箱即用。通过将您的代码和脚本压缩到最少数量的文件中，该插件可确保您的 CSS 和 JavaScript 尽可能高效地交付。它还包括许多配置设置，包括可选的 HTML 缩小。

主要特点

缩小脚本文件以减少 HTTP 请求的数量。
使用默认设置提供即插即用功能。
合并和优化谷歌字体。

定价：该插件完全免费，不需要高级计划。

3.合并+缩小+刷新

Merge + Minify + Refresh 是另一个开箱即用的缩小插件。虽然它的功能与 Autooptimize 非常相似，但它是一个特别轻量级的替代方案。由于缩小过程的工作方式，该插件提供了最小的减速，并且不需要您手动清除缓存（与其他解决方案不同）。

主要特点

自动缩小和组合您的脚本文件。
使用 wp-cron 最小化缩小过程中的减速。
与 WordPress 多站点设置兼容。

定价： Merge + Minify + Refresh 可免费下载和使用，没有可用的高级计划。

结论

在优化您的网站时，使用您可以使用的所有方法非常重要。其中之一是缩小，它使您能够压缩代码以使其更高效而不会影响其功能。

在本文中，我讨论了如何使用我推荐的插件之一在自己的网站上使用缩小：

自动优化。强大而简单，为有经验的用户提供额外的设置。
快速速度缩小。一个可靠的选择，对初学者和开发人员都非常有用。
合并+缩小+刷新。快速可靠，有助于确保始终保持良好的性能。

您对使用缩小来加速您的网站有任何疑问吗？在下面的评论部分让我知道！

使用我们的免费指南将您的网站性能提升到一个新的水平！

这个免费指南包含八个简单的步骤，您可以使用它来提高您今天的 WordPress 网站的性能和速度。它涵盖了从优化图像、JavaScript 和 CSS 等 Web 资产到执行全面的插件审计的所有最佳 WordPress 性能实践。

立即下载！