November 4, 2020 - Updated December 5, 2022
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.
"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
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 |
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
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 |
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 | YouTuberSite performance rocks using LiveCanvas
Deliver more efficiently your message to your audience via high performance web pages