- 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;
- 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;
- Meanwhile all the top PageBuilders lite editions are seeing a decline in their downloads on the WordPress plugins directory;
- 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;
- Improved editing speed of Gutenberg from using Kadence and Brainstorm blocks;
- 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.86 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.80sec | 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 but for the PageSize. Also, 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 Vitals 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 NOT 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 Itand the Squoosh.app which also triggered lazy loading of images. Finally, two caching systems, WPRocket and LightSpeed were used for page optimization by means of caching settings, 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
- Both tools have good component layouts with search tool to quickly find the component desired;
- 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;
- 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;
- 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:
- 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;
- 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;
- 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:
- 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.