converting elementor blog post to gutenberg and analyzing speed improvements

Convert Elementor blog post to Gutenberg (Amazing speed improvement)

Elementor is one of the most popular WordPress page builders, if not the most popular. It is very easy to use and lightweight. The Element Pack addon plugin makes it even more powerful by adding 60+ widgets to Elementor.

But when it comes to speed and performance, there is a question mark.

WordPress have their own default WordPress editor called Gutenberg. It is not so easy to use but when it comes to performance it seems like it is exceeding Elementor and other page builders. It is performing much better in terms of speed, page size compared to other popular page builders such as Elementor, Divi, Thrive Themes etc.

In this blog I am going to show you the effect on page load time and page size after I convert one of my existing blog post from Elementor to Gutenberg.

Before and after results

To test out the post before and after converting to Gutenberg I am using the Website Pingdom Website Speed Test it shows the page load time, page size and the number of requests.

I had a caching plugin called WP Fastest Cache and an optimization plugin called Autoptimize installed on the site. I deactivated those before doing the tests, so the tests are fair.

Testing the Elementor blog post (before converting to Gutenberg)

As you can see in the screenshot below. Before converting the Elementor blog post to Gutenberg the page size was 1.2 MB, load time was 2.90 seconds and there were 82 requests.

Testing after converting to Gutenberg

As you can see in the screenshot, after converting the blog post to Gutenberg the page size decreased by more than 50% from 1.2 MB to only 521.8 KB. The page load time decreased from 2.90 seconds to 2.21 seconds. The page requests decreased by 30, from 82 to only 52.

My analysis and conclusion

In terms of usability Elementor is way ahead of Gutenberg. But Elementor adds a lot of bloat to each of the pages. Which results in a larger page size, more requests as a result more load time.

Gutenberg outputs a cleaner and lightweight page with less bloat and hence results in a lower page size, less requests and hence a less load time.

If you can build your whole website, all the pages and post using Gutenberg then all of them will have a lower page size and will load quicker. Yes, as of now Gutenberg is a bit difficult to use. But to make it easier, you can buy a Gutenberg theme from the themeforest. Then import a demo site made with Gutenberg, then simply replace the contents such as texts and images with yours.

But if you really like Elementor and want to use it then you might want to use the WP Rocket plugin. It is an all in one speed optimization plugin, it will reduce the load time of your Elementor website to less than a second.

Hope you have found my experiment useful. Please check out the list of WordPress resources I recommend below. Thank you

Recommended WordPress ResourceBenefits of using it
Element PackThis is a useful Elementor addon plugin that adds around 60 addon elements to your Elementor page builder. Useful elements such as the Instagram gallery, table, document viewer, iframe, and much more.
WP EngineReliable WordPress hosting. Super fast, regular automatic backups, built-in CDN for faster content delivery, top-notch security, and more!
Jupiter Multipurpose WordPress theme for ElementorImport among many 450 ready-made websites made with Elementor and customize them according to your needs. Advanced WooCommerce checkout options optimized for better conversions.
WP RocketA magical WordPress plugin that will reduce the load time of your website to less than a second. It is an all-in-one speed optimization tool. It will also improve your Google Page Insights score. As the pages load quicker your website bounce rate will decrease, and average pages on time will increase. Eventually, you will get more traffic.
Slider RevolutionThe most powerful and advanced WordPress slider plugin ever. Over 200+ ready eye candy slider templates to wow your website visitors. Advanced animations, parallax effects, and interactive features.
Duplicator ProThis plugin will save you from disaster. It keeps regular backups of your WordPress sites. In case you break your site you can easily recover it. Using this plugin you can also easily migrate your WordPress sites. It can also keep cloud backups such as Dropbox, Google Drive, One Drive, etc.
ThemeforestBuy any type of beautiful WordPress theme from here such as blogging, WooCommerce, Real Estate, etc. Ability to import any demo site. Chose any type of page builder such as Elementor, WP Bakery, Muffin builder, etc.
𝗘𝗻𝘃𝗶𝗿𝗮 𝗚𝗮𝗹𝗹𝗲𝗿𝘆Best WordPress image and video gallery plugin. Easy to use with powerful and advanced features. If your WordPress page builder does not have a good enough gallery element then check this one out!
– Completely responsive on mobile
– Social Media Integration
– Slideshow & Fullscreen
– Drag & Drop Builder
Ithemes Security ProIt is a powerful WordPress security plugin. It will protect your website from bots trying to hack into your site through a brute force attack. It can also scan your website and remove malware.
Getty ImagesGet premium stock images from here. Using high-quality and premium stock images on your site will make your site look professional. Visitors will be impressed and quickly turn into paying customers.
WP FormsOne of the most popular WordPress form plugins ever. Easily build advanced contact, payment, donation, survey, and newsletter forms with zero coding. Embed your forms on posts/pages using a shortcode. Built-in Recaptcha to prevent spam. The information of people submitting the form will be stored as leads directly on the website.
NamecheapBuy any type of domain name at a very low price. The renewal rates are also reasonable. I use namecheap domain names on all of my websites.

India $1295