Gutenberg vs the PageBuilders- Performance Speed Tests

Among the many WordPress PageBuilders, the conventional wisdom is that Gutenberg Builder is on the rise as long overdue features such as more styling options for blocks and use of block patterens as templates  begin to match long delivered PageBuilder capabilities. Perhaps the breakthrough feature is Gutenberg’s  delivery of  true drag and drop operations for blocks arriving in March 2021. Hence, Gutenberg advocates now argue some key Gutenberg winning factors:

  1. FSE-Full Site Editing to arrive  in Fall 2021 with many catchup features to match  the already  existing full theme building feature of top PageBuilders;
  2. With the changes to WordPress 5.7 in March and Gutenberg 11 , a unique  feature is  the new auto-lookup of blocks not loaded but meeting user needs from the newly accessible WordPress Blocks directory;
  3. Meanwhile  all the top PageBuilders lite editions  are seeing a decline in their  downloads on the WordPress plugins directory;
  4. Improvements in Page styling and animation options from Gutenberg blocks provided by Kadence and Editor Plus by Extendify are closing the styling gaps between Gutenberg blocks and corresponding PageBuilder components;
  5. Improved editing speed of Gutenberg  from  using Kadence and Brainstorm blocks;
  6. Tests purporting to show runtime speed advantage of Gutenberg editor pages over equivalent Elementor or Divi Pages are blatantly biased as we shall see below.

It is the runtime speed advantage of Gutenberg Editor which this developer finds questionable. Test after test in Gutenberg’s favor have fatal flaws. Either they cite tests  where normal optimizations are not done or Gutenberg  performance is after optimizations. But the performance of Elementor [or other PageBuilder] using these same optimizations are NOT shown in the comparison . Here is a typical  false comparison review from this past summer.

In contrast, our own usage of  Gutenberg, Beaver Builder, and Elementor showed roughly equivalent runtime speeds – not the large performance gaps declared in  reviews  favoring Gutenberg.  Recent job work provided an ideal opportunity to test exactly how well Gutenberg vs PageBuilders performed in  live runtime speed tests.

A project requiring landing page and events  development provided incentive to test the runtime performance of the major PageBuilders vs Gutenberg Editor. The key ingredient was the Starter Templates free plugin from Brainstorm Force. The Starter Templates plugin allows users to try out identically the same page layouts and styling in Gutenberg Builder, Elementor, Beaver Builder and Brizy. Here is a sample template page:
Among the four Builder tools it is possible to find several common and free templates. This in turn allows us to conduct tests using the same layout & design among 3 top PageBuilders plus Gutenberg  Editor. All of the test pages have Re-Smush It Image optimizations along with WPRocket  and then LightSpeed Cache page optimizers, Finally we have not taken any composite ratings  but rather use hard speed and utilization metrics..

First here is a screenshot of the common test landing page:
Here is the  table of the speed test results using Pingdom and Gtmetrix. Note that all of the tests show times under the 2 second ideal with the exception of Brizy. All tests were done on  desktop systems. Additional tests on tablet and mobile clients using PWA and AMP  are not shown.:

Builder Optimizer LoadTime PageSize Requests LCP TTI CLS
Beaver Builder WPRocket 1.15 sec 1.0 mb 17 0.74 sec 0.59 sec 0.02
Beaver Builder LightSpeed 1.23 sec 1.2 mb 23 0.71 sec 0,46 sec 0
Elementor WPRocket 0.39 sec 4.0 mb 21 0.74 sec 0.66 sec 0.04
Elementor LightSpeed 1.23 sec 4.3 mb 27 0.77 sec 0.61 sec 0
Brizy WPRocket 3.21 sec 0,27 mb 16 0.47 sec 0.25 sec 0
Brizy Lightspeed 2.63 sec 1.7 mb 42 0.79 sec 0.46 sec 0
Gutenberg WPRocket 2.02 sec 0.66 mb 15 0.78 sec 0.60 sec 0
Gutenberg LightSpeed 1.06 sec 0.79 mb 19 0.72 sec 0.51 sec 0

