如何缩小 WordPress 文件（CSS、HTML 和 JavaScript）

已发表: 2022-11-12

您想缩小 CSS、HTML 或 JavaScript 等 WordPress 文件吗？如果您想知道它是如何完成的，我们已经为您提供了保障。本文将向您展示如何缩小 WordPress 文件并加速您的 WordPress 网站。

但在此之前，我们先来讨论一下什么是缩小，缩小的优点是什么。让我们开始吧。

什么是缩小？

缩小是 Web 开发人员使用的一种流行技术，通过压缩 HTML、CSS 和 JavaScript 等静态文件来减少整个网站的加载时间。该过程的重点是使静态文件的大小更小。

缩小的作用是删除文件中除了提高人类可读性之外没有其他目的的所有空白。由于服务器不关心可读性，我们可以安全地删除所有空格。结果，文件的大小会减少一小部分。但是，如果所有静态文件都减少了一小部分，那么整体效果会更加显着。

例如，常规的 CSS 代码如下所示：

 身体 {
 边距：25px；
 填充：25px；
 颜色：#000000;
 背景：#f5f5f5;
 }
 h1 {
 字体大小：32px；
 颜色#ff6200;
 边距底部：15px；
 }

但是在缩小之后，我们可以这样：

 正文{margin:25px;padding:25px;color:#000000;background:#f5f5f5;}h1{font-size:32px;color#ff6200;margin-bottom:15px;}

如您所见，缩小过程从代码中删除了额外的换行符和空格。这将减小文件大小并使服务器更快地读取文件并快速将网站提供给访问者。

与 CSS 类似，优化技术也可以压缩 HTML 和 JavaScript。

如果您的 WordPress 网站周围有很多静态文件，您应该尝试缩小它们。可能，它将帮助您减小文件大小并使网站更快。

为什么我们要在 WordPress 中缩小 HTML、CSS 和 Javascript

除了缓存、延迟加载等其他优化技术外，您还应该在 WordPress 中缩小 HTML、CSS 和 JavaScript，以使您的网站更快。

根据统计数据，全球超过 64%的网站使用 WordPress。因此，可以肯定地说，您正在与同行业的其他 WordPress 博客竞争。

此外，谷歌还表示，他们会将网站的速度作为排名因素之一。

因此，通过实施缩小和其他优化技术，您可以让您的网站/博客更快。这将带来更多的转化、销售（如果您使用的是 WooCommerce 商店）和收入。但是，如果站点上只有有限数量的静态文件，缩小不会给您带来显着的性能提升。

另一方面，如果您的网站处理大量 CSS、JS 和 HTML 文件，那么缩小可能是最好的方法之一。

现在，您知道了缩小以及为什么需要缩小文件。接下来，让我们进入主题：如何在 WordPress 中缩小 HTML、CSS 和 JS。

如何在 WordPress 中缩小 HTML、CSS 和 Javascript

您可以通过两种方式在 WordPress 中缩小 HTML、CSS 和 JavaScript。

手动
使用专用插件

下面，我们将向您展示这两种方法。因此，您可以选择适合您要求的方式。

手动缩小 WordPress 文件

如果您不想在 WordPress 网站上使用额外的插件进行缩小，可以使用此在线工具。但是，当您使用手动方法时，您需要单独优化每个文件。这就是它的完成方式。

如果您检查该网站，您将看到一个提交框。

缩小器

在那里，您需要粘贴需要缩小的代码。

缩小wordpress文件 - 粘贴css

您可以缩小 CSS、JS 或 HTML 代码。粘贴代码后，单击Minify 。

缩小CSS代码

在下一页上，您将获得 CSS 的缩小版本。

缩小的CSS

正如您在屏幕截图中看到的那样，该工具从代码中删除了所有多余的空格和换行符。这样，您可以优化您的 CSS、JavaScript 和 HTML。

之后，您需要将此代码的缩小版本上传到您的服务器。

该工具易于使用。但主要缺点是您必须手动缩小每个 WordPress 文件。这可能是一个相当耗时且乏味的过程。如果您可以自动化服务器上所有文件的整个过程会怎样？

这就是 WordPress 缩小插件的用武之地。让我们看看如何在 WordPress 中缩小 CSS、HTML 和 JavaScript。

使用 WordPress 插件缩小 CSS、HTML 和 JavaScript

您可以用来缩小静态文件的两个最好的 WordPress 插件是：

WP火箭
自动优化

在转到教程之前，让我们看看每个插件提供了什么。

1) WP火箭

