如何使用免费的 Smush 和 Hummingbird 插件优化 WPBakery 网站

您很快就会看到，我们将尝试优化 WPBakery，以减少使用我们的 Hummingbird 插件缩小我们网站的 HTML、CSS 和 JS 文件的这些额外代码导致的额外加载时间.

缩小 是删除空格、回车和不必要字符的过程.这会生成更小的文件，从而帮助您的网站更快地加载.

主题

开始优化网站的最佳方法之一是首先优化您的主题.

某些主题提供了大量优化设置，调整这些设置会产生巨大的影响.

例如，如果您使用像 Avada 这样的主题，则有一整部分选项可以帮助提高性能(Avada > 选项 > 性能).

浏览主题的文档并优化其性能设置(如果可用).他们确实有很大的不同.

托管

您的托管设置会对您网站的速度和性能产生巨大影响.

您不必成为一名火箭科学家，也可以通过选择快速的网络主机来显着减少您的页面加载时间. >

然而，您可能不知道的是，Google 最近更新了 PageSpeed Insights 以提高基于更快的 HTTP/2 协议的分数.

因此，如果您想要更快的网站性能和更好的速度测试成绩，请确保您的服务器支持 HTTP/2 协议.

CDN

内容分发网络或 CDN 可以通过从距离用户更近的多个数据中心提供站点文件来进一步缩短页面加载时间.

由于我们首先使用免费插件进行测试，而 CDN 是"专业版"的一项功能，因此我们将在初始测试阶段禁用 CDN.稍后我们会在寻找进一步优化测试站点的方法时重新启用它.

缓存

进一步减少页面加载时间的其他方法包括缓存.

然而，重要的是要注意，缓存会扭曲页面加载测试结果，因为它为用户提供网站页面的存储版本，因此任何使用缓存打开的测试实际上都不是衡量页面从初始请求到存储站点的原始服务器.

因此，我们将在禁用页面缓存的情况下开始测试.然后，我们稍后将启用页面缓存，只是为了看看安装了 WPBakery 的情况下，它会对我们的测试站点的整体性能产生什么样的影响.

图像优化

压缩图片有助于您的网页加载速度更快，并且您的网站可以在不损失图片分辨率的情况下减小图片大小.

我们将使用我们的免费图片压缩和优化插件 Smush 测试我们的网站.

删除不需要的元素

可能会影响使用 WPBakery 的 WordPress 网站的速度和性能的其他一些事情包括删除任何不必要的元素，如小部件、字体、插件、主题等.

例如，社交媒体小部件通常会加载过多的 JavaScript 和 CSS 文件，这会降低您的服务器速度.

小部件优化不仅包括删除您不需要的不必要的小部件，还包括将它们从不需要出现的地方删除(例如，在您的博客文章中包含小部件，但从您的主页、联系方式等页面中删除它们)我们，关于我们页面等)

此外，请确保您使用的是最新版本的 WPBakery，并且您的站点、主题和插件也是最新版本.过时的主题和插件可能会发生冲突并降低 WPBakery 的性能.

既然我们已经了解了可能影响网站优化的各种因素，让我们看看用于测试我们的 WordPress WP Bakery 网站的具体方法.

2.方法论

由于这篇文章是关于加快速度，我将跳过我们向您展示如何为您的网站设置托管、如何完全配置我们的 Smush 和 Hummingbird 插件以及如何使用页面速度测试工具的部分像 GTmetrix 和 Google PageSpeed Insights 以节省时间并更快地获得我们的测试结果.

如果您需要上述方面的帮助，请参阅下面的深入教程:

• 托管:如果您刚刚开始，请查看我们的指南，为您选择合适的托管类型需要.尚未决定在哪里托管您的网站?我们提供超快的托管和无与伦比的性价比.如果您是一位经验丰富的 WordPress 用户，那么请查看我们对不同托管 WordPress 托管服务提供商的测试和比较的热烈欢迎(提示:我们没有赢！ ) 此外，请参阅我们用于测试新数据中心托管速度的方法.
• Smush:查看我们关于如何充分利用 Smush 的系列教程.
• Hummingbird:同样，请查看我们关于如何充分利用 Hummingbird 的系列教程.
• 加速 WordPress:如果您需要加快 WordPress 的速度，请查看我们的最终加速指南WordPress 和我们关于页面速度工具的教程，例如使用 GTmetrix 和这篇关于 使用 Google PageSpeed Insights 获得满分的挑战.

另外……

