Gutenberg vs Elementor: Which is Faster?

Twitter Facebook Pinterest LinkedIn Reddit WhatsApp

See my case study speed tests using an Astra theme and an Elementor template against recreating that same template using only Gutenberg.

You’ll see metrics of both pages with and without optimization.

And the Winner Is

I’m going to save you some time and tell you the undisputed winner of this case study.

It’s Gutenberg – by a mile.

You’ll see proof that you have to throw the kitchen sink of optimization at Elementor just to bring it close to the speed that an un-optimized Gutenberg site starts with.

And when you optimize Gutenberg, its metrics are nearly as perfect as a site that has nothing on it!!!

Become a Gutenberg Ninja

I have yet to see anything built with Elementor that you can’t build in Gutenberg.

My Gutenberg Ninja course teaches you how to build a page like you see in this test – and more dazzling pages with optins, CTAs, home page layouts with post grid, and so much more.

You’ll never use a page builder again!!

Thank You

I want to send a huge shout out to Emre Vona, the developer of WP Fastest Cache, for donating the premium version of the plugin for these tests.

That is the kitchen sink of optimization I threw on these sites – because it works!!!

And you’ll clearly see that in the tests.

See my WP Fastest Cache Settings tutorial for how to get the most from this fabulous plugin on both the free and paid versions.

About the Tests

I’ve been running deep case studies for several years now. And I have hundreds of site audit clients with all manner of variety in both themes and plugins. Plus, I work behind the scenes with plugin and theme developers, as well as hosts to help them make the best wares possible for us.

All that to say – I know my testing methods are top-notch and accurate because I have to deliver results for my clients. That includes accurately identifying what is slowing down the site and what will fix it.

If you would like to replicate my tests, you’ll find a brief on my baseline setup and testing methods listed below.

If you would like to see the full case study results and learn how to do deep testing and site audits like I do, you can!!! In my Webmaster Training you’ll learn how to fully secure a site and make it fast! You’ll also get access to the full case studies.

Testing Conditions

Hosting

Litespeed server
Shared hosting on NameHero
PHP 7.3
No Cloudflare
No caching / optimization plugin on the first set of tests
WP Fastest Cache premium on the second set of tests

Theme

The free Astra theme was used on both sites.

Template and Plugins

On the Elementor site, I used one of their free templates, shown below.

On the Gutenberg site, I used the Ultimate Addons for Gutenberg plugin. It is made by the same folks who created the Astra theme.

It adds zero weight or requests and has more styling options than native Gutenberg.

I ran both a baseline test on just Astra, as well as a test with the UAG plugin installed and there was no difference in the metrics. So, the baseline Astra theme test data was used in the case study reports.

Pages Tested

Below are screenshots of the built pages used in this test.

For the baseline Astra test, the WP Sample Page demo content was tested.

Elementor Template Used

Gutenberg Replicant of Template

Build Info and Changes Applied

I downloaded the images from the Elementor template to use on the Gutenberg site to keep things as much the same as possible.

The images are not fully optimized and significantly reduced the speed of both pages. With better optimized images the speeds would have been faster on both.

A YouTube video was at the top of the Elementor template.

I replaced that with an image, as oEmbeds of YouTube videos yield a ton of extra requests. The point of this case study is to test the base page speed, and removing that video helped clean up the request data.

The two things I didn’t change were the Google Map at the bottom of the page. Nor did I install favicons on either site.

Changing those two things would have yielded slightly faster sites with less requests too. But, as long as they were both the same, that’s all that matters for comparison.

WP Fastest Cache premium was used as the only other optimization applied to the site.

Even faster speeds can be achieved with even more tweaks, but I wanted to keep things super simple for these tests by using optimization techniques that any site owner can easily apply.

Testers and Data Tutorials

For this case study I limited my testers to WebPage Test and Google PageSpeed Insights.

In actual site audits, I dig way deeper into all the speed drags on a site, including all of those on the hosting side. On average, I find 26 security and performance holes that no tester can detect.

See the following posts for a primer on how to run accurate tests and interpret the data.

Baseline Tests

Following are the results of the first speed tests. Neither of the sites had any optimization applied.

You’ll see data for:

the baseline Astra test
Gutenberg site
Elementor template site

WebPage Test Results

Following are the results for each site from WebPage Test on desktop, which has a far longer on_load point and therefore shows far more requests than mobile.

These results are for the un-optimized sites.

WPT Speed Metrics

On all results below, lower is better unless otherwise noted.

First Byte – time to the first content fully delivered from host.

Start Render – time to first content visibly available.

FCP – First Contentful Paint – time to the first visible content complete.

Speed Index – calculation of average time for visible display.

LPH – Last Painted Hero – time to complete the largest visible element load.

LCP – Largest Contentful Paint – when the main content has completed its load.

CLS – Cumulative Layout Shift – when the visible content becomes stable.

TBT – Total Blocking Time – delay between when content becomes visible and when it becomes interactive.

WPT Onload Time and Full Load Time

Onload Time – time of full content load to the on_load point, or above-the-fold

Full Load Time – time of full content load to the end of the page

The onload time is the one you really care about here, and the lower the better.

WPT Onload and Full Load Requests

Onload Requests – number of page elements requested to the on_load point

Full Load Requests – number of page elements requested for the entire load

The lower, the better, as each request has to be loaded in order.

You’ll see later that way too many of these are render blocking above the fold requests in Elementor.

WPT Onload and Full Load Bytes

Onload Bytes – overall weight of the requests to the on_load point

Full Load Bytes – overall weight of the requests to the end of the page

Besides keeping the number of requests low, you also want to be mindful of how much each one weighs.

