The DevTeam Alpha News Aggregation service has sourced the following article originally published on Gutenberg Hub:

I am starting a series of tests comparing the WordPress editor Gutenberg with the Page Builders. The idea is to test Gutenberg in comparison to page builders which are dominating the WordPress world these days.

I will try to be completely unbiased and fair as much possible. Whatever the result comes, my intention here is only to see the real difference of how Gutenberg is already better than the page builders. And to also see what areas it can improve in the future by the core team. And, what are the potential Gutenberg Addon ideas that are there for WordPress developers?

In this post which is part 1 of the series, I will try to compare the performance of WordPress Gutenberg Editor with the popular page builders Elementor and Divi.

Gutenberg VS Page Builders Summary

Here is the summarized median result of all the pages tested. I will elaborate more on the individual page results, keep reading.

Page BuilderRequestsTotal Page Size (KB)Fully Loaded Time (s)JSCSSFonts
Gutenberg29.5204.51.555.560
Elementor393202.21210.52.5
Divi Theme35467.52.71084
Divi Plugin36.5378.52.6109.50.5

The above is the median result of multiple page tests, details of each page test are below. The idea is to see which page builder performs how on different content and with WooCommere as well.

A Simple Page Test

Gutenberg VS Page Builder - Simple Page Test

This first test is done on the default sample page that comes with every fresh WordPress install. I just made sure to edit the page in the relevant builder and save it without adding/deleting anything. Just to make sure the page builder assets get loaded. And here is the result.

Page BuilderRequestsTotal Page Size (KB)Fully Loaded Time (s)JSCSSFonts
Gutenberg824.90.9240
Elementor262411.412102
Divi Theme183611.5654
Divi Plugin152031.2670

As you can see that Gutenberg is a winner here with only eight requests and just 24.9 KB of the page size. And Elementor is the one loading most resources but it looks like they have optimized the assets well as it doesn’t impact that much on the page size. Divi theme is with maximum page size here.

Note that, the theme also will be loading assets here and not all the requests will be called by the page builder (except Divi theme which is a theme with built-in page builder).

Landing Page Test

Gutenberg VS Page Builder - Landing Page Test

This is kind of a landing page test that includes more builder blocks/elements including images, etc. Still a small page not a huge landing page but you can see the difference.

Page BuilderRequestsTotal Page Size (KB)Fully Loaded Time (s)JSCSSFonts
Gutenberg232,027.523.9240
Elementor424,485.128.912113
Divi Theme331,812.485.8974
Divi Plugin351,955.844.5991

Interestingly Gutenberg does not call any extra Javascript, CSS or Font requests with this landing page test. If you compare the result with the simple page test above, you will notice that Elementor & Divi enqueue extra CSS & JS files. That may be because of the blocks used in those page builders, however, this is still a minimal landing page with no fancy stuff like slideshow, form, or any interactive element.

Again Gutenberg is a winner as it is loading the least number of assets & minimum page size. There are no increase in Gutenberg assets (JS, CSS, Fonts) requests from the previous test. Elementor & Divi both calling additional assets. Furthermore, Gutenberg seems much more performant than the Elementor page builder.

WooCommerce Shop Page Test

Gutenberg VS Page Builder - WooCommerce Shop Page Test

Now let’s compare Gutenberg performance with page builders on a WooCommerce store. For this test, I’ve enabled the WooCommerce plugin and set up a shop with the same products on all sites. Here are the results.

Page BuilderRequestsTotal Page Size (KB)Fully Loaded Time (s)JSCSSFonts
Gutenberg36206.001.6980
Elementor36211.002.1980
Divi Theme37455.001.91194
Divi Plugin40346.002.411100

Another surprise, Gutenberg and Elementor are both very close competitors here. Almost having the same stats. That is because this page is not using any page builder element but utilizing the default WooCommerce shortcode. So we are not using specific WooCommerce/Product blocks on this page (we will do it in the next test). Still, with this close call, Gutenberg maintains the winning position in this test as well.

WooCommerce Block Page Test

Gutenberg VS Page Builder - WooCommerce Blocks Page Test

Now let’s try to utilize WooCommerce blocks to come by these builders to set up a custom products page. Now just to make it clear, for the Gutenberg I used the default Gutenberg WooCommerce blocks that come with the WooCommerce plugin itself. While with Elementor and Divi I used the relevant product blocks in both page builders. Here are the results.

Page BuilderRequestsTotal Page Size (KB)Fully Loaded Time (s)JSCSSFonts
Gutenberg36203.001.5980
Elementor54399.002.317153
Divi Theme40480.003.51194
Divi Plugin38411.002.811111

Now see the difference comparing it with the previous WooCommerce Page test which was actually the default WooCommerce shop page. This one is what most users do. They create custom designed store pages using different WooCommerce blocks that come by the page builder. And just to mention, this is yet a simplest store page with just 1 shop/product block with the latest products. no fancy product slider blocks, or any other fancy WooCommerce bocks being used.

So Gutenberg is a winner here as well. Elementor & Divi Theme has pros & cons here, like, Elementor assets look more optimized by default as it makes less impact on the page load speed and page size. But, Elementor here is having the maximum number of requests as well.

Testing Methodology

To make the tests fair, I followed some of the fair methodologies to conduct such comparisons. Simply all test sites are using the same theme (except Divi theme) & additional plugins (except the one I am testing) installed. Each website is hosted on the same cloud host with the same data center and configurations whatsoever. All Cache stuff is disabled on all sites and there is absolutely no optimization done whatsoever to these sites. All have fresh WordPress installation with the same content (posts, products, images, etc).

WP5.2.3
Elementor2.7.3
Elementor Pro2.7.0
Divi Theme3.29.3
Divi Plugin2.29.3
CacheDisabled
WP ThemeStartWP
WooCommerce3.7.0

I used GTMetrix to test the speed and made sure to set the settings (location, browser, etc) the same on all tests.

So I can assure you that the tests were all fair and done using the same configurations/setup as much possible.

Final Verdict – Based on the test results

As you can see Gutenberg outperforms Elementor and Divi in almost all performance tests I have done for this post. Gutenberg loads minimum assets and takes fewer resources as compared to the other page builders. As far as the front-end performance is concerned, Gutenberg is a winner, even though it is still a new kid and getting improved day by day. You can expect much better results in the future.

If you haven’t tried Gutenberg editor yet, get started using it and take advantage of this revolutionary WordPress editor.

Learn more about Gutenberg Hub by visiting their website.