在优化您的 WPBakery 网站之前，请仔细阅读这篇文章中的部分:我们最近发布了一个关于如何优化 Elementor 网站的教程一>.它包含我们推荐用于配置和优化 Smush 和 Hummingbird 插件的所有步骤的详细演练.

• 我在我们的基本 WPMU DEV 托管 WordPress 托管计划(铜奖)上设置了一个全新的 WordPress 安装.
• WordPress 版本 = 5.6.2
• PHP 版本 = 8.0
• 我们将在测试站点上安装的唯一插件是 Smush 和 Hummingbird(注意:WPMU DEV 仪表板插件会自动安装在 WPMU DEV 托管的网站上).
• 页面缓存和托管以及 Pro 插件优化功能，例如 静态服务器缓存(快速 CGI)和 CDN 在我们的初始测试阶段被禁用.
• 相同的 WordPress 主题(Shopkeeper) 和主题配置和选项在所有测试中都使用.注意:这个主题没有自己的优化设置，所以这将使用插件来完成.
• WPBakery Builder 插件版本 = 6.5.0(注意:该插件与主题捆绑在一起，这是我可以更新到的插件的最高版本.)
• 在整个测试过程中使用相同的 GTmetrix 默认服务器位置和浏览器(测试服务器位置 = 加拿大温哥华.浏览器 = Chrome(桌面)86.0.4240.193，Lighthouse 6.3.0).

本质上，通过测试，一切都保持不变.我只是在重新测试之前逐步打开更多选项，详情请参见下面的结果部分.

附加说明和免责声明:

• 该网站托管在 WPMU DEV 主机上，因此使用 WPMU DEV 的仪表板(仅限会员的功能)安装 Smush 和 Hummingbird 会自动将所有插件升级到 Pro.我在禁用 Pro 功能的情况下进行了初步测试，以使用我们的免费插件版本进行模拟.
• Hummingbird 使用不同的缓存类型(例如页面缓存、浏览器缓存、RSS 缓存和 Gravatar 缓存)和压缩功能(例如 GZip 压缩)来优化站点.如前所述，我们从禁用页面缓存开始.我们还禁用了 Gravatar 缓存和 RSS 缓存.大多数主机默认开启浏览器缓存和 gzip 压缩.在不修改 Web 服务器配置的情况下没有简单的方法可以关闭这些功能，因此在测试期间这些功能保持打开状态
• 正如我们的开发人员经常提醒我们的那样，许多变量会影响测试站点的性能和结果.这包括使用不同的主题、插件、托管环境、配置、行星的对齐方式等.我们将在本文末尾对此进行更多讨论.
• 如果需要，您可以创建网站的完整备份，但这不是必需的，因为 Smush 和 Hummingbird 不会破坏您的网站.

现在来看测试结果.

3.WPBakery 网站设置

如前所述，所有测试都是在 WPMU DEV 托管的 WordPress 托管上的全新 WordPress 安装上进行的.

然后我上传了 Shopkeeper 电子商务主题.

虽然 WPBakery 是一个独立的高级插件，但插件附带了许多主题(包括 Shopkeeper).

然后我导入了主题的演示内容，因为我需要大量页面和大图像.

安装并激活 WPBakery 插件并导入我的演示商店的内容后，我的测试站点现在可以进行测试了.

在接触任何东西之前，我使用 Google PageSpeed Insights 和 GTmetrix 在我的网站上进行了一些页面速度测试.

这是我最初的 Google PageSpeed 移动测试结果......

我最初的 Google PageSpeed 桌面测试结果......

以及我在 GTmetrix 上的初步测试结果.

记录这些初始基准后，下一步是安装我们的免费 Smush 和 Hummingbird 插件.

我们会一次做一个，看看这些会如何影响我网站的分数.

4.WP Bakery and Smush

我首先激活 Smush，WPMU DEV 的图像优化和压缩插件.

安装 Smush 后，我检查了是否有任何图像需要压缩.

Smush 自动压缩了 2,300 多张图像，并检测到需要重新压缩的其他附件.

在批量处理所有图像后，测试站点已准备好进行另一轮页面速度测试.

通过简单地打开 Smush 并保持网站上的其他所有内容保持不变，我在 Google PageSpeed Insights 的移动测试结果中获得了略高的分数.

我的 Google PageSpeed Insights 桌面分数也有所增加(而且分数从红色变为黄色......耶！).

我的 GTmetrix 成绩也从"D"升至"C".

好吧，打开 Smush 也不错.

在添加 Hummingbird 之前，让我们启用一个专为 WPBakery 插件用户创建的新 Smush 功能.

