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.
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.
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.
|First Paint||1400 ms|
|Contentful Paint||1400 ms|
|DOM Loaded||1600 ms|
|DOM Interactive||1600 ms|
Landing Page Tests
Google PageSpeed Insight Scores
Performance with GenerateBlocks
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.
|First Paint||499 ms|
|Contentful Paint||499 ms|
|DOM Loaded||437 ms|
|DOM Interactive||437 ms|
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 Metrics||Elementor||GenerateBlocks||Difference Δ|
|TTFB||600 ms||79 ms||↓ 521 ms|
|First Paint||1400 ms||499 ms||↓ 901 ms|
|Contentful Paint||1400 ms||499 ms||↓ 901 ms|
|DOM Loaded||1600 ms||437 ms||↓ 963 ms|
|DOM Interactive||1600 ms||437 ms||↓ 963 ms|
|Page Size||512 KB||331 KB||↓ 182 KB|
Now for the score changes in Google PageSpeed Insights and GTmetrix
|Google PageSpeed||49||88||↑ 39|
|GTmetrix YSlow||75||88||↑ 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.
|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.