WordPress page builders are increasingly becoming the norm and it’s easy to see why. Page builders allow you to the edit your webpages with a visual representative of how the page will look, typically using drag-and-drop blocks.
Other website platforms, such as Wix, already have their own page builders, so it’s important WordPress embraces these advances too.
Virtually all the web designs we create here at Primary Image now include a WordPress page builder, which our clients like, and it also speeds up our development time.
However, after being invited to participate in a panel discussion at this month’s WordPress London event (pictured right), I thought I’d do a quick comparison of the different page builders on the market, some of which I’ve used for the first time!
What are the advantages of using a page builder?
- You can visualise how the page will look when published.
- They allow complex layouts and designs to be created quickly.
- You don’t have to use shortcodes to create page layouts (so old school now!).
- You’re not restricted to set layouts, like with custom fields.
- Developers can often extend page builders with custom-designed blocks.
- You can sometimes save blocks to re-use on other pages.
What are the disadvantages of using a page builder?
- There’s clearly a learning curve with using new software (I’ll come onto this below).
- There can be a performance impact on your website (again, I’ll look at this).
- You’re tied into using that page builder, until your next major website refresh. If a page builder is uninstalled, you’ll lose all your formatting (and maybe your wording too!).
- Without the aid of an experienced designers, users can accidentally mess up layouts or make poor design choices, which ruins the professional design. Though, I’m aware some page builders can now lock the layout, meaning only text can be edited, which solves this issue.
TESTING WORDPRESS PAGE BUILDERS
I installed seven different WordPress page builders and ran some tests:
- Beaver Builder Lite (1.10.7 – August 2017)
- Divi Builder (2.0.14 – June 2017)
- Elementor (1.7.1 – August 2017)
- Fusion Builder (1.2.1 – July 2017)
- Gutenberg (1.0.0 – August 2017)
- Page Builder by Site Origin (2.5.11 – August 2017)
- Visual Composer (5.2.1 – August 2017)
Each of the page builders were installed on a clean WordPress installation (version 4.8.1), running the default Twenty Sixteen theme.
There are some limitations of this test, which I’ve noted later on…
My basic test involved creating a simple two-column layout, containing just over 100 words, which simply looks like this:
What I wanted to test:
- How do the page builders affect website speed / page weight? (This is something I’ve always been interested in, and I’ve given talks on this subject!).
- How easy are they to use?
- What happens if you leave the page builder.
HOW WORDPRESS PAGE BUILDERS AFFECT LOADING SPEED / PAGE WEIGHT?
WordPress is shown here as the baseline (no page builder installed), then we can see the impact each of the page builders have on page weight.
All I’ve tested here is a simple two-column layout to see what resources the page builder loads in the background by default.
It appears some page builders are selectively loading what they need, depending on what blocks you’ve used, rather than loading all the resources. That clearly makes a lot of sense.
The raw data is shown below:
| Total Files Loaded | JavaScript files | CSS files | Page Size | |
| WordPress (base) | (13) | (6) | (3) | (164kB) |
| Page Builder by Site Origin | +1 | +0 | +1 | +1kB |
| Gutenberg | +1 | +0 | +1 | +5kB |
| Beaver Builder | +2 | +1 | +1 | +10kB |
| Visual Composer | +2 | +1 | +1 | +64kB |
| Elementor | +13 | +5 | +7 | +95kB |
| Divi Builder | +11 | +6 | +4 | +151kB |
| Fusion Builder | +68 | +67 | +1 | +218kB |
VISUAL COMPOSER
Visual Composer is one of the most popular WordPress page builders, running on over two million websites. It’s often found bundled with premium themes and I’m pretty familiar with this one.
Impact on page weight:
There’s an impression that Visual Composer is a bit of a resource hog, but I was pretty surprised by this test. The page builder has been optimised fairly well, adding only two files and 64kB of download size to the page load, which isn’t going to trouble us!
Ease of use:
You activate Visual Composer on any post or page by clicking the “Backend Editor” or “Frontend Editor” buttons. I’ve personally always used the “Backend Editor” option, which stays within the familiar WordPress interface.
In my test, adding two text columns, it’s straightforward to use and works effectively.
Adding new blocks could be a bit overwhelming for new users, with a huge screen of options! However, I do like the small description associated with each block, and it’s easy for developers to add their own custom blocks (as we do here!).
Leaving the page builder:
I wanted to test what happens when you leave or deactivate the different page builders.
If you switch between Visual Composer and normal WordPress mode, it doesn’t do any harm to the pages. The shortcodes are left in place, which Visual Composer recognises when it’s next activated.
BEAVER BUILDER
I’ve only used the free version of Beaver Builder for this test, but that gave me a good idea of its capabilities. It seems pretty popular within the developer community, with over 275,000 installs.
Impact on page weight:
It only added 10kB to the page download size in our test, so pretty respectable!
Ease of use:
It’s activated by clicking on the “Page Builder” tab:
You’re then taken to a front-end view of your webpage, so it’s very visual!
Blocks are dragged from the sidebar and it’s easy enough to use.
Leaving the page builder:
If you try going back to the default WordPress editor, Beaver Builder strips away all the page builder layout, so you’re left with clean text.
It effectively saves the page builder view as a separate version, which seems useful, so you can always go back to it:
FUSION BUILDER
Fusion Builder comes with the Avada theme, with over 350,000 sales, and it’s one of the most widely-used premium themes on the market.
Fusion Builder is not currently released as a standalone product, so this test may be a little unfair, but apparently it will be sold as a separate product in the future. And, as our test shows, Fusion Builder does appear to run ok on non-Avada themes.
Impact on page weight:
Wow! It’s very heavy on performance and clearly loads everything in the background. Fusion Builder added 68 files to each page load, which will have a noticeable speed impact to your visitors.
If you use Avada (or Fusion Builder), I’d strongly recommend using a combining plugin.
Ease of use:
It’s similar to Visual Composer, so you click on a button to activate the page builder view, but you stay within the familiar WordPress back-end.
I find this page builder a bit harder to use, particularly with how it adds columns. It’s not quite as slick as Visual Composer.
Compared to other page builders, adding new blocks is fairly tucked away into a small bar, which may not be as obvious for some users.
The popup screen to add new elements is functional enough, but takes up a lot of space!
Leaving the page builder:
Like Visual Composer, it relies on shortcodes, and you can switch between the normal WordPress editor and Fusion Builder without doing any harm.
However, it leaves a lot of mess behind! The shortcodes include all the options, even those that have been left blank:
PAGE BUILDER BY SITE ORIGIN
I’d heard of this one, but never used it before. It’s a free plugin and has over one million installs.
Impact on page weight:
Out of all the page builders I tested, this had the least impact on page weight, adding only 1kB to the total page load, which is really impressive!
Ease of use:
It’s activated by clicking on the “Page Builder” tab:
The first thing that struck me was it looks quite old-fashioned and not particularly nice to look at. The buttons and text seem a bit small.
Leaving the page builder:
Page Builder by Site Origin doesn’t use shortcodes, but instead puts HTML directly into the saved page.
When I tried switching to default WordPress mode, then back to this page builder, it caused problems because it seems TinyMCE had altered the code. This rendered the page builder layout unusable.
I’m afraid I found this page builder to be my least favourite of the bunch.
ELEMENTOR
Elementor has had over 1,500,000 downloads. There’s free and premium versions available.
Impact on page weight:
This page builder makes visitors download thirteen extra files (JavaScript and CSS files), which isn’t great for speed optimisation, but the additional download weight only comes in at 95kB, so it’s fairly minimal.
Ease of use:
Elementor is activated via a button in the WordPress editing screen. It then loads a front-end view, so similar to Beaver Builder.
It’s got a nice interface, making it easy to drag and drop blocks.
What I didn’t like, however, was my text had to be edited in the tiny sidebar, which I found quite restrictive. If I had been writing a lot of content, this could be annoying!
Update – thanks to Alan posting a comment, who pointed out the sidebar can be expanded a bit further, which I didn’t notice originally! Perhaps that could be made clearer in the user interface design? Though it still feels a bit constrained, compared to other page builders.
Leaving the page builder:
Elementor effectively locks you from editing content in the default WordPress screen.
If you do decide to go back to the default WordPress editor, your content is converted into normal text, which I think works well.
GUTENBERG
Gutenberg is basically how WordPress will look in the future, which is planned to launch with WordPress 5.0.
It’s only released for beta testing at the moment, so this test isn’t entirely fair! Though it’s already attracted a huge amount of discussion within the WordPress community.
Impact on page weight:
Gutenberg is very lightweight, but as it’s going to be bundled into WordPress core, that’s to be expected really!
The expectation is that theme builders will add their own styles to work on top of Gutenberg.
Ease of use:
Personally, I found it very fiddly to add columns, because the menu to add new blocks is hidden away. You have to do lots of scrolling to find and add elements.
I imagine beginners would find this quite hard to use. The interface is fairly minimalist too.
This is, though, only the start of Gutenberg, and it’s certainly going to be developed much further over the coming weeks.
Leaving the page builder:
It’s got a clever interface, which locks content that has been edited outside of the page builder.
As this will become the “default” WordPress editor, I guess it’s almost irrelevant to look at what happens if you switch it off!
DIVI BUILDER
The Divi theme is one of the most widely-used premium themes, although its Divi Builder is sold as a standalone product too.
Impact on page weight:
In my test, Divi Builder made visitors load an extra eleven files (an additional 151kB of data), so it’s not particularly well optimised for speed.
Ease of use:
The first thing I noticed is that it’s REALLY colourful!
It takes a bit of time to understand how it works, but I found it fairly similar to Fusion Builder, where you add blocks via buttons within the layout.
Update – thanks to Grant for posting a comment, who pointed out you can use the front-end editor too (called Visual Builder).
Leaving the page builder:
If go back to the normal WordPress editor, you basically lose all your content, which isn’t ideal.
I think some of the other page builders handled this better, such as where they convert your content back to plain text.
FINAL THOUGHTS…
It’s been really useful to see how different page builders have their own ways of doing things. Clearly some are better than others in different areas.
The surprise for me has been, on the whole, how efficient page builders are to page weights (with the exception of Fusion Builder!).
Though all eyes at the moment will be on the new WordPress editing interface – Gutenberg – so it’ll be interesting to see how this evolves in the coming weeks and months…
Thanks to Todd Halfpenny for the WordPress London picture above.
Mike founded Primary Image in 2010. He specialises in the WordPress website platform and speaks regularly at national web design conferences. Mike became a member (MCIPR) of the Chartered Institute of Public Relations in 2015.
Comments
I am currently using the Oxygen plugin by Soflyy for WordPress page building and I am wondering if you would consider revising this article to add a comparison to the page builders you already have listed here.
It’s funny, because I’ve tried a few of these, including Beaver, Fusion, and VC. Page Builder from Site Origin is my favorite. I’m glad to see it’s light. Now, it does have its quirks, but I found that the others do as well.
Curious: have you compared Live Composer?
I use motopress content editor for 3 years already; you should have tested it too, I’m sure it will be one of the most lightweight and easy to use builders (without shortcode lock-in)
Thanks Abner, Lucas & Ang for your comments – most appreciated! I have to confess I hadn’t come across those other page builders you mentioned, I guess because they’re less known compared to some of the other names, but I’ve just been reading up on them. I’m 100% interested in giving them a test soon! Thanks for the suggestions!
Just a couple of things to add:
Elementor doesn’t convert pages back to plain content, but rather stores both the content portion in the standard WP DB table, and it’s Elementor version of layout with content as JSON in it’s own DB table (optimised), and when you switch the editor off, it just tells WP to refer to the standard WP posts table in the DB as though the content was entered in TinyMCE. Switching Elementor back on just points WP back to the custom DB table 🙂
Divi also has their whole front end editor interface as well, which wasn’t mentioned. This is an aspect which many Divi fans love.
Cheers from Australia!
Hi Grant – many thanks for that useful info on Elementor. It seems to handle this side well.
Good point on Divi too. You’re right, I hadn’t tested that, but can appreciate that’s a handy feature for many people. Thanks for pointing this out!
Cheers!
Don’t forget Thrive Themes new builder, Thrive Architect. It may be the best out of all of these, besides possibly Elementor. In my opinion, these are the two to watch, you might also throw the new Beaver Builder 2 into the mix with it’s powerful theming options when paired with Beaver Themer.
“What I didn’t like, however, was my text had to be edited in the tiny sidebar, which I found quite restrictive. If I had been writing a lot of content, this could be annoying!”
Simple solution – drag the sidebar to the right and the text editing window expands 😉
Cheers Alan! To be honest I didn’t realise that originally, but just tried it. It still feels a bit small, but it’s better…! 🙂
I have to ask why you are using a very old version of Divi in this test?
The current version is 3.0.77 and a lot has happened to Divi since version 2 – speed being one them.
Hi Stef – I’ve tested Divi Builder, not the Divi Theme, which you’re referring to with that version number (the Divi Theme is in the v3.x series, whilst the Divi Builder is still in the v2.x series). Admittedly I had to run the test with Divi Builder released in June 2017 (as noted in the article), but looks like they’re pushing out lots of releases, so it’s already up to v2.0.38 now!
Ahh, I did not read that properly. Sorry about that.
Btw. is now 2.0.39 – that’s how fast they moving 😉
Mike great review thanks,
Would love to see Cornerstone (https://theme.co/cornerstone/) in this comparison
Hello Mike
Thanks for this. It was great to meet you at the London Meetup pictured here.
I was the Beaver Builder fan boy chatting to you and Doug before the event.
Hi David – hopefully see you at a WPLDN event again soon! 🙂
Great, detailed post. I use divi. I can tell that a builder slows down the site but it’s just mean that you’d have to do find other ways to optimize the speed.
Well done!
Would love if you could add thrive themes please!
This is a pretty lightweight test you’ve done. Firstly, Visual Composer IS a hog once you add more columns, rows etc and add WooCommerce modules through it.
Secondly, you’re only testing front-end page load. TTFB matters more in real life.
Lastly – you missed out, in my opinion, the best page builder of them all – Themify Builder – I think it’s the best because it has full version control, real drag and drop, practically zero bugs and scales with ease to 100,000+ posts.
I don’t work for them or anything – I just use their builder and the Ultra theme.
Anyway – my focus is on TTFB and scalability and you’ve skipped that in this test which is a shame.
Hi Dave
Yep – this was meant to be a simple test, so my main purpose of looking at page weights was to see what’s loaded on an activated page by default (e.g. Fusion Builder seems to load everything, whilst others load selectively what they need). Adding more elements could make it harder to do a fair like-for-like comparison (e.g. not all page builders offer the same elements, or a clickable button in one page builder may be more advanced/stylish than a basic button on another), so that’s why a simple two-column layout was chosen for this test.
100% agree with you Time To First Byte is really important and I did consider measuring TTFB and overall loading speeds. Though as my preference is always to use a server-side cache to pre-generate pages, that’s going to minimise any TTFB performance issues between the different plugins. I have no doubt running a TTFB test on each page builder, on a budget web host server, without any server-side cache, would show up some interesting results!
Thanks for the suggestion of Themify Builder too – cheers!
You’re missing the point a bit here, to be honest.
To test the speed of the builders, you need to create a page that is worthwhile. No builder is designed to make basic 2 column pages.
So, comparing say Divi to Site Origin in this way makes no sense. Divi (as with Bootstrap, for example), is adding the basic CSS and JS files that most people would want if using a builder. Site Origin is not. But what about when that front end fanciness is needed? That is what these buiders are for. Anyone using any builder with WordPress for the type of page you have is going about it in the wrong way. WordPress is enough for that (with the default templates), and always has been.
So in other words, adding builders when they are not needed and should not be used does not make a good test. I think you’d find, with a test page worthy of page builders, you’d have quite different results.