Are Gutenberg Editor’s Speed Results A Big Lie??

Within the past year there have been many reviewers claiming Gutenbrg Editor delivers faster web pages than popular PageBuilders – see Metabox*, WordPress.com[ is blind to theWYSWYG gap in the Block Editor], Jack in the Net*, Jack Cao Tests*[fails to use normal caching and media optimizations]. In sum, there is a common factor of limited information among all these performance tests. The reviewers imply that these are equivalent tests But on careful examination one can find a number of disparities:

Some tests provide no details about the hosting services and internet bandwidth used;
Likewise the themes and/or plugins components or blocks used are not detailed
Sizing and compression of any media used is often not specified;
But counter-intuitively, the pro-Gutenberg reviewers drop optimizing methods like caching [see tests marked with an *]. This is exactly the opposite of what most WordPress developers would do for their websites. Mum is the word on other optimizing methods like database compression, HTML/CSS/JS minification and combination, CDN-Content Delivery Network usage, targetted conditional and lazy loading which the pro-Gutenberg reviewers either gloss over or fail to mention at all.

Since the OpenSourcery already covered Gutenberg vs the PageBuilders Performance Speed Tests on Sep 2021 using two different optimizers[WPRocket and LiteSpeed Cache]. The results were Elementor doing best in total load time, Gutenberg having the best page size and requests numbers and Beaver Builder having the best Core Web Vitals score. Since all the test were under the 2 seconds respose time standard[Brizy excepted], it seemed speed was not an issue.

However, in contrast, Page design, layout and styling proved to be major issues with Gutenberg viv a vis the Pagebuilders. Now for some, that may come as surprise because they cite the many rosy reviews of Gutenberg as a page editor. However, those reviews put Gutenberg up against the Classic Editor – not the top PageBuilders. Our Sep 2021 review found Gutenberg blocks had much fewer styling options than competing PageBuilder components, poor WYSIWYG support extending editing times, and drag and drop UI operations that are poor in comparisonto many PageBuilders.

So now when doing a wireframe model of a new website, I use the best fitting Pagebuilder and its prebuilt templates as a starting point for customization. But, one client recently asked why use Elementor when tyhe Gutenberg Editor gets better page oerformance and is constantly improving in design and styling capabilities. Yep, this meant another another Performance Testing.

Gutenberg vs Elementor Performance Test

So there will be no complaints about the test system details here are the facts:

Hosting Hardware – Intel(R) Xeon(R) Silver 4216 CPU @ 2.10GHz, 35GB RAM, 502GB SSD drives running Ubunt 20.4.1 with 4 WordPress processes running together in NYC
Local PC – Intel Core I7, 16GB RAM, 250GB SSD + 1TBSTD drives with 120Mbits/sec VMedia Internet connection rnning Windows 10
WordPress 5.8.3
Themes – Astra 3.7.6 and Kadence 1,1,12
PageBuilders – Beaver Builder Standard 2.5.1, Elementor 3.5.3, Classic Editor 1.6.1 and Premium Elementor Add-ons 4.8.3
Gutenberg Blocks – Otter 1.7.4
Optimizer – WP-Optimize 3.2.1 using page caching, database compresion, image compression, HTML/CSS/JS minification and combination, but NO CDN services, NO lazy loading, NO conditional plugin loading
Media Compression – Squoosh.app with Moz JPEG compression set at 0.70

Here are results using Astra/Kadence, Elementor/BeaverBuilder//Gutenberg, Not Optimized/Optimied.

Gutenberg with Astra No Optimizer

Size/Requests/Loadtime

Elementor with Astra No Optimizer

Size/Requests/Loadtime

Elementor with Astra Theme & No-optimizationn runs slightly faster than Gutenberg using the same settings. Elementor has a slightly better CoreVitals score. but is slower by 0..01 seconds in page load time. Gutenberg has fewer requests but more than double the page size. This will be a trend in the tests – PageBuilders often delivering better page speed and CoreVitals scores but both are well under the 2 second response time standard while Gutenberg delivers fewer request