5.WPBakery 和 Smush WPBakery 集成

在 WPBakery 中，某些主题允许您添加自定义图像大小.

Smush 自动优化 WordPress 媒体库中的图像.由于 WPBakery 的自定义大小图像不是您典型的注册 WordPress 缩略图，因此我们开发了一个集成来挂钩 WPBakery 中的图像大小调整功能.

要在 Smush 中启用此功能并允许插件在 WPBakery 的编辑器中调整调整大小的图像，请转到集成屏幕并打开开关.

注意:在 Smush 中启用 WPBakery 集成后，您可能会看到需要批量 smushing 的其他图像.

我批量处理了 WPBakery 的自定义尺寸图像，然后再次运行速度测试.

PageSpeed Insights 移动得分提高了 1 分.

我的 PageSpeed Insights 桌面测试结果也是如此.

我的 GTmetrix 结果也略有改善.

开启 Smush 和 WPBakery 集成功能后，我的分数略有提高，但我们还没有完成.

暂时禁用 Smush Pro 的功能，让我们在网站上激活 Hummingbird.

6.WPBakery、Smush 和蜂鸟

蜂鸟从您的 WordPress 仪表板安装，就像所有其他免费的 WordPress 插件一样.

但是，就我而言，由于我的网站上安装了 WPMU DEV 仪表板，因此我只需在那里激活插件即可.

如您所见，WPMU DEV 仪表板插件检测到我是会员并自动安装Hummingbird Pro.

然而，为了模拟免费插件版本，我忽略了自动扫描等节省时间的 Pro 功能，并禁用了正常运行时间监控.

我们还将禁用 Hummingbird Pro 的 CDN 托管缩小，因为我们在此阶段不启用 CDN.

注意事项:

• Hummingbird Pro 提供增强的缩小压缩(Hummingbird Free 常规优化的 2 倍).我无法在不更改整个测试配置的情况下禁用此功能，因此我们将使用它运行.
• Hummingbird Pro 可与 Smush Pro 的图像优化无缝协作.但是，这不会影响我们现在的结果，因为我们将禁用所有 Smush Pro 功能，直到测试后期.

抛开这些解释，让我们回到测试.

初始蜂鸟性能测试

安装并激活 Hummingbird 后，我运行了该插件的性能测试，以详细了解如何提高网站性能.

您可以从插件的仪表板运行性能测试或转到 Hummingbird >性能测试，然后点击运行测试或新建测试按钮.

这是我初步测试的结果.

初始蜂鸟资产优化测试

在性能测试之后，我运行了 Hummingbird 的资产优化测试.

这是在禁用页面缓存和 CDN 的情况下完成的.

提示:请务必查看 Hummingbird 的文档.它有一个关于资产优化技巧的精彩部分.如果您打算使用 Hummingbird 的高级优化功能，我建议您先阅读该部分.

在资产优化测试之后，Hummingbird 返回了建议修复的列表.

最好告诉我的秘书暂停我的电话并取消本周的所有预订，这样我就可以完成此推荐修复列表！

最初，我经历并开始手动实施 Hummingbird 推荐的每个修复程序.

推荐的手动优化资产的方法是一次修复一项并不断检查您的网站以确保一切正常.

所以，这就是我所做的.每隔几次修复后，我就会在 Hummingbird 中运行另一组性能测试以及新的 Google PageSpeed 和 GTmetrix 测试.

我一直坚持下去，发现我的分数逐渐提高.

例如，这是经过一些额外调整后的蜂鸟性能测试结果......

这是我在使用更多 Hummingbird 魔法后的 Google PageSpeed Insights 移动分数...

我的桌面成绩...

还有我的 GTmetrix 分数...

注意:有时，推荐的修复程序之一会破坏网站.

幸运的是，Hummingbird 推荐的修复程序不会对您的网站造成永久性损坏，尤其是如果您遵循以下提示:

• 如果您要优化大量资产，请给 Hummingbird 时间来处理所有内容.调整资产最多可能需要 5 分钟才能产生结果.
• 如果您按照建议一次实施一个优化修复并且某些原因导致问题，请返回并撤消您所做的最后一次调整.您的网站应该会恢复正常.
• 如果你真的搞砸了，不要惊慌.首先重置模块设置，然后尝试禁用有问题的模块.如果这些措施不能解决问题，只需禁用该插件即可将您的网站恢复到优化前的状态，然后联系我们的支持团队.他们将帮助您解决任何问题(确保同时阅读插件的文档部分关于蜂鸟故障排除.)

