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

WPBakery 是世界上最受欢迎的 WordPress 页面构建器之一.了解如何通过安装 WPBakery 插件来加速和提高您网站的性能.

在本教程中,我将向您展示我们如何使用 WPBakery 制作网站……

GTmetrix report.
优化前 WPBakery 网站的 GTmetrix 结果.

为此,使用我们的免费插件 Smush蜂鸟...

GTmetrix report
使用免费 Smush 和 Hummingbird 插件的 WPBakery 站点的 GTmetrix 结果.

最后,经过一些额外的调整*...

GTmetrix report.
完全优化后的GTmetrix结果.* 这些结果包括使用 Smush Pro 功能.

我还将讨论我们屡获殊荣的图像优化插件 Smush 中提供的 WPBakery 的新集成功能,并与其他所有内容一起对其进行测试.

在这篇文章中,我将简要介绍我的测试过程的以下每个阶段,以便您可以在自己的网站上进行复制:

  1. WPBakery 概览
  2. 方法论
  3. WPBakery 站点设置
  4. WPBakery 和 Smush
  5. WPBakery 和 Smush 与 WPBakery 集成
  6. WPBakery、Smush 和蜂鸟
  7. WPBakery、Smush Pro 和 Hummingbird
  8. WPBakery 优化备注

只需按照以下方法使用 WPBakery 来加速和提高您网站的性能.

该做饭了……

1.WPBakery 概览

虽然 有十多种 WordPress 页面构建器,但 WPBakery 仍然是世界上最受欢迎的 WordPress 页面构建器插件之一.

事实上,根据 BuiltWith.com 的说法,WPBakery 是一项"超级"技术.它在全球超过 360 万个网站上使用,并且是第 5 大最常用的 WordPress 插件.

BuiltWith.com-WPBakery usage statistics.
不要想大……想大! WPBakery 使用统计来源:BuiltWith.com

由于我们的许多成员在他们的网站上使用 WPBakery 页面构建器插件,我们决定寻找帮助提高网站速度和性能的方法.

WPBakery WordPress 网站的基本优化技巧

在我们开始使用免费插件优化 WPBakery 网站之前,让我们先了解一些基本的优化要点.

页面构建器和附加代码

几乎所有页面构建器的一个共同特征是,他们将代码添加到您网页的主 HTML 文件和其他文件(例如 CSS 和 JS 文件)中.

虽然这些代码都可以帮助您使用灵活的布局、一系列样式选项和出色的设计元素"构建更好的页面",但它们也会影响您的网站速度,因为它会使您的页面在用户的网络中变得更重和更慢浏览器.

虽然页面构建器添加的额外代码可能不是加载您网站上的特定页面所必需的,而且通常只有几百 KB,但它们对于您的整个网站来说是必需的.

这些附加代码的累积效应可以将您的网页加载时间从几百毫秒增加到几秒钟,因为网络浏览器不仅要下载这些附加代码,还要执行它们以显示您的网页访客.

如果您打算使用 WPBakery,您将希望坚持使用它很长时间,因为停用您网站上的插件会留下一大堆短代码,您需要从帖子和页面中删除这些短代码.

Page with WPBakery deactivated.
哎呀……谁来清理?

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

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

主题

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

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

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

Avada WordPress Theme-Performance Options.
优化您的主题可以对您网站的性能产生巨大影响.

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

托管

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

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

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

Hummingbird-Your server is runng the HTTP/2 protocol notification.
HTTP/2 服务器为网站提供性能提升并改进Google PageSpeed Insights 得分.

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

CDN

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

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

缓存

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

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

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

图像优化

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

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

删除不需要的元素

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

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

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

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

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

2.方法论

由于这篇文章是关于加快速度,我将跳过我们向您展示如何为您的网站设置托管、如何完全配置我们的 Smush 和 Hummingbird 插件以及如何使用页面速度测试工具的部分像 GTmetrixGoogle 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 安装上进行的.

Brand New WordPress Installation
我全新的 WPBakery 网站......新鲜出炉WordPress 烤箱!

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

Shopkeeper-eCommerce Theme for WordPress.
Shopkeeper 是 WordPress 流行的 WPBakery 电子商务主题.

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

Shopkeeper Installation Wizard.
WPBakery 与此主题捆绑在一起.

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

Shopkeeper Demo Content Import screen.
我们把所有的东西都导入网站,把这个宝贝推到最大!

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

Shopkeeper demo content.
将大量图像放入大量页面……现在我们正在做饭!

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

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

Google PageSpeed Insights-Initial Mobile results.
我最初的 PSI 移动结果.

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

Google PageSpeed Insights-Initial Desktop results.
我最初的 PSI 桌面结果.

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

GTmetrix report
GTmetrix 对我未优化网站的看法.

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

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

4.WP Bakery and Smush

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