Gutenberg with Kadence No Optimizer

Size/Requests/Loadtime

Elementor with Kadence + No Optimizer

Sie/Requests/Loadtime

Elementor with Kadence Theme & No-optimization runs notably better CoreVitals than Gutenberg using the same settings. Gutenberg has a slightly better fully loaded time [1.9 to 2.1 secs]and nearly 1/3rd less requests than Elementor. But the situation is reversed on total page size with Elementor being 50% smaller.

Gutenberg with Kadence Optimized
Size/Requests/Loadtime

Elementor with Kadence Optimized

Size/Requests /Loadtime

Elementor with Kadence Theme plus Optimization runs nearly 50% fasterand with better CoreVitals than Gutenberg using the same settings. But Gutenberg has nearly 1/ 3 less requests and total page size than Elementor.

Beaver Builder with Kadence Optimized

Size/Requests/Loadtime

Beaver Builder Astra Optimized

Size/Requests/Loadtime

The following Beaver Builder with Kadence and the Astra themes plus optimization in both cases show the PageBuilders on par with or simply outperforming Gutenberg..BeaverBuilder with Kadence has better Core Vitals and better page size and requests scores. Beaver Builder with Astra theme across the board has better results than Gutenberg.

Gutenberg Advocates Have, Like Lucy, “a Lot of Splainin to do”

The current test results show two PageBuilders either matching or outperforming Gutenberg on speed tests, CoreVitals with or without web page optimization. Further tests with WPRocket and Perfmatters optimizing plugins confirm the PageBuilder speed and CoreVitals advantage over Gutenberg Blocks. However, in the case of web requests and total page size, the results are ambivalent . Gutenberg bests Elementor by big margins; but Beaver Builder is more competitive on size and requests performance. The Bottom Line is that two top PageBuilders, Beaver Builder and Elementor, have better speed and CoreVitals resultswit improving requests and page size numbers,

So Gutenberg advocates owe the WordPress community a more forthcoming explanation of their performance results:

Explain why caching has been ruled out in their tests;
Provide in detail what other optimization methods are being used;
Specify the theme and what frontend tools are used
Specify the Hosting Service used , its configuration and other shared processing tasks.

Only with these details can WordPress users believe performance results advanced by Gutenberg advocates.

Given that Gutenberg is into its third year since its 2018 release, the Gutenberg Team also owes the WordPress Community the following:

Better, more up to date and easy to use Gutenberg Editor and FSE documentation for the large “No Coding Required” community that would like to use Gutenberg Editor and upcoming FSE with less confusion and duress;
Better and more up-to-date developer documentation with tutorials outlining the Big Picture Gutenberg Development strategy . Also offer Gutenberg developers tutorials with coding specific required for use cases like multi-user membership systems or multi-relationship event or shopping & services systems. Finally, provide Gutenberg guidelines for interacting with Enterprise systems and evloving small, smart and connected deviceusage.
The native Core Blocks have barebones design and styling options that put Gutenberg Core Editor at extreme disadvantage to most PageBuilders. Even with 3rd party blocks with richer design options, the Gutenberg editor requires third party tools like CSSHero and wpIDE to match PageBuilder features;
Gutenberg has abandoned WYSIWYG editing. As Kyle van Deusen notes in evaluating Gutenberg editing, “While I do have the ability to preview both views from the back end of WordPress inside Gutenberg— what I see is far from reality. Because of this, I’m forced to work in two browsers for one page— constantly saving in the backend, and refreshing the frontend to see what is “real life” results look like.”. This to-and-froing occurs s frequently at page edges and boundaries with many blocks,
Gutenberg Editor is simply clumsy and awkward to work with. It certainly does not match the wokrflow ease of Beaver Builder, Elementor. or other top PageBuilders.

So even with FSE-Full Site Editing coming on stream at January end,, Gutenberg shortcomings are back on the Gutenberg Editor.