什么是缩小以及它如何提高网站速度

为了吸引访问者的注意力，每一毫秒都很重要。

根据Portent 的一项研究，加载时间为 1 秒的网站的转化率是加载时间为 5 秒的网站的三倍。 吸引访问者和将访问者流失到竞争对手之间的区别通常取决于网站的速度。

那么，您可以采取哪些措施来提高网站性能呢？

输入，缩小。

在本文中，我们将讨论缩小及其总体好处。 我们将为您提供使用适当工具实施它的分步指南。

让我们深入了解一下吧！

什么是缩小化？

缩小是 Web 开发中使用的一种技术，可以使源代码文件更小，而又不会扰乱它们的工作方式。 这意味着摆脱多余的东西，如空格、换行符、注释和块分隔符

以下是缩小前后的 JavaScript 代码示例：

缩小之前：

// 该函数返回 1 到 6 之间的随机数

函数 dieToss() {

返回 Math.floor(Math.random() * 6) + 1;

}

// 该函数返回一个承诺，如果抛出 6，该承诺将得到解决

函数 tossASix() {

返回新的 Promise（函数（履行，拒绝）{

var number = dieToss();

如果（数字=== 6）{

履行（数量）；

} 别的 {

拒绝（数字）；

}

});

}

// 记录抛掷结果，如果不是 6 则重试

函数 logAndTossAgain(抛) {

console.log(“抛了” + 抛 + “，需要重试。”);

返回 tossASix();

}

// 记录成功或失败

函数 logSuccess( 抛掷 ) {

console.log(“耶，成功扔了” + toss + “。”);

}

函数日志失败（抛掷）{

console.log(“扔了一个” + toss + “。太糟糕了，无法掷出六”);

}

// 使用 Promise 尝试掷 3 次 6

扔ASix()

.then(null, logAndTossAgain) // 第一次滚动

.then(null, logAndTossAgain) // 第二次滚动

.then(logSuccess, logFailure); // 第三次也是最后一次滚动

缩小后：

function dieToss(){return Math.floor(6*Math.random())+1}function tossASix(){return new Promise(function(a,b){var c=dieToss();6===c? a(c):b(c)})}function logAndTossAgain(a){return console.log(“投掷了一个“+a+”，需要重试。”),tossASix()}function logSuccess(a){console .log(“耶，成功投出了“+a+”。”)}function logFailure(a){console.log(“投出了“+a+”。太糟糕了，无法投出六”)}tossASix( ).then(null,logAndTossAgain).then(null,logAndTossAgain).then(logSuccess,logFailure);

在缩小版本中，所有注释、多余空格和换行符都被删除。 此外，缩小代码被压缩为一行以减小文件大小。

缩小 HTML、CSS 和 JavaScript 代码的好处

缩小 CSS、JS 和 HTML 代码可提高网站加载速度，同时减少文件大小和带宽使用量，从而增强用户体验和搜索引擎排名。 让我们依次看一下每一项。

提高网站加载速度

缩小可以优化您网站的代码。 通过减少不必要的字符，文件变得更小，以便通过互联网传输。 这可以加快网页的下载和渲染速度。

减少文件大小和带宽使用

缩小后的代码文件的大小始终较小。 它们在服务器上占用的存储空间较少，并且在传输过程中消耗的带宽也较低。 这对于数据计划有限或互联网连接速度较慢的用户很有帮助。

增强的用户体验和参与度

加载速度更快的网站更有可能保留访问者的注意力并鼓励他们与内容互动。 快速响应的网站可以提高用户满意度、延长访问时间和增加互动（更不用说转化）。

对 SEO 和搜索引擎排名的影响

一段时间以来，页面速度加载时间一直是 Google 的排名因素。 在其他条件相同的情况下，速度更快的网站在搜索中的排名将高于其最接近的竞争对手，通常会带来更高的可见度和更高的访问者数量。

如何缩小代码

有多种方法可以缩小代码。 您可以使用在线工具或具有内置缩小功能的内容交付网络 (CDN)。 使用 WordPress 缩小插件可以进一步简化该过程。

缩小工具和 CDN