当我手动处理优化修复列表时，Hummingbird 的开发人员给我的最佳提示是停止手动优化文件并切换到自动选项.具体来说，我被指示切换到"自动快速"模式，所以我就是这样做的.

除非您要进行资产延迟和内联的自定义设置，否则请选择 Hummingbird 的自动化选项之一:Speedy 或 Basic.您可以通过单击"它是如何工作的?"来了解每个选项的工作原理.链接.

我优化的 WPBakery 网站现在可以提供服务了，但是……

到目前为止，我只使用 Smush 和 Hummingbird 的免费优化功能优化了 WPBakery 网站.

如果您乐于将事情搁置一旁，只需在您的 WPBakery 网站上安装免费插件，您就会发现这些插件将提高您网站的速度和性能.

例如，以下是我的测试站点的结果:

使用 Google PageSpeed Insights，我网站的得分来自……

• 27-> 41(移动)= 52% 改进.
• 46-> 79(桌面)= 72% 改进.

使用 GTmetrix，我网站的得分从……

• D-> B 级.
• 58-> 82(性能)= 41% 改进.
• 89-> 96(结构)= 8% 改进.

如果您渴望使用免费插件进行一些 WPBakery 网站优化(并且使用 Smush 和 Hummingbird 有免费午餐这样的东西！)，那么这些结果非常健康.

然而，我喜欢我的网站优化做得非常好，没有半生不熟的措施.

那么，让我们打开恒温器，看看我们是否更进一步.

7.WPBakery 网站、Smush Pro 和蜂鸟

因为一切都已经设置好了，我很想知道我可以使用 Smush Pro 的附加功能优化我的 WP Bakery 网站多远蜂鸟专业版.

毕竟，爱情、战争和优化网站都是公平的，对吗?

所以，我激活了Smush CDN...

我还启用了在支持的浏览器上提供我网站图像的 WebP 版本的选项.

当我使用 WPMU DEV 托管时，该插件会自动在我的网站上预配置 WebP 转换.我所要做的就是点击 Bulk Smush 按钮.

注意:如果您没有使用 WPMU DEV 托管，则需要为您的主机配置服务器规则.有关更多详细信息，请参阅我们的 WebP 文档 部分.

快速回顾

对于 Smush，我:

• 开启 Smush CDN，
• 启用 WebP 图像，以及
• 检查其他设置以确保我充分利用 Smush Pro.

有了蜂鸟，我:

• 离开 Auto-Speedy 模式来处理网站的所有资产优化.
• 启用页面缓存.
• 在 Hummingbird 的高级工具屏幕中开启了推荐的功能.

我的最终测试结果

以下是我使用 Smush Pro、Hummingbird Pro 和 WPMU DEV 托管的最终测试结果的屏幕截图……所有内容都显示为"11":

蜂鸟性能测试

桌面...

移动...

Google PageSpeed 见解

桌面...

移动...

GTmetrix

8.WPBakery 优化外卖

哇……我们在这里与 WPBakery 一起在我的测试厨房中工作了很多汗水，但我认为证据就在布丁中.

使用 Google PageSpeed Insights，我网站的得分来自……

• 27-> 69(移动)= 156% 改进.
• 46-> 93(桌面)= 102% 改进.

使用 GTmetrix，我网站的得分从……

• D-> A 等级.
• 58-> 92(性能)= 59% 改进.
• 89-> 99(结构)= 11% 改进.

通过Hummingbird 的性能测试，我网站的分数从......

• 45-> 80(桌面)= 78% 改进.

下图显示了我的 WPBakery WordPress 网站使用免费版与专业版 Smush 和 Hummingbird 的改进差异.

任何眼睛比肚子大的人都会很快注意到上述方法适用于使用任何主题优化任何网站.它不仅仅针对 WP Bakery.

此处添加的唯一额外成分是 Smush WP Bakery 集成.

无论您的网站使用 WPBakery、Elementor 还是任何其他页面构建器，将 Smush 和 Hummingbird 添加到您的网站优化组合中，您都应该会看到一些不错的速度和性能改进.请记住，结果可能会有所不同，具体取决于您的托管设置、插件、主题、站点配置等.

如果您想更加瘦身并感受热量，请打开 Smush 和 Hummingbird 的 Pro 功能并考虑使用我们的托管 WordPress 托管以提高速度CDN 和服务器缓存等性能功能，以及快速、新鲜和热门的 24×7 专用支持.

所有这些都是通过 WPMUDEV 会员资格 实现的.

祝您好胃口！