WordPress Page Builders PageSpeed comparison

How We beat the Bloat


WordPress Page builders do not have a great reputation for generating fast webpages that achieve the lowest load times.

In this experiment we’ll try to figure out whether this is still a myth or not - and see how our product stacks against "industry standard" page builders in terms of performance.

We have chosen two example layouts, and replicated them with each page builder, keeping default settings as much as possible.
Then using the Google PageSpeed Insights tool, we have compared the Mobile speed results.

LiveCanvas Builder
Oxygen Builder
Beaver Builder
Divi Theme
Kemal Esensoy

"I thought oxygen builder would be the best choice to swap with custom theme development. Man I was wrong! The work you guys put in the product worth much more than that lifetime license price"

Kemal Esensoy
Web Designer @ Wunderland.Media, Germany. 

Google mobile PageSpeed comparison chart

LiveCanvas vs Oxygen Builder vs Beaver Builder vs Elementor vs Divi

Template 1 # Template 2 #
LiveCanvas 98View Template 95View Template
Oxygen Builder 94View Template 89View Template
Beaver Builder 88View Template 63View Template
Elementor 87View Template 56View Template
Divi 78View Template 56View Template
mobile testing

How we performed the tests

The sample templates and the tools

Template #1: just a page scaffold

A simple page divided in 2 columns, filled with:

  • a heading (in the first column)
  • a paragraph and a CTA button

This very elementary template is thought for highlighting how builders behave when delivering a page that has very few elements, to see which is the added weight on a nearly empty situation.

Template #2: a simple landing page

A more complex example, featuring

  • a hero section
  • a slider
  • a number of sections showing some text and an illustration
  • a section with six features with icons
  • a final Call to Action with some text and a button on a background image.

This template is an example of a richer web page, that could be the typical "company" homepage.

Used Themes and environment

With each builder, we used the recommended starter theme (e.g. "Hello Elementor" ) to make the test more fair and to give everyone the same opportunities to win.

All the test webpages are on the same hosting platform, as we placed them in the same single WordPress Multisite installation, and no unnecessary plugin has been activated on each subsite.

Where we could, we have disabled all widgets or footers.

Finally we've measured the speed of each test page with the Google PageSpeed tool.

Notes and issues encountered during the test:

1) Beaver Builder Logo carousel

For the "Template #2" page test on Beaver Builder, it was not possible to build a logo carousel totally similar to our original concept.

Obviously, it is possible to do this, purchasing and using an additional plugin - but that could have mislead the result of this test.

Since it wasn't our intention to disadvantage this builder compared to the others by weighing it down with an additional plugin, we considered it appropriate to create a similar carousel, but with only one logo.

2) Beaver Builder plugin and Divi theme - filesize issue

While uploading the Beaver Builder plugin and the DIVI theme builder on our WordPress environment we've encountered the following problem:

the upload file exceeds the upload_max_filesize directive in php.ini

This error occurs on your WordPress installation when you try to upload a file that exceeds the limitations set by your webserver.

While this is not a big problem per se, and it's easy to change your server settings to handle larger uploads, it brought us another topic we wanted to check out: the brute file size of these tools.

livecanvas review

"Before I worked with LiveCanvas, I tried various Page Builders. There were also some good ones, but I thought they were always a bit inflexible and a bit overloaded... "

André Wunsch
Talented Web Designer, Berlin.

File size comparison

Page builder plugins & starter themes .zip archive sizes

Plugin File size Theme File size
LiveCanvas 1.5MB 365 KB
Oxygen Builder 2,8 MB* --
Beaver Builder 7,6 MB 1,1 MB
Elementor Pro 7,6 MB* 393 KB
Divi (theme) none 10,1 MB*


* Oxygen Builder
does not offer any starter theme. So for this test we've just installed a bundled 2020 WordPress theme (but it's bypassed by the builder)

* Elementor PRO requires the Elementor Free plugin, 2MB + 5,6MB

* The Divi theme contains itself the plugin.


The plugin and theme used for this test

Plugins Themes
LiveCanvas 1.8.0 PicoStrap 1.0

Oxygen Builder 3.2 Twenty Twenty Version 1.5

Beaver Builder Plugin (Pro Version) Version Beaver Builder Theme Version 1.7.7

Elementor Pro Version 3.0.5 Hello Elementor Version 2.3.0

Divi (theme) Divi Version 4.6.6
LiveCanvas Winner of WordPress Pagebuilder challenge

Why LiveCanvas natively beats common WordPress builders?

A minimalist approach to keep bloat at minimum

LiveCanvas is a minimalist tool to build webpages. It focuses on the power of simple HTML and open standards.

Coupled with the Picostrap starter Theme, it helps you build an efficient "pipeline" for your SASS / CSS, and in general delivers a lean and efficient foundation to minimize bloat and overcome WordPress' typical bad reputation between developers.

The LiveCanvas plugin, contrary to what happens with other builders, does not save into the database some kind of (json array-like) representations of your page, but plain, standard HTML code.

This means that SERVING the page is trivial, from the PHP / DB / server point of view.

On another side, the LiveCanvas plugin itself does not add any extra javascript or CSS to the site: it expects from the Theme to provide the BootStrap CSS and javascript.

So all the discussion comes to having a really lightweight Theme.

The PicoStrap Theme: delivering the best Bootstrap experience, fully bloat-free

The whole idea behind our project is to leverage Bootstrap at it's best, to maximize the usefulness of this CSS framework in your specific project. And to get more people to enjoy the power of SASS, which is absolutely necessary to fully use Bootstrap, even if they're not command line experts.

We are actually at the third iteration of our theme, and it's faster and leaner than ever!

The PicoStrap Theme strips away all the unnecessary elements that WordPress adds to the <head> of the page, to shave off useless requests, and save some precious milliseconds of page load. Emojis, Gutenberg additional CSS...

All bloat is removed, to make your site's HTML look like the super-succinct original Bootstrap starter HTML template (this one).

On another side, PicoStrap allows you to generate your own Bootstrap CSS easily: using the WordPress Customizer, you can totally control site typography, colors, spacings, to match your brand.

Hit "Publish" and it the Theme will recompile the Bootstrap SCSS code "on the fly".

So your site's visual tweaks are not implemented adding tons of inline CSS code, as in most WordPress Themes, but are "baked" into your personalized Bootstrap build.

Technically, the Theme has a built in SCSS compiler (leafo's scssphp) who lets you write sassy CSS and automatically recompile, combining your assets into a single minified CSS file. All is done on the server, no need for command line tools. Easy and automatic.

Watch this video to see how this happens in practice.

It's updated to Bootstrap 5.5.2 - so you have the very latest stable Bootstrap; compared to our former theme, CustomStrap, it drops icon fonts and jQuery, and uses by default a more lightweight version of the Boostrap javascripts (BootstrapNative).

It's thought from the grounds up to make your site fast, with no fuss.

Now if you're a bit technical and you want to add your own CSS or SCSS code, you'll appreciate the built-in compiler, plus another special feature of picostrap: SASS Livereload functionality is built in.

This means that when you edit and save a CSS / SCSS file in the child theme's /sass folder, if you're logged as administrator, the page will automatically reload and pick up the changes.

Watch this video to see how this happens and how to add your own additional styling code. 

Picostrap is barebones and easy to extend - and it's a powerful tool that allows maximum freedom to the developers and designers. A starter child theme is available too.

I will no longer say that "it is impossible to get a 90+ rating on Google Page Speed insights."

Jack Cao

Blogger | Copywriter | YouTuber

Site performance rocks using LiveCanvas

Deliver more efficiently your message to your audience via high performance web pages