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 Metric	Result
First Paint	1400 ms
Contentful Paint	1400 ms
DOM Loaded	1600 ms
DOM Interactive	1600 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 Metric	Result
First Paint	499 ms
Contentful Paint	499 ms
DOM Loaded	437 ms
DOM Interactive	437 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:

Now for the score changes in Google PageSpeed Insights and GTmetrix

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 Metric	Result
First Paint	300 ms
Contentful Paint	300 ms
DOM Loaded	311 ms
DOM Interactive	289 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!