wp火箭

如果你正在寻找最强大的 WordPress 缓存和速度优化插件，你必须看看WP Rocket。 WP Rocket 是一个轻量级但功能丰富的 WordPress 缓存插件，可以帮助每个博主和企业主通过简单的鼠标点击来提高网站的速度。

WP Rocket 的主要优点是易于使用的界面。该插件有一个易于使用的仪表板，可帮助每个人了解最佳功能以及何时打开它们。使用这个插件，除了在 WordPress 中缩小 CSS、HTML 和 JavaScript 文件之外，您还可以做更多事情。

我们在 WP Rocket 插件中喜欢的流行功能是 CDN 集成、WooCommerce 集成和数据库集成。

由于他们提供 CDN 集成，您可以将插件与您喜欢的任何 CDN 服务集成。创建CDN（内容交付网络）服务是为了使文件服务更快。你可以使用BunnyCDN、Cloudflare、Stackpath或任何你喜欢的东西。

此外，WooCommerce 优化功能将确保从缓存中删除购物车、结帐和相关的重要页面。这将使您的 WooCommerce 商店更加用户友好。

最后，数据库优化功能从MySQL数据库中消除了所有不需要的表、评论和已删除的帖子。可能，这将有助于网站所有者提高网站速度并减少服务器上的负载。

特征

轻的
便于使用
CDN 集成
WooCommerce 集成
数据库优化
文件优化

价钱

WP Rocket 是一个高级缓存插件。您可以根据需要获得订阅。仅供参考，他们最便宜的计划每年花费49 美元。

2) 自动优化

自动优化

如果您更喜欢使用轻量级 WordPress 插件来管理 WordPress 文件缩小，您应该尝试Autooptimize 。

Autooptimize 是一个流行的插件，可以加速任何 WordPress 或 WooCommerce 网站。该插件被全球超过一百万个 WordPress 网站使用。最重要的是，它们还具有独特的功能。

例如，为了优化图像性能，您可以使用 Autooptimize 的延迟加载功能。它将确保仅在访问者向下滚动时才提供图像。

除了延迟加载，谷歌字体优化是另一个很酷的功能。大多数 WordPress 主题作者通常在其主题中使用 Google 字体，因此当最终用户使用它时，网站会向 Google 字体的服务器发送额外的 HTTP 请求。您可以使用自动优化来减少它。

由于它是一个轻量级工具，该插件不会增加服务器的额外负载或整个网站的大小。当您需要一个简单的解决方案来提供所有必需的功能时，您需要选择 Autooptimize。但是，开发团队建议使用缓存插件进行更好的优化。

特征

延迟加载
缩小
谷歌字体优化
轻的

价钱

Autooptimize 是一个免费的 WordPress 插件，可通过 WordPress 插件库下载。

因此，这是两个最流行的缩小 WordPress 文件的插件。但是，它们并不是唯一可用的选项。如果您想探索，请随时查看我们关于最佳 WordPress 缩小插件的指南。

接下来，我们将向您展示如何使用这些插件来缩小文件。

如何使用 WP Rocket 缩小 WordPress 文件

如果您需要将网站的性能提升到一个新的水平，WP Rocket 是一个不错的选择。除了缩小之外，它还有许多可以帮助提高页面加载时间的功能。

由于它是一个高级插件，您将无法直接从 WordPress 存储库安装它。相反，您必须从官方网站购买并从那里下载。

下载高级插件后，您需要在 WordPress 网站上手动安装该插件。

安装 wp 火箭

安装后，激活插件。

激活 wp 火箭

在 WordPress 设置中，您将看到WP Rocket 配置。

w火箭配置

您将在左侧看到可以使用的所有配置选项。

wp火箭配置选项

主要选项是：

仪表板
缓存
文件优化
媒体
预载
高级规则
数据库
内容分发网络

等等

您需要做的就是转到“文件优化”选项卡。您将在那里看到缩小 JS 和 CSS 文件的设置。

文件优化 - 缩小 wordpress 文件

从那里，缩小你想要的文件。

CSS 缩小

启用 CSS 缩小部分中的选项，您就准备好了。

缩小 css - 缩小 wordpress 文件

您还可以从缩小中排除自定义 CSS 文件。

