Imitate Elementor with Gutenberg block editor – and be faster.

WordPress Mobile Speed

Updated


There are no affiliate links on PagePipe.

Can Gutenberg imitate Elementor?

We build some client websites with the Elementor page builder plugin. It’s fast enough with judicious use on fast host servers.

Elementor plugin file weighs 5.7 megabytes compressed. And 21.5 megabytes decompressed in version 3.1.0. For comparison, WordPress core weighs 15.8 megabytes compressed (and 16.5 megabytes decompressed).

Elementor is now almost 5 megabytes heavier code when decompressed than the WordPress CMS platform it runs on. Ironic. And it’s still growing.

Elementor version 0.1.0 – when it was first introduced – was 1.2 megabytes compressed file size. That decompressed to 3.4 megabytes. It is now 6X larger than when it began in 2016. That growth of package size indicates complexity and code bloat. It’s lost simplicity attempting to become all things to all people.

Elementor bugs and increasing bloat pressured us to check our reliance. Are we being foolish? The vulnerability caused us to give the Gutenberg block editor another try. Would it be faster loading?

We selected four relatively lightweight block plugins to increase the Gutenberg block editor’s basic functionality. This is so we could imitate Elementor’s basic desirable features. Gutenberg is not a full page builder – yet. But it obvious that’s WordPress’s ultimate goal.

Gutenberg, at present, needs extra plugins to add Elementor-like features.

The page layout features we most desire are:

Columns and Nested Columns
Building columns with the Classic Editor is a pain. Creating columns – and columns within columns – makes designing and building smooth.

Negative Margins
Sometimes, we need things to be closer together. Negative margins make this possible.

Set Responsive Margins and Paddings
Layouts don’t always look right on small screens. The ability to set specific margins and padding based on screen size (without) CSS code is helpful.

Show or Hide Element Based on Screen Size
Sometimes you want to hide an element if it doesn’t look right on a particular screen size.

Ability to create columns on mobile screen sizes
Because sometimes we want a column on a mobile screen.

We tested these plugins for usability and speed. What features do they offer, are they easy to use, and how much does each slow down the test website?

This isn’t an exhaustive point-by-point comparison. We needed a quick real-world solution for a client’s speed website. So our tests are quick and dirty. We built a sample mock-up page with each candidate block plugin. What follows are our findings:

Test Limitations – Here’s the basic setup for the client website:

Host
KnownHost shared hosting chosen by the client.

Theme
WordPress Twenty Twenty default theme (our choice).

Plugins
34 active plugins – plus 8 inactive plugins used for maintenance events. The average number of plugins on a WordPress site is 25. It’s quality – not quantity – that makes a difference for speed. We chose only free plugins from the WordPress directory.

BEFORE: GT Metrix speed test results for test site. 1.1 second load time baseline.

The site’s baseline speed, before adding block plugins, is lean and fast. We optimized the images. There are no speed-enhancing plugins.

Four Free Plugin Candidates

Genesis Blocks Review

AFTER: GT Metrix speed test results for test site. Still a 1.1 second load time after adding Genesis Blocks plugin.

Speed Test Results
The speed stayed the same – 1.1 second load time. Genesis Blocks added 16kb and 3 requests to the page. No complaints there for speed.

Genesis Block has limited pre-built sections or layouts. This is not a big deal for us. It does offer containers, an important feature for building nested columns. But you can’t specify negative margins, which was a deal-breaker.

No negative margins meant there was no future for us and this Genesis Blocks plugin.

We don’t recommend Genesis Blocks.


CoBlocks Review

AFTER: GT Metrix speed test results for test site. Now a 1.2 second load time after adding CoBlocks plugin. We can live with a 100 millisecond gain at this speed.

Speed Test Results
CoBlocks added 100 milliseconds, 21 kilobytes, and 2 requests to the page. No complaints there for speed.

  • CoBlocks has a pretty good feature set considering it’s the lightest weight of the 4 plugins.
  • It’s not as intuitive to set up containers as Generate Blocks or Stackable plugins.
  • The individual blocks are not as good as Stackable plugin.
  • It does have a pricing table block, which is nice, but not enough to make this our choice.

We don’t recommend CoBlocks plugin.


Generate Blocks Review

AFTER: GT Metrix speed test results for test site. Now a 1.2 second load time after adding Generate Block plugin. We can live with a 100 millisecond gain at this speed.

Speed Test Results
Generate Blocks added 100 milliseconds, 25 kilobytes, and 2 requests to the page. No complaints there.

  • This is the minimalist choice. It only includes basic elements such as container, grid, heading, and button.
  • No pre-built sections. (Not a big deal for us).
  • Can set exact width of the container. Important.
  • Can set exact width of grid columns. Important.
  • Can use specific margins and padding for desktop, tablet, and mobile screen sizes.