Look at the results – they are  clustered close together except for tthe PageSize. Except for Brizy, the speed of the pages is well under performance standard. This true for  Google’s Core Web Vitals [LCP, TTI, CLS] which will be used to rank websites on performance. There are 3 principal metrics. First, LCP is the  Largest Contentful Paint which measures the time it takes for the most important and relevant content on a web page to load.  and it should be < 2.5 seconds which all our Page Builders easily beat.

TTI — Time To first Interactive measure the time users have to wait before they can start interacting with page components. This should be 1.5 seconds or less and again all our page builders easily beat this Google standard.

CLS- Cumulative Layout Shift measures the stability of the page layout on load and should be less than a 0.10 reading. CLS presents a problem to page designers that use parallax effects or animations on page load to direct clients attention to key promotions and messaging.

But the bottom line is twofold. First all of the Builders including Gutenberg Editor deliver landing pages that a)actually load quickly and b) easily beat the Google Core Web Vials metrics. Second, all the performances are fairly closely clustered together with Gutenberg Editor only being best in number of requests. So unlike previous benchmarks, Gutenberg Editor does  deliver a significant runtime performance advantage. 

There is a simple explanation for these results. Each one of the landing pages was optimized for performance just like developers would do for any project. The database and  associated utilities were optimized using WP Optimize. All the images were lossy compressed by Re-Smush It which also triggered lazy loading of images. Finally, two caching systems, WPRocket and LightSpeed were used for page optimization by caching settings and HTML/JS/CSS minimizing  and file combinations. The idea was to insure that all Builders had the same  optimizations.  The result is no Builder showed a runaway runtime advantage.  However, for page editing and layout ease of use there was some distinct winners and losers.

Page Editing Ease of Use

During the speed testing, each of the template’s landing pages had to have some editing done with Brizy landing page requiring the most and BeaverBuilder’s template the least. As it turned out these small-scale edits provided some key insights on the comparative ease of use of all 4 Builders . Beaver Builder and Elementor edits were the fastest and easiest to do

  1. Both tools have good component layouts with search tool to quickly find the component desired;
  2. The editing workspace quickly and reliably reflected the edits – WYSIWYG works well for both Builders in contrast both Brizy and Gutenberg require a preview step  to see the current state of the page layout;
  3. Styling and animation options for every component and container are much more immediately accessible with Beaver and Elementor. This makes them  easy to use because of consistent positioning plus the handy  style copying/pasting tools. In contrast, the number styling option are less with Brizy and even fewer with Gutenberg;
  4. Drag and drop operations for margins. row division spacing and an moving components between containers is easiest with Beaver Builder and Elementor; least for Gutenberg Editor.

Both Brizy and Gutenberg suffer from the novelty of their edit operations. – users will have a big learning curve, larger in the case of Gutenberg. In addition, both really require a preview step to see the emerging layout of the page But Gutenberg Editor was by far the hardest to use for a number of reasons:

  1. Gutenberg is still catching up – drag and drop of components just arrived in March 2021 but not row and margin resizings. And FSE-Full Screen Editing has a late Fall debut in which comparison to Thrive, Elementor, Divi, Bricks, and Oygen ThemeBuilders will have to be done;
  2. Gutenberg editor is constantly changing such as new roles for the Live Editor, Blocks List, Design Directory and settings sidebar popup, etc. But the problem is where to find tools and what will it be called – templates become patterns, group and covers map to Sections or containers;
  3. WYSIWYG layout of a page being designed still suffers. The way the blocks look in the editor is not how the display on the preview page:
  4. Simple styling choices to make changes like a container background color or block width or vertical positioning  means searching through a block’s toolbar or the Settings Block values  or the List View block  options. This is the dreaded Gutenberg Editor Scavenger Hunt.

So if you are considering using the Gutenberg Editor, be prepared for a significant learning curve regardless if you coming from the Classic WordPress Editor or moving from one of the popular PageBuilders

Summary

We tested Gutenberg Editor’s runtime performance versus three popular PageBuilders and found no significant advantage among any of the tools, This is important to note regardless of which performance optimization tools were used. However, comparatively speaking on ease of editor use, Gutenberg Editor still lags well behind the PageBuilders.  Finally in the race for best ThemeBuilding  or Full Site Editing tools , two new and notable  software tools, Bricks Builder and OxyGen Builder are now the FSE tools to watch.