Deprecated: Function Elementor\DB::is_built_with_elementor is deprecated since version 3.2.0! Use Plugin::$instance->documents->get( $post_id )->is_built_with_elementor() instead. in /home/runcloud/webapps/opensagain/wp-includes/functions.php on line 5379

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[shows Automattic bias on the Costs of the Block editortooling and is blind to the size of the gap in design, layout, and templating the Block Editor still must make up], 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 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.


English EN French FR

Pin It on Pinterest

Share This
Insights on Web Development Receive notifications on latest posts & meetups?
Dismiss
Allow Notifications