Some options with the “Container” block feature.
  • Spacing options include minimum height, margins, and padding.
  • Can set negative margins. Very nice.
  • Can change typography based on tablet or mobile.
  • Can build columns on a mobile device. Very nice.
  • Can’t hide elements based on screen size. (This would be nice).
Spacing options within the “Container” block.

Generate Blocks gets a lot right. Don’t let the few numbers of 4 blocks deter you. You can get a lot done with these. And the settings contained within each block are well-rounded and comprehensive.

We use Generate Blocks to build client sites, and we recommend it.


Stackable Review

Speed Test Results
Stackable added 27kb and 2 requests to the page. No complaints there.

AFTER: GT Metrix speed test results for test site. A 1.1 second load time after adding Stackable plugin. Same speed as the baseline.
  • Has everything that Generate Blocks offers and more.
  • Lots of advanced settings. Most like a page-builder experience.
  • Padding, margins, min and max widths, etc.
A look at the settings in the “Header” block of Stackable plugin.
  • Responsive options including hiding elements based on screen size. Very nice.
  • Can’t build columns on mobile screens. (Generate Blocks can).
  • Has global color and typography settings. (Very nice).
Decent pre-built design library. 83 in the free version.

We use Stackable blocks to build client sites, and we recommend it.


Which plugin did we use for this speed site project?

These plugins are all fast. So it came down to which had the features we needed and which we enjoyed using. Generate Blocks and Stackable fit the bill.

Stackable was a contender. But Generate Blocks had one indispensable feature: creating columns on mobile screen sizes.

Can Gutenburg replace Elementor page builder?

Yes. And no.

Gutenberg has come a long way since its introduction in June 2017. Here are thoughts based on a few general categories:

Elementor is easier to use. Creating complex layouts with Gutenberg still feels clunky, though it’s manageable. Most, unfortunately, what you see on the back end of a Gutenberg page does not match the front end. So there is a lot of fiddling to get the page to look right.

Out of the box, Elementor has more features than Gutenberg. But Gutenberg add-ons are plentiful. You can match the feature-set.

Elementor Pro is a page builder. It’s hard to compare it to Gutenberg. However, themes such as Astra are offering visual header and footer editors that help Gutenburg compete with Elementor Pro.

Speed is where Gutenberg shines. It’s faster than Elementor free version and much faster than Elementor Pro.

What about bugs and future-proofing your site? It’s important to think about your website 3 to 5 years in the future. Elementor gets fatter and buggier with time. Will it continue in that direction?

Gutenberg is still buggy but improving. It’s part of WordPress core. It isn’t going away anytime soon.

What are the benefits of using Gutenberg today – even though it’s still in development?

We’ve used the classic editor for a long time. We’ve been resistant to adopting Gutenberg. We don’t change because someone says it’s the future. Or because it’s mandated by WordPress default. Or that it’s trendy. We disable Gutenberg on sites often.

Are we Luddites? We don’t like learning curves and troubleshooting. Does that mean being a late adopter is bad? No. It reduces risk. Entrepreneurs believe in risk reduction. They don’t like big risks – even though that is the business myth. They also want to get a decent return on investment of website expenditures. They don’t have enough resources to mess around.  Learning a new operating system is wasteful. They’d rather stick with something they’ve already mastered.

WordPress has abandoned the classic editor in new themes and updates of old themes. It’s not easy editing blog posts anymore. The editor control bar now scrolls off the screen. It’s a pain to add a link or italicize.

Is this a deliberate crippling of the classic editor – or a casualty of oversight by WordPress? We don’t know. But the annoying flaw gives us an impetus to change. As we’ve experimented, we’ve discovered a more pleasant writing and editing experience. They improved the user experience. At first, Gutenberg was horrible. After 4 years, it’s improved. It’s usable and even better in many respects. Gutenberg continues to improve.


About The Author

Matt Stern is a web designer and sometimes writer based in Southern Oregon. He designs and builds landing pages and websites that convert visitors into subscribers and customers.

Learn more at SternDesign.co


 

Adding Columns and Moving Blocks in Gutenberg Editor

2:32 minutes – Matt Stern

 

Adjusting Blocks Widths in Gutenberg Editor

3:56 minutes – Matt Stern

 

Godspeed-

Steve Teare
performance engineer
October 2021

 

PagePipe Site Tuning Services for Speed

Instead of band-aid approaches, we drill down to the root cause of your slow site. This is origin optimization. Also known as site tuning. To do this, we analyze site components:

  • Hosting
  • Theme
  • Plugins
  • Scripts and third-party services.
  • Images and media library.
  • We minimize globally loading plugin effects.

Find out more details about Site TuningGet Speed!