Smush Setup
嘿,Smush,感谢您提供繁重的工作,但现在让我们保持简单.

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

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

Smush Dashboard after setup.
我会批量处理这几个附加附件.

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

Smush dashboard-all images are smushed.
超过 2330 张图片被模糊处理.干得好,斯马什!

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

Google PageSpeed Insights-Mobile results after setup.
根据谷歌的移动PSI分数,我已经达到了我的30 多岁.

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

Google PageSpeed Insights-Desktop results after setup.
多亏了谷歌的桌面 PSI 分数,我现在到我 50 岁出头……

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

GTmetrix results after initial setup.
在我看来更像是 C+!

好吧,打开 Smush 也不错.

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

5.WPBakery 和 Smush WPBakery 集成

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

WPBakery-Custom sized images.
一些使用 WPBakery 的主题允许您添加自定义大小的图像.

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

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

Smush WPBakery integration.
对图片有特殊要求? Smush 为自定义大小的图像提供 WPBakery 集成.

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

Bulk Smush images after WPBakery integration.
打开 WPBakery 集成带来了 85 个需要重新调整的图像.

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

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

Google PageSpeed Insights-Mobile results after Smush WPBakery integration.
有一点需要支持 Smush 的 WPBakery 集成特征.

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

Google PageSpeed Insights-Desktop results after Smush WPBakery integration.
还有一点值得一提……记得打开 Smush WPBakery 集成功能!

我的 GTmetrix 结果也略有改善.

GTmetrix results after Smush WPBakery integration.
我看到一个 C,这不是 B.S.(B 分).

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

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

6.WPBakery、Smush 和蜂鸟

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

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

Hummingbird activated in WordPress site.
带有激活的蜂鸟和 Smush 一侧的 WPBakery.DevMan,给大厨点赞!

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

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

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

注意事项:

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

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

初始蜂鸟性能测试

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

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

Hummingbird Dashboard-Run Performance Test.
单击蜂鸟仪表板中的按钮以运行性能测试.

这是我初步测试的结果.

Hummingbird dashboard-Performance test results.
我在安装 Hummingbird 后的性能测试结果.

初始蜂鸟资产优化测试

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

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

Hummingbird Asset Optimization with CDN disabled.
看,妈妈,没有 CDN!

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

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

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

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

Hummingbird-Asset Optimization
我正在解决这个列表.

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

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

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

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

Hummingbird Perfornance test results.
说到调整……我的分数达到了惊人的峰值!

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

PageSpeed Insights mobile score.
女孩,我们不能再高了……或者可以我们?

我的桌面成绩...

Google PageSpeed Insights desktop score.
来吧宝贝,点燃我的火.

还有我的 GTmetrix 分数...

GTmetrix report
尝试将我的网站设置为....fi-aaaarr!

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

Over tweaking sites can break up code on pages.
呃哦......我想知道是否有人会注意到我的主页看起来不一样了.

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

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

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

Hummingbird automatic asset optimization settings.
Hummingbird 的开发人员建议使用 Auto-Speedy 来优化您网站的资产.

除非您要进行资产延迟和内联的自定义设置,否则请选择 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% 改进.
Optimizing WPBakery Site with Free Smush and Hummingbird.
这些都是很好的改进!

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

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

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

7.WPBakery 网站、Smush Pro 和蜂鸟

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

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

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

Smush CDN-Get started screen.
提高速度和节省?是的,请!

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

Smush-WebP activation screen.
甚至更快的流媒体?我得去 WebP!

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

Smush Dashboard.
一键批量优化...我很喜欢

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

快速回顾

对于 Smush,我:

有了蜂鸟,我:

  • 离开 Auto-Speedy 模式来处理网站的所有资产优化.
  • 启用页面缓存.
  • 在 Hummingbird 的高级工具屏幕中开启了推荐的功能.
Hummingbird Advanced Tools-General tab.
按照常规选项卡的说明来减少页面加载时间和坚持!

我的最终测试结果

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

蜂鸟性能测试

桌面...

Hummingbird Performance Test-Desktop.
调整太棒了!

移动...

Hummingbird Performance Test-Mobile.
不错……可以多用一点!

Google PageSpeed 见解

桌面...

Google PageSpeed Insights Score-Desktop.
我爱我的果岭!

移动...

Google PageSpeed Insights Score-Mobile.
六十九,感觉很好!

GTmetrix

GTmetrix Performance Report.
甜……

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 的改进差异.

Optimizing WPBakery Site with Smush and Hummingbird.
WPBakery 网站使用整个辣酱玉米饼馅进行了优化!

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

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

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

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

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

祝您好胃口!

VPS1352主机测评网(www.vps1352.com)
本文链接:https://www.vps1352.com/7605.html

1
订阅评论
提醒
0 评论
内联反馈
查看所有评论