Black Friday Deal - 50% OFF on all plans

WordPress Page Builders PageSpeed comparison


How We beat the Bloat

Preface

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
Elementor

"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 78View 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.

"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*

Notes:


* 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.

Versions

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 2.4.0.6 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, combined with a powerful CSS framework like Bootstrap.

Together with our starter Themes, it helps you build an efficient "pipeline" for your CSS, and in general delivers a lean and efficient foundation to minimize bloat and change WordPress' typical bad reputation. 

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 HTML code.

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

Focusing specifically on added bloat, 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 and of a powerful CSS framework, 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) - well actually, even better, as it drops jQuery too.

On another side, PicoStrap allows you to brew your own Bootstrap CSS easily: using the WordPress Customizer, you can totally control site typography, colors, spacings. Hit "Publish" and it 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.

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.

It's updated to Bootstrap 4.5.3 - 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.

A new SASS Livereload functionality has been added. This means that when you edit and save a file in the child theme's /sass folder, if you're logged as administrator, the page will automatically reload and pick up the changes.

No command line tool is required. It's all php and classic browser javascript 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.

 

Your site deserves top speed.

Discover LiveCanvas