On a daily basis as a WordPress developer I run into a number of page builders. Being a freelancer developer, I tend to work with a lot of different WordPress setups. I do have a preferred way of building things, but often have to adapt to fit the client brief. One client frustration that occurs when carrying out WordPress performance optimisation is that I’m sometimes limited to what I can achieve due to the presence of a page builder.
As a result, I thought I’d run a quick experiment to find out which is the fastest WordPress page builder. Here I take a look at some of the most popular page builders out there, and compare them in the key element – speed.
Why Site Speed is Important
Speed is a crucial element to your website. It can make your site rank higher in Google, help reduce your website’s carbon footprint, and gives your users a more pleasant website experience. However, everything you add to your website can have an affect on its site speed. Obviously, the more elements and customisation you add, the slower it may become.
My speed optimisation processes address a number of crucial points, but over time there comes a limit as to what I can do to improve the site speed. Instead, I make suggestions as to where we can improve it; and it’s up to the client if they wish to pursue it. If your site design and functionality requires a large number of elements, and they are all absolutely necessary, then there will be a limit as to how much improvement can be made.
What are WordPress Page Builders?
Page builders are a range of popular plugins that provide a platform on which to build ‘out of the box’ and custom styled websites.
Traditionally more popular pre-WordPress 5.0 – which saw the release of the Gutenberg block editor with WordPress – page builders allowed users to build their own pages or posts, often with a lot more rich elements than the classic WordPress editor. The classic WordPress editor was quite static, so this allowed users to move elements around a page or a post relatively easily. However, at times they can be difficult to use, and some developers don’t tend to like them as they are not particularly intuitive.
These classic editors were and still are important to some developers, as many of us have used them in our businesses to build our own themes and websites for clients.
They tended to work by generating a page using HTML, or using shortcodes to produce. This will be important when I get to the analysis 🙂.
About the WordPress Page Builder Speed Experiment
For the fastest WordPress page builder experiment, I wanted to test each page builder on its merits. These are the page builders I am testing for this article.
- WordPress’ default block editor, commonly referred to as Gutenberg – this was as per WordPress 6.3.1
- Elementor – version 3.15.3
- Beaver Builder (Lite) – version 2.7.2
- Visual Composer – version 45.5.0
Pages to Test
We are going to be creating the following pages on every page builder listed above. My reasoning behind it is for ease of use. The text (from Dad Joke Ipsum), pictures (from Pooch Holders) and video (this one) will be the same.
The pages I’ll create are the following:-
- 3 paragraphs vertically
- 3 column layout, with one image and 3 paragraphs in them.
- A page with a YouTube video.
- A page with a form (with Gravity Forms), with reCAPTCHA v2 Invisible enabled.
- Full Page Cover element with a background image and a title.
My reason for using these page layouts is that they contain elements which are common to most website pages,, and use a few external HTTP requests (loading YouTube and reCAPTCHA scripts), one of which is controlled by the plugin I’m testing.
The hope is by analysing and comparing these pages in minute detail, we can extrapolate how those simple elements could affect page speed on larger, more complex pages
Every page will be tested for a number of speed factors 5 times using PageSpeed Insights, and an average will be taken of those 5 times.
WordPress Page Builder Speed Experiment – Control Elements
To try and keep this test as standardised as possible, I decided to do the following:-
- The theme is empty. It’s as bare bones as you can get but still be a theme. The vast majority of the JavaScript and CSS will be added by the plugin and will need to be put in by the page builder.
- The website will be hosted on Siteground, with all caching disabled.
- The WordPress installation will be multisite, as this will allow me to control which plugins are installed on each page.
- The only plugins that are activated on the sites are Gravity Forms, the page builder and one other plugin described below.
The problem with Gutenberg as a page builder is that it can load Gutenberg’s styles as well as the page builder; ideally I’d like to stop these files from loading. I found some blog posts that detail how to do it.
For complete transparency, Elementor was not able to run without the Gutenberg styles and scripts. As it would have left a broken site, I’ve included the Gutenberg styles and scripts in these pages.
Analysis of Page Builder Speed Test Results
To begin with I’m going to show the results of each page builder, before highlighting interesting elements between them. I’ve also highlighted in bold the page(s) that perform the best across all page speeds.
To save space, I’ve used some acronyms for various elements. Here are what they mean:-
- FCP – First Contentful Paint is the time between when the first byte of the website is transferred to when the first element of the page is displayed. Measured in seconds, we want this to be low as a high FCP implies a lot of code is loaded before the first element is displayed.
- LCP – Largest Content Paint is the time between when the first byte of the website is transferred to when the largest element of the page is displayed. Again, measured in seconds, we want this to be as low as possible. This can be the same as FCP but not always.
- TBT – Total Blocking Time is the time between the First Contentful Paint (FCP) and the time the website can be used and interacted with. Usually this is 0 and often measured in milliseconds, however if you have complex items outside of content, it can lead to a delay in how you can interact with the site.
- CLS – Cumulative Layout Shift is the amount the layout moves when you load the site. This is caused by things being loaded at different times to the rest of the site. You need this number to be as low as possible.
- DOM Size – DOM (Document Object Model) is the number of HTML elements that are present on the page. So a paragraph should be 1 element. For more complex designs, it can be a lot more. The smaller DOM size the better as it’ll take browsers time to render large, complex DOMs.
- PageSpeed Score – Google’s PageSpeed score is an arbitrary score on how it views the website out of 100. It works by seeing how many of its audits a page passes, and assigns a score to it before scoring it out of 100. It’s a score created by Google so I don’t put a huge focus on it but it’s good to see a snapshot of where your page is.
WordPress’ Default Block Editor Speed Test Results
The first page builder we tested was WordPress’ default block editor. This scored pretty well in most tests, with only really issues with forms and YouTube layouts.
| Page | FCP (s) | LCP (s) | TBT (ms) | CLS | DOM Size | PageSpeed Score |
|---|---|---|---|---|---|---|
| 3 Paragraphs | 0.94 | 0.94 | 0 | 0 | 4 | 100 |
| 3 Columns with Images | 1 | 1.32 | 0 | 0 | 24 | 100 |
| YouTube Page | 3.44 | 3.76 | 1,664 | 0 | 4 | 55 |
| Form Page | 3.88 | 4.02 | 436 | 0.012 | 24 | 66 |
| Cover Page | 0.94 | 1.7 | 0 | 0 | 6 | 100 |
YouTube in particular was a struggle, as the default block was the slowest I tested over all page builders. However, the results are slightly skewed as one load was particularly slow (about 7 seconds to FCP in total).
Apart from that, the block editor did impressively well. It was particularly strong with a small DOM size, even with the more complex layouts such as the column layout. This leads to it being particularly quick for pages that don’t load any extra CSS and JavaScript.
Elementor Speed Test Results
Elementor is one of the more popular page builders, but installing it has caused a notable drop in performance in WordPress, particularly for simple pages.
| Page | FCP (s) | LCP (s) | TBT (ms) | CLS | DOM Size | PageSpeed Score |
|---|---|---|---|---|---|---|
| 3 Paragraphs | 1.7 | 1.74 | 0 | 0 | 4 | 98 |
| 3 Columns with Images | 2.54 | 2.66 | 0 | 0.002 | 59 | 93 |
| YouTube Page | 2.3 | 2.36 | 1,536 | 0 | 20 | 62 |
| Form Page | 2.78 | 3.06 | 618 | 0.005 | 64 | 73 |
| Cover Page | 2.4 | 2.98 | 0 | 0.004 | 10 | 92 |
There were two reasons for these page speed issues. Firstly, most pages loaded an extra 5 or 6 CSS files, and an extra JavaScript file. Secondly, there’s a huge increase in DOM elements, with a column layout being about 2 and a half times bigger than WordPress’ default page editor. This leads to between a second and a second-and-a-half in load times across the board.
Interestingly though, Elementor seems to perform better withYouTube and the Gravity Form. My guess is that the YouTube block uses optimisation tricks which the default block does not. There is no Gravity Forms block for Elementor, so I’m wondering if the plugin optimises how it displays shortcodes too.
Beaver Builder (Lite) Speed Test Results
Beaver Builder is another popular page builder, and scores pretty well.
| Page | FCP (s) | LCP (s) | TBT (ms) | CLS | DOM Size | PageSpeed Score |
|---|---|---|---|---|---|---|
| 3 Paragraphs | 1.46 | 1.46 | 0 | 0 | 28 | 100 |
| 3 Columns with Images | 1.48 | 1.76 | 0 | 0 | 57 | 99 |
| YouTube Page | 1.66 | 1.66 | 1,602 | 0 | 12 | 65 |
| Form Page | 2.48 | 2.52 | 766 | 0.003 | 73 | 75 |
| Cover Page | 1.44 | 2.08 | 0 | 0 | 12 | 99 |
Beaver Builder tends to output in pure HTML, similar to the default editor. Elementor puts data into the postmeta table, and visual composer uses a hybrid shortcode/postmeta approach.
This does have some positives – only one extra CSS file is loaded by Beaver Builder and it shows. The one issue is that the DOM size is remarkably big. For example, it’s 7 times bigger to display 3 paragraphs than the default WordPress editor. This is because the paragraph element is wrapped in 10 DIV elements.
Even on smaller pages, it has an impact, as it adds about half a second page of load time per page load.
On the positive side of things, like Elementor, it seems to be able to handle shortcodes better than WordPress’ default editor and also its own block handles YouTube videos than the default editor. In fact, it loaded these elements the quickest of all editors.
Visual Composer Speed Test Results
Visual Composer is another popular page builder, and is the predecessor to the popular WPBakery page builder.
| Page | FCP (s) | LCP (s) | TBT (ms) | CLS | DOM Size | PageSpeed Score |
|---|---|---|---|---|---|---|
| 3 Paragraphs | 2 | 2 | 0 | 0 | 14 | 98 |
| 3 Columns with Images | 1.76 | 1.98 | 2 | 0 | 64 | 98 |
| YouTube Page | 2.3 | 2.34 | 1,676 | 0 | 13 | 65 |
| Form Page | 4.38 | 4.52 | 310 | 0.009 | 74 | 61 |
| Cover Page | 2.14 | 2.14 | 0 | 0 | 19 | 97 |
The bane of any WordPress performance improvement work, Visual Composer scores oddly in our test.
It struggles with the paragraph pages, seemingly taking a second or two to load, but breezes through column layouts quite easily. In fact this was the only test that loaded the paragraph pages slowly. It wasn’t any sort of anomaly, but rather consistently in the 2 second mark. This is a second slower than the fastest time. Like others, it struggled with loading a couple of extra CSS files, and having a larger DOM size than the fastest elements. It also struggled with form elements, with the extra JavaScript & CSS files loading causing the page to be around half a second slower than the next slowest competitor.
It just doesn’t do anything particularly well, not taking many top spots in our tests, and usually takes the bottom spot in others.
What is the fastest WordPress page builder?
To come up with some sort of rudimentary scoring system, we’ll compare each element and see which is the best throughout, and also compare the worst.
To save space I’ve used acronyms:-
- WP – WordPress’ default block editor
- E – Elementor
- BB – Beaver Builder
- VC – Visual Composer
The fastest WordPress page builder in each category
| Page | Fastest FCP | Fastest LCP | Lowest TBT | Least CLS | Smallest DOM Size | Best PageSpeed Score |
|---|---|---|---|---|---|---|
| 3 Paragraphs | WP (0.94s) | WP (0.94s) | 4 Way Tie | 4 Way Tie | E & WP (4) | BB & WP (100) |
| 3 Columns with Images | WP (1s) | WP (1.32s) | WP, BB & E (0ms) | WP, BB & VC (0) | WP (24) | WP (100) |
| YouTube Page | BB (1.66s) | BB (1.66s) | E (1,536ms) | 4 Way Tie | WP (4) | VC & BB (65) |
| Form Page | BB (2.78s) | BB (2.52s) | VC (310ms) | BB (0.003) | WP (24) | BB (75) |
| Cover Page | WP (0.94s) | WP (1.7s) | 4 Way Tie | WP, BB & VC (0) | WP (6) | WP (100) |
After this, we get the following scores:-
- WordPress’ default block editor is fastest or joint fastest in 17 categories.
- Beaver Builder is the fastest or joint fastest in 11 categories.
- Visual Composer is the fastest or joint fastest in 4 categories.
- Elementor is the fastest or joint fastest in 3 categories.
In my test, the fastest WordPress page builder overall is WordPress’ default block editor.
Unsurprisingly, the WordPress default block editor takes the win in a number of categories, scoring the best in 17 categories. It was nearly a clean sweep in the Smallest DOM size (only being joined by Elementor in one category), which gave its success in a lot of pages that didn’t have a lot of complex elements.
It did struggle however with videos and forms, as every other page builder seemed to load it quicker. Is Beaver Builder slow? Beaver Builder was probably the strongest though across the board outside of the default editor as it was pretty quick.
Elementor and Visual Composer pretty much tied throughout with similar speeds.
What is the slowest WordPress page builder?
| Page | Slowest FCP | Slowest LCP | Highest TBT | Most CLS | Largest DOM Size | Worst PageSpeed Score |
|---|---|---|---|---|---|---|
| 3 Paragraphs | VC (2s) | VC (2s) | 4 Way Tie | 4 Way Tie | BB (28) | VC (98) |
| 3 Columns with Images | E (2.54s) | E (2.66s) | VC (2ms) | E (0.002) | VC (64) | E (93) |
| YouTube Page | WP (3.44s) | WP (3.76s) | VC (1,676ms) | 4 Way Tie | E (20) | WP (55) |
| Form Page | VC (4.38s) | VC (4.52s) | BB (766ms) | WP (0.012) | VC (73) | VC (65) |
| Cover Page | E (2.54s) | E (2.66s) | 4 Way Tie | E (0.004) | VC (19) | E (92) |
After this, we get the following scores:-
- Visual Composer is the slowest or joint slowest in 11 categories.
- Elementor is the slowest or joint slowest in 9 categories.
- WordPress’ default block editor is the slowest in 4 categories.
- Beaver Builder is the slowest or joint slowest in 2 categories.
In my test, the slowest WordPress page builder overall is Visual Composer.
This test threw up two surprises.
The first is the performance of Beaver Builder. WordPress’ default editor did seem to struggle with YouTube and form pages, which Beaver Builder handled particularly well. This is certainly something to look at from a WordPress perspective as although Gravity Forms uses a custom block, YouTube’s block is standard.
The second is how badly Elementor did. Does Elementor slow down your site? Yes. It was second slowest after Visual Composer, and struggled in other areas.
Conclusion
So, coming to the final question. With new projects, and wherever else possible, I will build pages in WordPress’ default block editor going forward. However, WP Bakery, Elementor and Beaver Builder are all notable page builders which I still use for clients where they are the best fit.
Beaver Builder Speed Performance Notes
Although Beaver Builder is good, surprisingly good in fact, the amount of DOM elements in some blocks is quite high that would affect page speed. Don’t get me wrong, I was surprised at how strongly Beaver Builder performed, particularly for certain types of blocks.
However, in practical terms, it’s a heck of a lot easier to optimise a website by properly setting up Gravity Forms or using a tool like WP Rocket to improve the JavaScript load times, than remove DOM elements from a page. If you were to combine all the above onto one page, then a page built with Beaver Builder is likely to have about 80 more DOM elements than a page built with the default WordPress block editor.
WordPress Block Editor Speed Performance Notes
Surprisingly, WordPress out of the box did not handle YouTube pages particularly well. Again, it may have been just a one off test dropping the average down a bit, but it wasn’t particularly great. It also struggled with forms.
Elementor and Visual Composer Speed Performance Notes
Finally, if you’re using Elementor or Visual Composer as your page builder, then your site is quite slow and unoptimised out of the box.
By disabling WordPress elements plugin I did have issues with Elementor, particularly with the video element (it chose not to display it), so I believe it does something to speed it up. As a result, I re-enabled it for that page.
From my test, Visual Composer did beat Gutenberg when it comes to Accessibility. The issue was my poorly coded theme not having a Title tag 🙂, however it’s good that these plugins protect the users from bad theme design.
Elementor does have a number of options that allow you to reduce the number of DOM elements on the page. However they do require testing and are default switched off.
Improve your WordPress website page speed
There’s a limit to what WordPress pagespeed optimisers can do, but we can do something. Have a look at my WordPress optimisation page to see if we can work together – my contact form is here.
Links marked with [aff] are affiliate links