海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

如果您正在为下一个 WordPress 项目寻找页面构建器,Divi 和 Beaver Builder 是您的两个最佳选择。 为确保您的网站发挥最佳性能,您需要使用功能强大且快速的构建器,因为网站速度对于积极的用户体验至关重要。

在这篇文章中,我们将看看这两个构建器的性能,以帮助您确定哪一个更适合您。 我们还将介绍主要功能以及有关如何充分利用每个构建器的速度的一些技巧。

那么,哪个页面构建器更快:Divi 或 Beaver Builder? 继续阅读以找出答案!

我们如何测试 Divi 与 Beaver Builder(全移动方法)

为了帮助您了解 Divi 和 Beaver Builder 如何比较站点速度,我们将进行三个单独的测试。 为什么? 因为每个工具都必须与各种类似的场景进行比较,所以可以进行一对一的比较。

WordPress 版本:

主题: GeneratePress 的免费版本

插件:

  • Divi 页面生成器 (V.4.9.3)
  • Beaver Builder Page Builder(高级版 V 2.5.1)

注意:Divi 和 Beaver Builder 都提供了一个主题,但为了保持我们的比较公平,我们将只比较独立的高级页面构建器。 如果您想知道 Divi 主题的速度有多快,我们建议您阅读我们的专门文章。

海外社媒SNS代运营Tiktok代运营公司

工具和移动 KPI:

  • WebPageTest(完全加载时间和移动设备上的HTTP请求数 – 巴黎的Iphone X)

场景 #1 – 只是带有一行文本的插件

在添加任何内容(小部件和任何其他高级设计)之前,我们将看看每个插件的权重如何。 为此,我们将仅使用一行文本在我们的网站上启用 Beaver Builder 和 Divi 的插件。 Google PageSpeed Insights 的结果应该不错。

场景#2 – 一些内容

为了尽可能保持公平和平衡,我们将为每个构建器添加以下模块/部分:

  • 一个按钮——号召性用语
  • 一个数计数器部分
  • 一个定价表(两个计划)

场景 #3 – 一些内容 + WP Rocket

最后,我们将在同一个测试站点上激活 WP Rocket 插件,以检查性能等级是否有所提高。

Speed Divi 与 Beaver Builder 性能比较

在开始速度测试之前,我们建议您阅读有关测试 WordPress 网站性能的详细指南。

现在让我们深入了解我们的性能比较!

场景 #1 – 纯文本

在第一个测试中,我们使用每个构建器的文本模块添加一行文本。

带有 Divi 的文本模块 带有 Beaver Builder 的文本模块

这是我们的发现:

KPI(移动性能) 分区生成器
表现
海狸生成器性能
总成绩 97/100 95/100
FCP 1.8 秒 2.2 秒
SI 1.1 秒 1.3 秒
LCP 0.680 秒 1.4 秒
TTI 1.9 秒 2.2 秒
TBT 0 毫秒 0 毫秒
CLS
满载时间 1.339 秒 0.944s
HTTP 请求 11 6

内容不多, Divi Builder 略好于 Beaver Builder. 让我们看看更多内容的审计进展如何。

场景#2 – 一些内容

提醒一下,我们构建了两个具有匹配模块的相似页面:

  • 一个按钮——号召性用语
  • 一个数计数器部分
  • 一个定价表(两个计划)
我们与 Divi 的页面
(相同的模块)
我们的 Beaver Builder 页面
(相同的模块)

总的来说,我们的两个测试站点都变慢了(当我们添加一些内容时这是有道理的)。 Google PageSpeed Insights 为我们的测试站点提供橙色等级 比Divi略有优势.

关键绩效指标 (移动性能) 分区生成器
内容表现
Beaver Builder Performance 与内容
总成绩 89/100 85/100
FCP 1.8 秒 2.2 秒
SI 1.4 秒 1.3 秒
LCP 0.980 秒 1.4 秒
TTI 2.9 秒 2.2 秒
TBT 0 毫秒 0 毫秒
CLS 0.025
满载时间 2.339 秒 2.444s
HTTP 请求 18 15

主要结论:

Divis 的完全加载时间为 2.3 秒——比 Beaver Builder 稍快,后者加载时间为 2.4 秒. 总的来说,这两个主题都很快,是实现性能目标的绝佳选择。

