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.
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.
- 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
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.