el vs gut
Wordpress

Elementor VS Gutenberg: Best Page Builder Speed test

Speed is one of the most important aspects of page builders. What about Elementor vs Gutenberg? Which one is faster? Well, I did the test and I am sharing it with you.

Although Elementor is better and more powerful, many people use Gutenberg as their page builder and it is important to know how fast they are.



WordPress tries to make Gutenberg more powerful and it may become one of the best and used builders soon. So, it is important to know how fast and lightweight they are.

I decided to test it and did a simple but very informative speed test. So, I present you with Elementor vs Gutenberg.


About Elementor VS Gutenberg Speed Test

In order to test the speed of these page builders and find out which one is faster, I used two free themes – Astra and Blocksy. Both are very popular, lightweight, fast, and work well with both page builders.

I used their pre-made templates. These templates are made with both page builders. And templates are well designed and have big images.

And for the speed check, I used a popular tool called GTmetrix. I use it all the time because it gives a lot of information in well-designed reports.

I didn’t use any kind of caching or image optimizer. I wanted to know page builders’ speed without any help.

So, let’s dive in Elementor vs Gutenberg speed battle.


Speed Test With Astra Theme

The first test was done with the Astra theme. Astra is a fast and lightweight theme and the results were great. Both page builders work great with this theme.

Gutenberg works very well with the Astra theme. The test showed an awesome score. Grade A with 99% of performance. Almost as nothing was added to the theme.

elementor vs gutenberg

Performance metrics score is also great. As you can see everything is green, which means good. FCP of 0.7s, interactive time of 0.7s, no blocking time, etc.

astra with gutenberg performance

Gutenberg with Astra showed a great score in page size too. It was only 1.63MB. But 1.59MB were images. So, with fewer images page size would be much lower.

It was fully loaded in 1.4s and had only 16 requests. This is a really great score for this kind of page, with big images.

Elementor also showed great performance with Astra. Almost identical performance. The real difference was in LCP as you can see.

astra elementor grade

Even in metrics, there is no big difference. FCP has 1.s, no blocking time, and it was interactive in 1.1s. I didn’t expect this score with Elementor, because it is heavier than Gutenberg.

elementor vs gutenberg metrics

A little difference was in page size and requests. The page size went up a little, from 1.63MB to 1.77MB. Still, the reason is images. Considering image number and size, it is a great score.

This test showed total requests of 38 which is bigger than what Gutenberg had and the page was loaded in 1.8s.

We can clearly see that not only Gutenberg and Elementor are pretty fast page builders, but Astra is also a very lightweight and fast theme.

Elementor VS Gutenberg Speed Results For Astra
FCPLCPPage SizeRequestsLoad Time
Elementor1s1.3s1.77MB381.8s
Gutenberg0.7s0.9s1.63MB161.4s

Speed Test With Blocksy

Now it is time to see Elementor vs Gutenberg performance results for the Blocksy theme. Blocksy is a newer theme than Astra but it is an awesome theme with great customization options.

Actually, Gutenberg‘s performance with Blocksy was not as good as with Astra. Perhaps the main reason is that Blocksy uses third-party plugins like Gutentor and Quebly to build pages, where Astra doesn’t.

blocksy theme score

These additional plugins add weight to it so we get not as good performance metrics. FCP of 1.4s, blocking time of 3ms, etc. Maybe there are other reasons, but I think it is caused by third-party plugins.

blocksy metrics

But a very different situation is with other metrics. This page was loaded in 1.7s and had a total of 37 requests. But the shocking result was the page size. Although it was an image-heavy page, its size was only 834KB.

Now let’s see the Elementor score. Not as good grades as Gutenberg but nothing to worry about. Elementor adds additional code and it makes a theme heavier.

elementor score with blocksy

The same situation in performance metrics. FCP goes up to 1.7s and LCP to 2s. Interaction time and total blocking time is not as high. But Gutenberg is faster than Elementor with a Blocksy theme.

elementor vs gutenberg blocksy

The Elementor page size is also much bigger. Perhaps 1.88MB is nothing special when you have many images, but the same template with Gutenberg had only 834KB of the page size.

Page needed 4.2s to fully load and requests went from 37 to 81. Half of the requests were JavaScript requests and 23% were CSS requests.

Elementor VS Gutenberg Speed Results For Blocksy
FCPLCPPage SizeRequestsLoad Time
Elementor1.7s2s1.88MB814.2s
Gutenberg1.4s1.7s0.83MB371.7s

Which One Is Faster

So, this Elementor vs Gutenberg test showed us that Gutenberg is faster and more lightweight than Elementor. But the difference can be very small.

Also, we can clearly see that both page builders worked great with Astra but not with Blocksy. Perhaps the Astra theme is more customized for both page builders than Blocksy is.

Because Blocksy uses third-party add-ons for Gutenberg, it adds weight to it. But that is not the case with Elementor but still, results were not as good as for Astra.

This means that you should always pick a good theme first and then choose a page builder. Because, page builders work differently and if you don’t have a good theme, page builders can’t change anything.

Conclusion

Personally, I recommend both page builders. Both are great but first, you have to choose the right theme. Blocksy is a great theme but looks like it is not as optimized as Astra is.

But you can always use cache plugins, image compression, and other optimizing tools to speed up your website. So, feel free to choose your favorite page builder.