Updated: April 27, 2020

WordPress page builder plugins continue to grow in popularity, even after the integration of Gutenberg into WordPress core. They make it easier to build beautiful and feature-rich WordPress content without learning how to code or bringing in outside help.

Back in November 2018 we put together a performance comparison that looked at the brand-new WordPress 5.0 which included the new Gutenberg editing interface. The results of those tests showed us that while the experience of using Gutenberg was pretty awful, the performance was nothing to be ignored; it handily beat the competition.

We’ve refreshed the data by testing current versions of WordPress and the page builders. We ditched Brizy which was a nightmare to use in 2018 and hasn’t improved at all and added the popular Elementor and Page Builder plugins to the mix.

Let’s dive in to the numbers and find out which is the fastest WordPress page builder! Not interested in the nitty-gritty? Jump to the Conclusions.

What We Tested

In thinking about the best way to setup this test, we tried to come up with the most likely use-case scenarios for a typical WordPress user who might use a page builder rather than letting the theme handle design. We kept it simple, choosing a large hero image, three smaller featured images, some text blocks with an image inserted, and a call-to-action at the bottom. This was a design we could easily replicate and should be a good example of how a typical post or page might look.

We expected Gutenberg to outperform the competition like it did in 2018, but that wasn’t the case – at least not in terms of onload and fully loaded times. Page Builder pulled out an unexpected win here, with Gutenberg in second and the others trailing. 

Test Page Performance Results

We also tested the default home page the 2020 Theme generates to see how that may be affected by having a page builder plugin installed. The results here are interesting because you’d think that Gutenberg would be the fastest but it’s not – Beaver takes the win here with Page Builder a close second and Divi once again coming in a distant fifth.

Home Page Performance Results

One of the causes of performance issues on any website is the total size of the page. Below you can see that while Gutenberg is the lightest, Beaver and Page Builder aren’t far behind. Elementor and Divi, on the other hand, are significantly heavier due to their additional scripts.

Test Page Sizes

Finally, we compared the number of elements each page loaded on both the test and home pages. Elementor had by far the largest number of elements on the test page, coming in at 31 compared to the next highest, Divi, at 22. It’s hard to imagine why Elementor needs that many scripts in order to present a simple page, but it’s a cause for concern and helps to explain Elementor’s poor performance numbers.

Digging a little deeper, we found something even more alarming. Remember, we only used the page builders to design the test pages. While all of the other page builders didn’t load unless they were needed, Divi loads all of its scripts no matter what. The installations with the other page builders set up loaded 17 elements on the homepage – they didn’t load their own scripts because they weren’t used to build the page. The Divi site loaded 25 elements because it loads on every page, regardless of whether or not it was used to build that page.

What’s even more bizarre is that while Divi calls five of its own scripts on the home page, it also calls a “dashicons” script and two jQuery files that no other plugin needed to load. 

Number of Elements Per Page: Test Page & Home Page

About The Page Builders

 

Gutenberg

GutenbergGutenberg is an absolute mess. It took us much longer to build the test page in Gutenberg than in any other editor. It’s buggy and has a user interface that was designed without actual users in mind. It tries so hard to “get out of the way” that you can’t find anything, so you end up clicking around endlessly trying to figure out how to do basic things like add an image to a column.

It’s made progress since it was introduced into WordPress core in 2018, but it lags behind the competition significantly and until the team takes the user experience more seriously, it isn’t likely to be a great option for anyone looking for a fully-featured page builder.

 

Beaver Builder

Beaver BuilderBuilding the page in Beaver Builder was easier than Gutenberg, but not as intuitive as Divi or Elementor. There is a lot more clicking involved to do basic things like adding an image in a blank column and most of that requires moving your cursor to the top-right corner of the page and clicking the plus button. It’s wasted movement, but it’s something you’d get used to after a while. Another bizarre choice is how much padding and margin Beaver Builder adds. Everywhere you look, BB is adding 20px around your elements without asking. You can change it in Global Settings, but it’s kind of odd to see a page builder make a design choice like that right out of the gate.

 

Divi Builder

Divi BuilderOh, Divi. You big, lumbering, beautiful beast.

If you want to build top-notch content in WordPress quickly, Divi is the way to go. There really isn’t a better page builder experience out there.

But if performance matters, you’re going to have to reassess. Just as with our testing in 2018, Divi is significantly slower than the competition; nearly 70% slower than Page Builder. Not only that, but it also loads itself everywhere on your site, regardless of whether or not you actually used the plugin to build the content.

Back in 2018, we noticed Divi caused a significant hit to TTFB (Time To First Byte) performance. We attributed that to the server having to chug a bit to pump out all of those files. Divi’s impact on TTFB has improved in 2020, likely a result of work Elegant Themes has done with caching their files, but it’s still the slowest page builder we tested.

 