在 Core Web Vitals 方面,Divi 的表现也略好于 Beaver Builder。 Divi 的最大内容绘制 (LCP) 不到 1 秒,这也是为什么它在 PSI (89/100) 上比 Beaver Builder (85/100) 获得更高的性能等级。

WordPress花园建议你也读一下这篇文章  WordPress网站加速教程:购物者放弃购物车的 13 个原因以及如何解决它

让我们用最后一个场景来完成我们的性能测试:安装强大的缓存插件 WP Rocket。

场景 #3 – 🚀 使用 WP Rocket

激活WP Rocket时,我的两个测试站点都在移动设备上的绿色区域中!

最重要的改进之一是完整加载时间指标. 对于 Divi 和 Beaver Builder,它从 2.339 秒变为 0.618 秒,从 2.444 秒变为 0.606 秒。

迪维 + WP 火箭
(PSI)🚀
海狸生成器 + WP 火箭
(PSI)🚀

这是显示使用和不使用 WP Rocket 的主题性能的比较表:

关键绩效指标 (移动性能) 分区生成器
内容表现
分区生成器
WP Rocket 的性能 🚀
Beaver Builder Performance 与内容 Beaver Builder 性能与 WP Rocket 🚀
总成绩 89/100 99/100 85/100 98/100
FCP 1.8 秒 0.7 秒 2.2 秒 1.1 秒
SI 1.4 秒 0.7 秒 1.3 秒 1.1 秒
LCP 0.980 秒 0.9 秒 1.4 秒 2.5 秒
TTI 2.9 秒 0.7 秒 2.2 秒 1.1 秒
TBT 0 毫秒 0 毫秒 0 毫秒 0 毫秒
CLS 0.025 0.025
满载时间 2.339 秒 0.618s 2.444s 0.606s
HTTP 请求 18 5 15 4

性能要点:

感谢 WP Rocket,我们看到了以下两个主题的改进:

  • 我所有的 Core Web Vitals 都在绿色区域(对于 Divi 和 Beaver Builder)。
  • 满载时间有所改善(平均减少 -75%)。
  • 至于满载时间,Beaver Builder 现在比 Divi 略快。
  • HTTP 请求的数量显着减少。

WP Rocket 的伟大之处在于,无论您决定使用哪种页面构建器,您最终都会在 Google PageSpeed Insights 上获得认可。

如果您想知道我们是如何取得如此出色的性能结果的,请跳到我们的最后一部分!

现在让我们看看每个构建器的主要功能,以便我们帮助您做出选择。

在 Divi 与 Beaver Builder 之间进行选择:主要功能和定价

Beaver Builder 和 Divi 都是 WordPress 的出色拖放页面构建器。 首先,让我们列出它们之间的相似之处:

他们共同的主要特点:

  • 前端页面构建器——所见即所得(WYSIWYG) – 它们都具有简洁且符合人体工程学的界面,直观且非常易于使用。
迪维接口 海狸生成器界面
  • 能够为您的 WordPress 帖子和页面设计高级自定义布局 – 具有简洁的界面
Divi 样式界面 Beaver Builder 样式和高级界面
  • 令人印象深刻的响应式模板库 – 您可以简单地替换为您自己的内容。 我个人更喜欢 Divi 库的外观,因为您可以按类别和行业进行搜索。
迪维图书馆 海狸生成器库
  • 有用的整个可定制模块 – 用于向您的网站添加滑块、图像、按钮、圆形计数器、定价表等
  • 能够为自定义帖子类型和档案创建自定义模板 —— 就像 WooCommerce 中的 Shop 页面、404 页面和单个产品布局一样。
  • 完整的主题建筑选项 – 能够围绕页面内容设计所有内容,例如自定义页眉、页脚和网站的其他部分。
  • 全局模块 —— 创建可重复使用的内容库,以在整个 WordPress 站点中使用。 真是省时省力啊!
  • 电子邮件选择选项 – 它们都可以让您捕获来自访问者的电子邮件以增加您的列表。
  • 他们周围的大社区 – 它们都提供了一个重要的第三方扩展市场。