JavaScript 缩小

向下滚动到 JavaScript 缩小选项卡并从那里启用缩小。

使用 wp Rocket 缩小 javascript

进行这些更改后，您需要保存设置。截至目前， WP Rocket 不支持 HTML 文件缩小。

这样，您可以使用 WP Rocket 进行 WordPress 缩小。接下来，我们将了解如何使用 Autoptimize 插件进行缩小。

如何使用自动优化缩小 WordPress 文件

如您所知，您首先需要在您的 WordPress 网站中安装并激活 Autooptimize。为此，您可以转到Plugins > Add New并搜索 Autooptimize。找到它后，安装并激活该工具。

缩小 WordPress 文件 - 激活自动优化

安装插件后，您可以在 WordPress 设置下看到它。

缩小 wordpress 文件 - 自动优化设置

开发团队为插件添加了四个自定义选项。

自动优化选项

JS、CSS 和 HTML
图片
关键 CSS
额外的

您必须按照这些步骤来缩小 CSS、HTML 和 JavaScript 文件。

JavaScript 优化

JavaScript 优化是您将在插件的设置页面上看到的第一件事。启用优化 JavaScript 代码选项以缩小 JavaScript 文件并移至下一步。

javascript 选项

CSS 优化

在 JavaScript 选项的正下方，您可以看到 CSS 优化。启用聚合 CSS 文件和聚合内联 CSS选项以缩小服务器上的所有 CSS 文件。

css 选项 - 缩小 WordPress 文件

HTML 优化

要优化 HTML 文件，请移至 HTML 选项。

在那里，启用优化 HTML 代码选项。

html 选项 - 缩小 WordPress 文件

完成所有必需的更改后，您必须保存插件的设置。

这样，您可以优化 WordPress/WooCommerce 网站上的静态文件。此外，Autooptimize 具有更多优化功能，因此您可以探索插件以获得更多速度和性能改进。

而已。

这就是您可以使用 Autooptimize 缩小 WordPress 文件的方法。

注意：有时，缩小特定主题文件会破坏您的网站。 因此，每次对文件应用缩小后，请从前端检查您的网站。

测试/比较缩小结果

现在您已经成功地缩小了您的 WordPress 或 WooCommerce 静态文件（CSS、HTML 和 JavaScript）。接下来，让我们看看之前和之后的结果。有多种工具可用于测试网站的速度，例如：

王国
GTmetrix
PageSpeed 见解

对于此测试，我们将使用GTmetrix 。它是一种流行的工具，可用于网站速度测试。所以这里是结果。

注意：我们创建了一个新的 WordPress 网站并导入了一些虚拟内容进行测试。 不建议在没有内容的情况下测试新网站的速度。

前

完全加载 - 缩小 WordPress 文件

性能 – 88%
结构 – 97%
满载时间 – 3.3 秒

后

结果后 - 缩小 WordPress 文件

性能 – 98%
结构 – 98%
满载时间 - 1.4 秒

如您所见，我们已将网站的加载时间从 3.3 秒减少到 1.4 秒。 这是一个重大的改进。

结论

正如您在上面看到的，如果您需要让您的 WordPress 或 WooCommerce 网站更快，您必须将其优化到最高水平。 缩小 WordPress 静态文件是加快网站速度的一种常见且简单的方法。这样做的主要优点是您不需要处理任何代码或编辑核心/主题模板。

手动优化所有静态文件可能具有挑战性且耗时。每当您向网站添加新的 CSS/HTML 或 JS 文件时，您都必须通过网站对其进行优化。这不是初学者友好或方便的方法。

WP Rocket和Autoptimize是您可以用来优化静态文件的两个最佳插件。两者都具有易于使用的功能，即使是非技术人员也可以轻松配置它们。如果您正在寻找优化所有现有和未来静态文件的最佳方法，插件方法是最佳选择。

我们希望您发现这篇有用的文章并学习了如何缩小 WordPress 文件。如果您愿意，请考虑在社交媒体上与您的朋友和博主分享这篇文章。此外，您可能想查看我们的博客存档以获取更多相关文章。

你打算使用哪种方法？让我们在评论中知道！

您可能想阅读的类似文章：

WordPress 速度优化插件：提高网站速度的 5 大插件！
加快 WordPress 网站速度的最佳 WordPress 缓存插件
如何修复缓慢的 WooCommerce 商店并加快速度？