page builder reality check

I saw a comment where someone said that Gutenberg doesn’t yet have all of the widgets and features that Elementor has. They were going to wait to switch to Gutenberg until those were available. That got me thinking.

The most efficient page will just be plain text and after that a page built using semantic HTML. As you add CSS, JavaScript, fonts, icon libraries and images the page size will continue to grow. Everything you add above plain text has a cost. There are plenty of good reasons to go beyond plain text.

Every website and web page has a purpose. You are trying to communicate something or perform an action. Good layout and style, good use of fonts, icons, images and animations can help to accomplish the purpose. If it does its job well it is “good.” If it is over engineered in relation to its purpose or if it uses more resources than necessary it has bloat. There are several ways to create inefficient pages.

Divi and Elementor used verbose HTML to support advanced styling options and animations, sometimes called “Diviception.” Lets be clear, it wasn’t that some elements on the page had extra Divs. The issue is that several layers of extra Divs was the norm across the board.

valentine divs

Divi, Elementor, and other page builders also had the practice of loading large base files on every page whether or not the file content was used. Further, there was the tendency to load large CSS, JavaScript, font, and icon libraries. Often these were enqueued on pages where they were not used. Third party addons followed the page builder’s example and also used verbose HTML and loaded large number of assets on the page. This comparison chart from Supa Mike shows that Divi and Thrive Architect haven’t gotten the memo yet that loading huge base files is not best practice.

page builder bloat comparison
Supa Mike – Page Builder Comparison January 2022

Straight sematic HTML with JavaScript and CSS assets loaded only as needed will always outperform big bulky page builders. This is why Gutenberg, Beaver Builder and Oxygen perform well. Ideally you start from an efficient place, such as these builders offer, and then only add what you need on the pages where you need it.

As far as I can tell, Gutenberg does not easily lend itself to site builder customizations. It is fairly easy to extend Beaver Builder, though the normal UI isn’t especially designed for it. The Oxygen UI is designed to give more direct access from within the builder to add custom code (CSS, JavaScript, PHP). Of course, WordPress itself is wonderfully extensible. A developer or power user can use their skills to do almost anything, but I’m talking about what the builder exposes in the user interface.

It is said that the Zion and Bricks builders sit somewhere between Elementor and Oxygen. Like Elementor, they are pretty easy to use. Like Oxygen they are pretty efficient. However, the Zion and Bricks builders do not have all of the animations, widgets, and addons that Elementor has. They also don’t give as much direct access from within the builder for adding custom code. For example, access to style sheets.

builder continuum

Elementor, Bricks, Zion Beaver Builder and Oxygen have consistent layout and style options across their widgets/elements/modules. Gutenberg does not. Gutenberg also lacks many of the layout and style options of the other builders.

Occasionally I see people who wish that Bricks, Zion, Beaver Builder, Oxygen or Gutenberg had all of the advanced options and widgets that Elementor does. Doing that probably goes against the intent and may undermine the integrity of those builders.

It is possible that if you take an advanced, large, and full featured Elementor addon and port it to Gutenberg (or one of the other builders) that it would be more efficient, because the base is more efficient. However, watch out for bloat. There may be the tendency to not only bring over the front-end style and flash, but also the back-end bloat and inefficient loading of resources.

If you are moving from Elementor to one of these other builders to work faster and build more performant sites, then seriously consider not using as much flash. If you need all the bells and whistles then just use Elementor. There is nothing wrong with that, if you need it to achieve the purpose of the site / page. I saw someone wishing that Gutenberg had all of the features of Elementor and this is what I thought.

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Similar Posts