Elementor

Elementor Page BuilderWith over four million active installs, Elementor is one popular page builder.

It provides all of the core functionality you’d expect out of a popular, well-maintained page builder plugin. The interface is straight forward and easy to use, relying primarily on a sidebar for options. We don’t think it’s as intuitive as Divi, but it certainly has Gutenberg and Page Builder beat.

That said, Elementor isn’t lightweight. It was about 37% slower than Gutenberg and Page Builder on our test page and the heaviest of all in terms of page size. Although it didn’t load itself outside of the test page, it did need a lot of elements there; 31 compared to the low water mark of 13 set by Gutenberg.

 

Page Builder

WPBakery Page BuilderThe granddaddy of all page builders, the plugin formally known as Visual Composer pulls out a surprising win here in the page load tests.

We don’t think anyone is going to argue that Page Builder is the best tool on the market for building content, but it’s so popular and it’s been around so long that most of us have worked with it and once you’ve built content with Page Builder, you’re not going to easily switch to something else.

While not quite as light as Gutenberg, Page Builder is consistently quick to load thanks to its low element count – only 19 compared to Divi’s 22 and Elementor’s 31. 

The backend editor is arcane and hasn’t seen any real improvement in years and the frontend editor is notoriously wonky and rarely shows the page as it would look to a visitor (even in our very simple test it didn’t display properly in the frontend editor), but once you get the hang of it, you can iterate quickly and reliably.

Test Designs

Here you can see each of our test designs. They are as close to the same as we could make them.

Testing Methodology

We installed the latest version of WordPress, 5.4 which came with Gutenberg 7.6, and the current version of each page builder as of mid-April 2020 in separate, clean installations.

Everything was installed on the same server and configured with largely default options. We use Lightning Base whenever we want a WordPress site to really fly – check out those rock-solid TTFBs as evidence. The server was configured with PHP 7.3.16. HTTP/2 was enabled but no caching. We used GTMetrix to test each site six times and used the average of those runs for our results.

Here are the versions of the plugins we tested: Divi – 4.4.3; Beaver Builder 2.3.2.5; Elementor 2.9.7; Page Builder 6.1

Conclusions

Gutenberg should have every advantage. It’s built into WordPress core and developed by a lot of the same people who have built and contributed to WordPress itself. It has a massive install base to use for testing and optimization and was built more recently than all of its competitors, so the code should be cleaner and more modern (or at least it has the potential to be).

Despite all of that, it still lost to the veteran Page Builder. There wasn’t a massive gap between the two, though, so the most impressive thing for us is that Page Builder performed as well as it did. We don’t think you’d find a lot of developers out there who think Page Builder is the best way to build a website, but at least from a technical standpoint, it’s certainly not the worst.

Beaver Builder landed pretty squarely in the middle. It wasn’t super fast on our test page, but it did manage a win on the home page test results because it didn’t add any code there. Page Builder came in second on the home page tests, making it the fastest WordPress page builder we tested, overall.

Pulling up the rear were Elementor and Divi. Both were significantly larger than the others both in terms of total page size and the number of elements they loaded. Divi even loaded itself when it wasn’t in use, and actually loaded more elements on the home page than our test page.

Winners

Fastest Combined
Page Builder

Fastest Test Page
Page Builder

Fastest Home Page
Beaver Builder

Smallest Test Page
Gutenberg

Smallest Home Page
Four-way tie

Test Page Onload Speed (in seconds)

Home Page Onload Speed (in seconds)

Test Page Sizes (in kb)

Home Page Sizes (in KB)

The Experience Still Matters

We still don’t like Gutenberg, and we’re not the only ones. It’s just not a satisfying experience and was more difficult to build in than any other tool we tested. Gutenberg has improved since 2018, but the other builders continue to outpace it in nearly every way where usability and user experience are concerned.

Divi and Elementor represent the pinnacle of the builder experience. They are easy to use, come with tons or great templates and tutorials, and you can do just about anything you can think of with relative ease. You are going to pay a price in performance (and possibly dollars because Divi is a premium plugin and Elementor has a paid version with more features), but that may be worth it depending on your situation.

Caching Changes Everything

When you look at our results, bear in mind that caching isn’t enabled (except for Divi’s native caching which clearly isn’t enough). If you install and configure a decent caching plugin, you’re going to see better results. We often see page speeds cut in half with Divi when we configure caching, making it competitive in performance. We’d expect all of the load times seen here to dip below one second if caching was configured, meaning that none of the solutions would be bad, just slower than some of the others.

9
0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest