WordPress Page Builder Performance Case Study – Elementor vs GenerateBlocks Benchmarks

Originally this site was using Elementor for the homepage and landing pages. I first started using Elementor years ago due to its lightweight appeal at the time. Things have changed quite a bit since then. Now some of the Elementor features have some performance costs just like with most page builders.

I decided to try and rebuild the homepage and a landing page with Gutenberg using GenerateBlocks by my favorite theme developer Tom Usborne whom I've had the pleasure of collaborating with over the years since we share a similar passion for performance. Tom's theme GeneratePress is the only theme I have ever bought and used in projects.

For this page builder performance case study benchmark mashup, I am testing the homepage of this site and a landing page built with Elementor. I do love performance benchmarks for page builders, themes and plugins so this post is quite thorough using multiple tools to measure the speed and key performance metrics of the pages.

We are testing the mobile scores on the Google Lighthouse performance tool for PageSpeed Insights that Google Search Console also integrated recently in 2020. You can also run these Lighthouse performance tests from inside of Google Chrome.

This will allow us to compare Elementor to the reportedly lighter Gutenberg page builder solution using GenerateBlocks so we can see what the key performance metrics are before and after. We ran some GTmetrix tests as well to gather page size and key visual render time metrics like First Paint, First Contentful Paint and DOM timings.

All tests were done on a Vultr 1 GB VPS server running nginx and PHP 7.4. No CDN or page caching was enabled for the tests here (except the optimized section). wp-cron was disabled to prevent default cron spawning from artificially increasing the Time to First Byte (TTFB). The domain names were mapped using the /etc/hosts file to eliminate DNS latency as a variable.

Server response was tested using a custom bash script that ran the process 10 times and provided an average. The wp profile command was used with WP-CLI 2.4.0 for doing a command line profile on each page.

Performance with Elementor Pro

Here are the tests when the pages were built with Elementor Pro. The layout and content on the homepage are very simple with 4 images, a hero section and a single 3 column grid each with an image and a button – nothing fancy at all.

Homepage Tests

Google PageSpeed Insights Scores

The homepage built with Elementor scored a 49 which is definitely respectable!

Sometimes I see other page builders resulting in a score of 3 so Elementor is doing well here since it is almost at the moderate speed level according to Google.

GTmetrix Scores

The page weight was 512 KB with 54 requests.

For visual render time we are all around the 1.5 second mark which is a great start.

Performance MetricResult
First Paint1400 ms
Contentful Paint1400 ms
DOM Loaded1600 ms
DOM Interactive1600 ms

Landing Page Tests

Google PageSpeed Insight Scores

Scored 29 which is not a big surprise with all of the JavaScript loading and the number of components on the page like videos and sections.

Performance with GenerateBlocks

Homepage

According to GTmetrix, the page weight went down almost 200 KB which is huge in a mobile-first world!

The page weight was 331 KB with 34 requests – nearly a 50% reduction.

For visual render time we are all around the 500 ms second mark which is a great start.

Performance MetricResult
First Paint499 ms
Contentful Paint499 ms
DOM Loaded437 ms
DOM Interactive437 ms

Less JavaScript and CSS from GenerateBlocks compared to Elementor have almost cut the page size in half.

The Google PageSpeed Insights score improved from 49 to 88 just from changing the builder :O

Landing Page Test

For the landing page the Google PageSpeed Insights score improved from 29 to 50 going from slow to just inching into the moderate performance level.

Performance Comparisons for Elementor and GeneratePress

TTFB and Profile Testing Homepage

The Elementor Pro server response was 172 ms.

The GenerateBlocks server response was 85 ms.

The wp profile for Elementor Pro was 679 ms.

The wp profile for GenerateBlocks was 172 ms.

TTFB and Profile Testing Landing Page

The Elementor Pro server response was 342 ms.

The GenerateBlocks server response was 60 ms.

Performance Comparison Elementor vs GenerateBlocks

Here is a summary table of the key performance metric differences between the two page builders Elementor and GenerateBlocks.

For the homepage test:

Performance MetricsElementorGenerateBlocksDifference Δ
TTFB600 ms79 ms↓ 521 ms
First Paint1400 ms499 ms↓ 901 ms
Contentful Paint1400 ms499 ms↓ 901 ms
DOM Loaded1600 ms437 ms↓ 963 ms
DOM Interactive1600 ms437 ms↓ 963 ms
Page Size512 KB331 KB↓ 182 KB
Requests5434↓ 20

Now for the score changes in Google PageSpeed Insights and GTmetrix

ScoreElementorGenerateBlocksDifference Δ
Google PageSpeed4988↑ 39
GTmetrix PageSpeed9191
GTmetrix YSlow7588↑ 13

These are huge improvements and we haven't even applied frontend optimizations yet!

Performance with GenerateBlocks After Optimizations

After applying some advanced WordPress performance optimization techniques for server Time To First Byte (TTFB) and visual render time, the Google Lighthouse PageSpeed Insights scores reached the coveted green range of 95+ which was a beautiful surprise!

The homepage got to 99 😀

GTmetrix showed the visual render time metrics are all closer to 300ms now which is a massive improvement!

The page weight was 297 KB with 16 requests.

For visual render time we are all around the 300 ms mark.

Performance MetricResult
First Paint300 ms
Contentful Paint300 ms
DOM Loaded311 ms
DOM Interactive289 ms

The landing page Google PageSpeed score increased to 95 😀

This is with all of the caches warmed up too and it would hit 99 😀

Overall the transition from Elementor to a leaner page builder in Gutenberg with GenerateBlocks was pretty straightforward for my site and managed to satisfy my performance requirements while allowing us to retain the convenience of a drag and drop page builder – no compromises!

We still have the freedom and power to build layouts very easily and without the heavier code from traditional WordPress page builders like Avada, Divi, Elementor etc.

What if you use the Elementor theme builder? Is there a lightweight alternative that is performance friendly? With the latest GeneratePress premium there is!

See the video below for details on the powerful light replacement for Elementor's theme builder with GenerateBlocks.

Definitely give GenerateBlocks a try if you have a passion for performance!

If you would like help speeding up your WordPress site or WooCommerce store please reach out here.

Work with Us!

Also remember to clean your database after deleting Elementor and check out more benchmarks on Gutenberg vs Elementor!

3 thoughts on “WordPress Page Builder Performance Case Study – Elementor vs GenerateBlocks Benchmarks”

  1. Hi! Nice review 🙂

    I’m the same way. We are trying GenerateBlocks + GP Premium to replace Elementor page builder and… now it’s a real option.

    One question. When you are talking about to optimize GB… What plugin you are using? Autoptimize? A CDN? Speedlite Caché?

    Thanks!

    Reply

Leave a Comment