Better optimized images would have made the page weight lower, as they are generally the heaviest elements.

WPT JS, CSS, and Fonts

Javascript files tend to be far heavier than CSS. But, there can be a bunch more CSS files, so they really add up too.

And all of these hurt in Render Blocking Above the Fold and in the sheer number of requests and page weight.

Also, the fonts come from 3rd party sources, like Google Fonts, and cannot be cached. The fewer fonts, the better.

Google PageSpeed Insights Test Results

Following are the results for each site on GPSI, which tests the mobile version. There are far fewer elements loaded than on desktop, but total blocking time, or time to interactive can be way worse. That keeps your site visitors from being able to scroll once they do see the page.

These results are for the un-optimized sites.

GPSI Score

Or in a way you’re used to seeing:

This is the cumulative, calculated score you see at the top of GPSI.

It is more than an indication of speed, as it also takes into account UX (User Experience) data as well.

The scores are all lab data, as there is no field data on these test sits.

Higher is better.

GPSI Square

Or, in a way you’re used to seeing:

How long would you wait to see anything on a page while it was loading?

The effect of all the Elementor bloat is clearly evident here.

GPSI Speed Metrics

These are the data points used to determine the page load speed.

All of them are also Core Web Vitals metrics that will be a Google ranking factor.

See above, in the WPT Speed Metrics section, for an explanation of them.

GPSI TBT (Total Blocking Time)

This one metric will kill your UX (User Experience).

It’s the calculated time between when a visitor sees content and when they can interact with it.

So, even if your first content loads quickly, if a visitor can’t scroll to see more, or click on something, the first time or two they try – bye bye!

This is especially frustrating to mobile visitors.

GPSI Audits Passed

This is an indication of how many checks the page scored in the green on for all of the things that GPSI includes in their test from the broader Lighthouse scores.

At the time of this post, there are 24 audits.

The higher, the better.

Optimized Test Results

Following are the same tests taken on each page after WP Fastest Cache premium was applied.

The baseline Astra test has been dropped from the results.

NOTE: Pay attention to the order of the results in the chart.

Gutenberg – original
Gutenberg Optimized
Elementor – original
Elementor Optimized

So, to compare optimized to optimized, look at the 2nd and 4th results.

WebPage Test Optimized Test Results

Following are the results for each site from WebPage Test on desktop, which has a far longer on_load point and therefore shows far more requests than mobile.

These results are tests with WP Fastest Cache premium applied.

WPT Speed Metrics Optimized

You’ll notice that the first 4 metrics are pretty much the same for each site.

But, the LPH and more importantly, the TBT are way high for Elementor.

In other words, the optimization cannot overcome that bloat.

WPT Onload Time and Full Load Time Optimized

WPT Onload and Full Load Requests Optimized

WPT Onload and Full Load Bytes Optimized

WPT JS, CSS, and Fonts Optimized

The fonts are coming from a 3rd party source and cannot be optimized or cached.

Google PageSpeed Insights Optimized Test Results

Following are the results for each site on GPSI with WP Fastest Cache applied.

It’s worth noting that WPFC has a separate cache for mobile, and that’s a good thing, as there are far fewer elements loaded.

Please don’t confuse this with a separate mobile version of your site. It’s not.

It’s just a recalculation of optimizing the above the fold elements, as there are fewer of them.

GPSI Scores Optimized

Or, as you may be used to seeing them:

Higher is better.

Basically, throwing all the optimization you can at Elementor simply brings it up near to where Gutenberg is without any optimization.

In other words, this is as good as it’s going to get with Elementor whereas it’s easy to squeeze even more speed out of just Gutenberg.

In fact, that is as near a perfect score as you can get, and as if there is nothing even on the page, just like the Sample Page in the Astra baseline test.

GPSI Squares Optimized

Or, as you may be used to seeing them.

Again, the optimization simply can’t overcome the bloat of Elementor and the slow load time.

Visitors are too likely to leave before the page fully loads.

GPSI Speed Metrics Optimized

All the optimization can do is pull Elementor to where Gutenberg was to begin with when it had no optimization. (Green column to blue.)

Look at how much lower the red columns are than the green ones.

GPSI TBT (Total Blocking Time) Optimized

With so far to go, the optimization can overcome only so much of the render and load blocking elements in Elementor.

It totally overcomes all of them in Gutenberg.

GPSI Audits Passed Optimized

The ones that were not passed are critical to fast page load and UX.

Why Would You Use Elementor?

That’s a good question.

To be honest, Elementor was a precursor to Gutenberg’s blocks and I believe much of the way Gutenberg works was inspired by Elementor.

And Elementor still has its uses.

There is something to be said for grabbing a ready-made template that has been tested for high conversion rate, then just changing up the text a bit.

Some site owners just want a quick landing page that converts.

The speed at which that page loads is not critical – they’ve got a warm audience due to their marketing. So, those folks likely won’t mind waiting as much as folks going to a regular site page.

Why Would You Not Use Elementor?

Simple – the bloat.

I believe I can recreate every Elementor template in Gutenberg – and I teach you how to do all those fancy things too in my Gutenberg Ninja course.

Gutenberg is the future. Page builders are the past.

It’s native to the WordPress core. Some day Elementor and other page builders may not be with us.

Speed and UX (User Experience) are ranking factors. Gutenberg passes those tests with flying colors.

You can build any layout you want with Gutenberg and you’ll easily be able to tweak it anytime.

Get Your Site Fast

Now is the time to jump on the Gutenberg bandwagon and start getting faster page loads on your site.

My My Gutenberg Ninja course will get you going quickly.

Get a site audit and find all of the speed drags on your site.

Learn how to make sites fast for your clients with my Webmaster Training course.