现在,让我们回顾一下差异:

  • 拆分测试功能 (仅限 Divi) —— 用于分析和优化您的内容以获得更高的转化率。 该模块称为 Divi Lead,包含在 Divi Builder 中。
  • 白标 (仅限海狸生成器) —— Beaver Builder 有一个白色标签选项,因此您可以将自己的外观和感觉放在 WordPress 仪表板上。 您将需要 Divi 的“Ghost”附加组件,该附加组件未包含在构建器中。
  • 完整的主题构建选项和动态内容 – Divi 主题(Divi Builder 随附)具有自定义页眉和页脚以及添加动态内容所需的所有功能。 Beaver Builder 也非常强大,但您需要下载另一个附加组件:Beaver Builder Themer。 您将获得更多的设计灵活性并控制通常由主题控制的网站部分(例如 WooCommerce 和 BigCommerce 的商店或类别页面)。 您还可以连接自己的自定义字段和条件逻辑。

定价

优雅的主题会员 (Divi) 提供更多价值,因为它附带其他高级功能(主题、页面构建器、主题构建器、WooCommerce 构建器、A/B 测试工具、模板库、社交媒体插件)用于共享您的内容和选择加入的电子邮件工具)。 您可以选择年度计划并付款 每年 89 美元 或 1 倍的价格 $249 获得终身 访问和更新。

要使用 Beaver Builder 解锁类似功能,您需要安装主题、页面构建器和主题。 Pro 软件包是最接近 Divi 的软件包。 它的成本 每年 199 美元 并且不提供任何终生选择。

Beaver Builder 定价
Beaver Builder 定价

如何加速 Beaver Builder 和 Divi

为了加速任何 WordPress 页面构建器,Lighthouse 主要建议使用强大的缓存插件来优化您的代码和图像,如下所示:

Lighthouse 提出的性能建议示例 - 来源:PSI
Lighthouse 提出的性能建议示例 – 来源:PSI

您很幸运,因为 WP Rocket 在提高性能方面符合上述所有要求。 正如我们在上面的审计中看到的,WP Rocket 显着加快了我们的测试站点的速度(我们在 PSI 上使用 Divi 和 Beaver Builder 达到了 99/100 和 98/100)。

事实上,为了保证快速的网站, WP Rocket 自动应用 80% 的 Web 性能最佳实践. 当我们激活 WP Rocket 时,这主要发生在我们使用 Divi/Beaver Builder 构建的 WordPress 网站上:

  • 缓存和 Gzip 压缩 – WP Rocket 是一个完整的缓存插件,可以缓存所有页面,以便快速查看,包括移动访问者。 由于 GZIP 压缩,它还减少了带宽使用。
缓存功能 - 来源:WP Rocket 插件
缓存功能 – 来源:WP Rocket 插件
  • 延迟加载图片 – 我们实现了延迟加载,这是一种仅显示访问者实际查看的图像的技术。
延迟加载功能 - 来源:WP Rocket 插件
延迟加载功能 – 来源:WP Rocket 插件

注意:如果您想通过压缩进一步优化您的图像并将它们转换为 WebP,您可以使用 Imagify。

  • CSS 被缩小、组合并优化了它的交付—— WP Rocket 还从页面构建器中删除了所有未使用的 CSS。
CSS 优化 - 来源:WP Rocket 插件
CSS 优化 – 来源:WP Rocket 插件
  • JavaScript 也被缩小、延迟和延迟—— 这旨在消除所有渲染阻塞问题并缩短加载时间。 通过将 JS 延迟到用户交互,WP Rocket 优先显示需要首先显示的内容并节省一些资源。
JS 优化 - 来源:WP Rocket 插件
JS 优化 – 来源:WP Rocket 插件

最后一点,还要确保为您的下一个 WordPress 项目使用快速可靠的托管服务提供商,该项目使用 Divi 或 Beaver Builder 等页面构建器构建。

包起来

总而言之,Divi 和 Beaver Builder 各有优缺点,但在性能方面,它们相差不远。 选择最终取决于您的需求以及您正在寻找的网站体验类型!

Beaver Builder 有一个非常轻量级和干净的代码。 没有内置的性能功能,因为 Beaver Builder 团队将高级优化留给了其他插件。

关于 Divi,只有使用主题,您才能获得一些性能调整,例如 CSS 优化(并且仅适用于使用 Divi 构建的内容)。 Divi 的创始人和 Beaver Builder 的做法是一样的:他仍然建议使用 WP Rocket 这样的性能插件来提高你的 Lighthouse 分数。

现在是您加快网站速度的时候了!