WordPress ·

The Best WordPress Visual Page Builders

The Best WordPress Visual Page Builders
Comparison of the best WordPress visual page builders

In WordPress, a visual page builder allows you to structure content in a comfortable and straightforward way. But if you want to use one of these tools, it is normal to have many questions.

Which builder is best? Is there a downside to using them? How do they impact Google rankings? Do these builders slow down your site?

Introduction to visual page builders in WordPress

I still remember those years when web creation was an unknown science limited to a small group of people who typed "strange things" into their computers.

With the birth of certain CMS platforms like WordPress came a new era that allowed website creation without advanced technical knowledge.

But it did not stop there. With the rapid growth of WordPress, a series of plugins began to emerge that made web creation surprisingly easy.

What exactly is a visual page builder in WordPress?

A visual page builder is an application that allows you to create a website in a very visual and simple way using techniques such as drag and drop, live editing, and content blocks like text, images, galleries, forms, maps, CTAs, and much more.

When talking about visual page builders we cannot avoid mentioning Gutenberg, WordPress's native website builder. It is essentially used for the same purpose as a visual page builder. Yet despite this, the creators of WordPress (and Gutenberg) themselves do not really classify it as a page builder.

Gutenberg WordPress block editor

What is Gutenberg or the block editor?

According to its creators, Gutenberg is a "block editor" and has several differences from a visual page builder, such as the lack of drag and drop functionality, no live editing, and a number of characteristics that make this editor a tool for more advanced users, or at least those who understand HTML block structure on a web page.

Setting aside that definition, based on my experience and point of view, the best and fastest visual page builder is, without a doubt, Gutenberg, and I explain why in this article about why Gutenberg is the best visual editor for WordPress.

But sticking to the definition of what a visual page builder is, I have no choice but to continue this article from a different angle.

The best WordPress visual page builders

First of all, I want to point out that a comparison of the best page builders does not imply that one builder is better than another for all websites, since every website is unique and each has completely different functions and requirements.

We also need to ask ourselves what we mean by "the best visual page builder", since if what we want is ease of use, that is one thing; a wide variety of features is another; and speed is yet another.

In addition, visual page builders do not always render perfectly on 100% of devices because they cannot account for all possible web scenarios.

Since most people want a fast website with simple creation, I have based this on data from a very thorough WordPress load speed study conducted by jackcao.com, in which the testing process was carried out as follows.

Testing process

Each builder was tested 10 times over a 12-hour period using 3 testing tools:

  1. Google Page Speed Insights
  2. Pingdom Tool
  3. GT Metrix

Test conditions

  • Each visual page builder was installed on a separate domain
  • All domains were hosted on the same server
  • No caching plugins were used
  • The same web structure and elements were used
  • The recommended WordPress theme for each builder was used, or GeneratePress where no recommendation was provided

It seems Jack is as fond of GeneratePress as I am. He also has another article in which he demonstrates that GeneratePress is the fastest theme, at least as of the time of writing.

Test results

BUILDERGT MetrixPingdom ToolsGoogle Page Speed Insights
mskbsQueries0/100kbsmsQueries0/100FCPSpeedLCPTTITBTCLS
1Live Canvas917196208922542623951.12.42.41.31603
2Nimble Builder1044228208625862722932.15.72.12.100
3Bricks Builder1230580288762047830922.34.32.42.6360
4Oxygen Builder1140307448432560545912.54.02.62.6550
5Wp Bakery863349228538958230852.34.53.42.6410.08
6Zion Builder1043268248530645033852.15.13.62.2270
7Beaver Builder977472397955364251853.04.93.03.2380
8Themify1680341398139062154841.93.34.22.8280
9Seedprod1280307458232261647831.93.14.51.91816
10UX Builder959389268444749634743.05.94.33.31342
11Elementor1032469388155460346763.44.93.84.22184
12Divi1291604368168073450723.55.34.04.72180
13Thrive Architect920509338260669041674.25.94.34.6750
Speed test results for WordPress visual page builders

What do all these numbers mean? I just want to know which is the best WordPress visual page builder

I imagine you may have been surprised to find the most well-known builders ranked 5th, 11th, or 12th — you are not alone.

Analyzing the data, we can see that the number of queries, Kbs, LCP, and TTI all increase as we move further down the list.

Queries:

Requests made to load the elements that make up the website. They can be internal (graphic elements, database data, fonts, etc.) or external (JavaScript files, CSS, fonts, images, etc.).

Kbs:

The weight of the website in Kilobytes.

LCP:

