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:
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;
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;
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.:
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
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.
One of the hallmarks of Web 2.0 and broader software development has been the rise of Agile Techniques. This is a roster of development methods that vary in exact processes but emphasize much shorter development and delivery cycles of 3-9 months instead of 1 to 3 years, client particpation through prototyping and testing, and adapting…
At a recent WordPress Meetup, convener Brent Kobayashi went around the table and greeted everyone. And for the new attendees coming to learn more about WordPress Social Marketing, Brent warned them that things were moving fast in this area of WordPress and WordPress in general.. Well Matt Mullenweg, the creator and curator of all things…
WordPress hack attacks are becoming more prevalent – almost like a multi-headed gorgon, hackers have many more sinister attack vectors as seen in these reports from FossBytes and ThreatPress . These reports describe not just one attack many different approaches to hacking which often involves 2 or 3 step before the main hack attack is…
At a recent WP Meetup about Database plugins I was faulted for not citing which of the plugins being reviewed had been banned by WordPress or other vendors . Yes, I was aware of banned plugins. But I had never deliberately looked for them However, a Securi note that 78% of hacked websites used WordPress…
A Google Software Miss 5 years ago would be hard to ponder with its world-leading search engine, pioneering work in website analytics and performance tuning plus advances in mobile and cloud integration. But of late the fallibility notion might be regarded as more plausible as Google plays catchup in AI, switches to major investments in…
Regular Keep an Open Eye Eye Sir readers will note a lot of changes to the styles and themes of the the blog in the last few weeks. I am in the midst of making some large architectural changes and so I am benchmarking different themes and tracking their “live performance” in the background to…