DESIGN SETS FOR OXYGEN
Feel free to donate if you like my tutorials ;)
You have probably seen many articles comparing page builders, always using the same metrics: features, options, interface, price, support, etc.
So, I have decided to run some tests to compare and contrast the size and load times of their basic generated pages. I will also look at their actual code generation and load process, to see if and where they create unnecessary code (thus affecting the above metrics of size and speed). This approach will give us a good baseline idea of which builders are efficient and clean, versus more bloated and slower ones.
Note that all these builders (except Oxygen) rely on the theme they are using. Some themes are more bloated than others. So, to make this a fair comparison we will use the same theme for all of them.
Here is the last WordPress Page Builders Frontend Asset Comparison:
|Dec 2018||May 2019||Nov 2019|
|OXYGEN BUILDER v3.1||20||21||28|
|BEAVER BUILDER PRO v18.104.22.168||37||37||38|
|WPBAKERY PAGE BUILDER v6.0.5||492||493||493|
|ELEMENTOR PRO v2.7.2||583||663||728|
|BRIZY PRO 0.0.30||534||853||866|
|DIVI BUILDER v4.0.5||753||853||965|
I am using the theme Hello, from Elementor. It's a very light theme that loads the bare minimum: a 2.2KB CSS file.
For some builders, we need some content on the page to enable them. So for the first test, I have added a unique element: A Heading.
Then I have made these tests :
Default settings and no styling.
A heading, some text, an image, and a button. The heading is styled (new color, new font - Montserrat, new size). It's almost like a real case scenario.
It's interesting to see how they deal with animations.
Some builders have their own theme, that they sell as the perfect theme to use with their plugin. It's the case for Divi and Beaver, so we are going to do the same test as the first one, but with their own theme. And it's going to be pretty ugly 😉
Here are the builders I have tested :
I only check the real size of the files. Not the transferred size. Note that only Firefox shows the real sizes, so don't get confused with the devtools of Chrome.
TEST 1: Beaver Builder does a pretty good job. By default, it will load two small files.
TEST 2: We add more elements and we style the heading. It's almost like a real page, except that it's still ugly 😉
Beaver is dealing with it quite well. The image and the google font (Montserrat) were added, and the CSS and JS files just got a little bit bigger.
TEST3: Finally, let's add a fade effect to the image.
Beaver has added the waypoints js library. It's one of the most common libraries (elementor, divi, and beaver use it too).
Everything works as expected. Beaver will only load the libraries when they are needed. It seems obvious and logic but you will see that it's not always the case.
TEST4: Happy with Beaver? Well, not that much. We were using a bloat-free theme, that contains almost nothing.
Here is a test with only a heading but with their stock theme: The Beaver Builder Theme.
Can't we have a more bloated theme? It is loading everything, even if we use nothing. Their builder seems to be great. Their theme not that much.
TEST 1: Well, Divi doesn't bother and load everything in these two big files. You didn't add any content (well just a heading actually) and the page is already 886KB big.
Sure, nobody will create a blank page and show it online, but it does show how well these builders are created. And I guess that the more options and features they add, the bigger these files will be.
TEST2: As expected, the two big files didn't change, as they contain everything already. The image and the font were added plus a new font "modules.ttf", which is an icon font apparently.
TEST3: Same result as TEST2.
TEST4: Now the test with their own theme
More than 1MB for a heading...
They have an option to disable Google Fonts so you can save a little if you don't use them. But still, more than 1MB of data, when you only show a heading, it's huge.
Note: I was testing an "old" version of Divi (2.17.6). I just did the same test with the version 2.18.6 and as expected, all their files got bigger. Which mean the more features they add, the more bloated their builder will be.
TEST 1: Elementor loads so many stuff. We didn't start to build the page that everything is already loaded. The Google Font Roboto is loaded by default, but you can also disable it in the option. Which is a good thing.
Just like Divi, they load everything by default, except that the files are not combined. So our page already takes 500KB and 17 requests...for a Heading.
TEST 2: Everything seems normal, the new font was loaded with the image.
TEST3: Well it's the same as TEST2, the fade animation doesn't add anything at this stage, as it was loaded by default since the beginning.
Let's add Elementor Pro just for the first test. It has added 3 more files for a total of 750KB for our "empty" page.
TEST1: The js_composer.min.css is very big. 473KB for a CSS file, even when you don't even style anything on the page.
WPBakery has also added a Google Font when we have added the heading.
TEST2: The image is here, the font was replaced by the one I have added.
TEST3: It's interesting. The good old "Visual Composer" has added the waypoints and animate files because we have added an animation.
It does better than Divi and Elementor.
TEST1: Brizy also loads 2 big files by default, plus a Google Font. These files contain everything, so whatever you put on the page, they will always be here.
TEST2: No surprise, just like Divi and Elementor. Everything is loaded at the first place, now it's just the content.
TEST3: Same result as TEST2, as expected.
TEST1: Here we go again. Big CSS file, plus masonry, plus some frontend stuff...
TEST2: The font, the image...
TEST3: The animation was added, the page got bigger. At least they only add the animation code when it's needed.
TEST1: By default, Oxygen loads 2 Google Fonts. Source Sans Pro and Open Sans. Except that, the only thing Oxygen adds, it's two small CSS files. 14KB + 5.8KB.
What a big difference with other builders.
TEST2: I have changed the font for the heading, but not the global fonts. So now we are loading 3 different fonts, while only 2 are needed here (the heading and the text).
TEST3: The fade animation was added, and as expected, 2 files were added too.
Oxygen is very light and only loads what it is needed...except for the fonts. By chance you can now choose the weights for the default fonts, so you don't have to load everything.
So you can easily reduce the page weight.
And if you don't want to use the Google fonts, don't forget to disable them :
Beaver is great if you use a very light and non-bloated theme. In a word: NOT their own theme.
Oxygen can be very light if you take care well of the fonts. Just choose the fonts you really use, and the weight you really need.
Other builders just don't really care.
Here is finally what each builder is loading by default when you create a new page (in KB).
Google fonts are not included, as they can easily be disabled in their options.
|BEAVER BUILDER v2.1.7||19.81||17.46||37.27|
|ELEMENTOR PRO v2.2.5||349.66||233.45||583.11|
|THRIVE ARCHITECT v2.1.2||409.48||101.5||510.98|
|OXYGEN BUILDER v2.2 Alpha 1||20.11||-||20.11|
|BEAVER BUILDER v2.2.3||37.27||37.09|
|ELEMENTOR PRO v2.5.8||583.11||663.64|
|OXYGEN BUILDER v2.4 Alpha 1||20.11||21.19|
Special thanks to Conor M. O'Brien for the writing suggestion.