Largest Contentful Paint — one of the famous Web Vitals metrics. Essentially, it measures how long the last major element takes to load.

TTI:

Time To Interactive — the time it takes before the user can interact with the website.

From what I could see on the Livecanvas page, the supposed winner of our comparison, it markets itself as a builder that only loads HTML and CSS. What does that mean? Basically, it does not load JavaScript, which is excellent for speed, but if you want to create a dynamic website with elements like a sophisticated Slider, that will be a challenge. Another point to consider is the number of CSS files loaded — if Livecanvas is built on Bootstrap 5, it could mean it only loads a single external file with the rest of the CSS code inlined within the HTML in the class attribute.

Before the final verdict I wanted to run some tests myself. Since the most well-known builders on this list are WP Bakery, Elementor, and Divi — and they are in rather different positions — I am going to run a series of tests on the one in the middle, at position 11: Elementor.

External file load tests for visual page builders

As I mentioned earlier, the loading of external files is a determining factor in terms of speed. So I performed a clean WordPress installation locally and "stripped it down" to prevent it from loading any external files.

I then installed and tested the following visual page builders: Livecanvas, Nimble Builder, and Elementor. All separately and with only that single plugin installed.

External file load test for WordPress visual page builders

External file load test for the Livecanvas builder

I contacted their support to see if they could provide a limited trial version for testing. In a very friendly manner they told me that they do not offer that option, so I had to purchase the paid version, which has a 30-day full refund policy.

To use Livecanvas they recommend the Picostrap theme and, if not, they require a theme based on Bootstrap. For those who may not know, Bootstrap is a CSS framework that applies styles inline in HTML via the class attribute.

After installing Picostrap and Livecanvas, I can see that only one file is loaded as a CDN for Bootstrap, which makes sense:

  • bootstrap.bundle.min.js

After tinkering with the builder for a while, I was surprised to find that it does not offer the same editing freedom as builders like Divi or Elementor — you have to adapt to the templates created for each section.
The templates are very attractive and serve their purpose well. It also does not load any additional files when creating a page with multiple sections. This last point would explain Livecanvas's speed advantage.

External file load test for the WordPress builder Nimble Builder

After installing Nimble Builder, no external files are loaded initially. However, after placing a title, a separator, an icon, a gallery, a map, and an image on a page, the following files were loaded:

CSS

  • nb-swiper
  • sek-base-light
  • fontawesome-all-min

On the usability side, this plugin is somewhat lacking. I think making the most of it would require some prior knowledge of how a page works and the WordPress Customizer. That said, the idea of leveraging the Customizer is quite original.

External file load test for the WordPress visual page builder, Elementor

Just by installing Elementor I could see it loads the following files on a page:

CSS:

  • elementor-icons
  • elementor-frontend
  • elementor-post-6
  • elementor-global
  • google-fonts-1

JS:

  • elementor-7

After placing a title, a separator, an icon, a gallery, a map, and an image, the following additional files were loaded:

CSS:

  • elementor-icons-fa-solid
  • elementor-post-7

JS:

  • elementor/assests/js/frontend.min.js
  • elementor/assets/lib/waypoints/waypoints.min.js
  • elementor/assets/js/frontend-modules.min.js
  • elementor/assets/js/webpack.runtime.min.js

The load speed of these files also depends on the server being used, but even so, from a web developer's perspective, I think loading that many files is excessive. As a very rough estimate, loading a single JS or CSS file can take anywhere from milliseconds to nearly 1 second, depending on the server speed and the file weight.

The best WordPress Visual Page Builder

Which is the best WordPress visual page builder

Taking the test values into account, I am going to say that the best WordPress visual page builder is Livecanvas.
As I have mentioned earlier, this conclusion is relative, for many reasons. For this selection I focused on finding a visual page builder that meets the needs of a person without advanced web development knowledge who also values speed over ease of use, price, feature variety, or dynamic content.

If the case were for an experienced developer I would undoubtedly say Gutenberg is the best (even though it is not classified as a page builder). If I focused on ease of use, dynamic capabilities, and greater design freedom I might choose between Divi or Elementor, etc.

To learn more about customizing your WordPress theme, we recommend reading our article about where to find the functions.php file in WordPress and how to edit it safely.

Article summary in 3 minutes

Keep reading

Professional Website Maintenance: How Much Does Skipping It Cost You?

Fast Emails by Configuring SMTP in WordPress

How to Translate Your WordPress Plugin (or Theme)

Comments

Be the first to comment on this post.

Leave a comment

Your email won't be public. Comments are moderated before being published.