缩小工具

UglifyJS是一个用于缩小 JavaScript 的强大工具。 它可以通过删除不必要的字符和优化代码来大大减小 JavaScript 文件的大小。

CSSNano是一个 CSS 缩小工具，专注于优化样式表。 它消除了 CSS 文件中的冗余代码、空格和其他非必要元素。

如果您希望减小 HTML 文件的大小， HTMLMinifier是一种方法。 它确保您的 HTML 文件以更紧凑、更高效的形式交付。

CDN

在代码精简方面，CDN 具有以下几个优势：

自动缩小：CDN 拥有特殊工具，可以在将 JavaScript、CSS 和 HTML 脚本发送给用户时自动缩小它们。

边缘缓存：CDN 使用边缘缓存来存储更靠近最终用户的代码的缩小版本。因此，用户可以从附近的服务器而不是源服务器检索内容。 这减少了延迟并加快了加载时间。

GZIP 压缩：CDN 使用 GZIP 压缩来进一步减小传输文件的大小。这种压缩技术有助于优化带宽使用并加速内容交付。

使用 WordPress 插件进行缩小

插件可以为非技术用户提供更加人性化的体验。 通过简单的设置和选项，您可以启用或禁用整个站点或特定文件的缩小。

此外，CDN 通常根据带宽使用情况收费，而一次性购买或免费的 WordPress 插件可以提供持续的压缩，而无需任何额外费用。

寻找 WordPress 缩小插件

在 WordPress 插件目录中搜索“minify”或“minification”。 寻找五星级的插件，这些插件也经过了最新版本的 WordPress 的测试。

如何使用 WP-Optimize 缩小

在下一节中，我们将引导您了解如何使用 WP-Optimize 进行缩小。 首先，您需要在 WordPress 网站上安装并激活WP-Optimize 。 安装并激活后，导航至WP-Optimize > Minify区域。 要开始代码缩小，只需在 WordPress 网站上打开“启用缩小”功能即可。

结论

缩小用于使源代码文件更小，而又不会扰乱它们的工作方式。 它有助于提高网站加载速度，并减少文件大小和带宽使用，从而增强用户体验，从而提高搜索引擎排名。 您可以使用独立工具、内置缩小功能的 CDN 或通过 WP-Optimize 等 WordPress 性能插件进行缩小。

有关如何加快 WordPress 网站速度的更多提示，请阅读我们的指南

经常问的问题

以下是人们经常在网上搜索的一些有关缩小的问题。

缩小会导致我的网站出现任何问题吗？

如果正确完成，缩小不会导致任何问题。 它仅删除不必要的元素并保持功能完整。 如果您正在使用 WP-Optimize 缩小您的 WordPress 网站，您可以随时向我们寻求帮助。

缩小后我的网站会快多少？

速度提升各不相同。 它往往取决于代码的初始大小和复杂性。 不过，它会产生改进，特别是与其他优化和性能增强（例如图像压缩和缓存）结合使用时。

缩小会影响SEO吗？

是的，缩小会影响搜索引擎优化，因为搜索引擎更喜欢加载速度更快的网站。 它可以提高网站的排名和用户体验，这是 SEO 的关键因素。

是否有必要缩小我的所有代码？

虽然这不是强制性的，但最好缩小所有代码（HTML、CSS 和 JavaScript）以获得最佳性能。 专注于缩小大文件或每个页面加载的文件。

有哪些流行的缩小工具和插件？

流行的工具包括用于 JavaScript 的 UglifyJS、用于 CSS 的 CSSNano 和用于 HTML 的 HTMLMinifier。 WP-Optimize 等 WordPress 插件也提供缩小功能。

我应该始终将缩小的代码文件分开吗？

将原始文件和缩小文件分开是一个很好的做法。 这使得调试和维护更加容易。 向用户提供缩小的文件并保留原始文件用于开发目的。

缩小有什么缺点吗？

主要缺点是缩小的代码对人类来说可读性较差，这使得调试更具挑战性。 尝试保留未缩小的 JavaScript 和 CSS 文件的副本，以用于开发和故障排除目的。