Articles Web Development

Gutenberg vs Elementor – Page Speed Comparison

5/5 (1)

Most page builders, like Elementor, offer inexperienced users the opportunity to add a lot of material to their pages, which often leads to slower load times for their web sites. So, Automattic’s goal with the all-new Gutenberg, is to give all these page builders a run for their money.

In actual fact, WordPress wants to compete with drag and drop page builders like WIX, Squarespace, Weebly, and others, but all the page builder plugins like Elementor or Thrive will get caught in the crossfire as well.




Elementor

Elementor is one of the most popular page builder plugins for WordPress. It has both free and paid versions that provide users with the ability to build pages without any technical know how.

We used to be big fans of Elementor and Thrive page builders as both of these plugins provided us with the ability to build pages quickly with simple drag and drop features, but we wanted our pages to be optimized for speed.

The load times weren’t exactly what we wanted them to be. Both Elementor and Thrive didn’t actually help our site load times that much.

This required us to look for alternatives that could help us reduce our page load times and increase our site’s loading speed.


Gutenberg

Automattic have delivered with their all-new Gutenberg page builder. It’s supposed to compete with all the drag and drop page builders out there with its block editor.

However, it’s not all rainbows and sunshine with Gutenberg either. The editor has multiple shortcomings and it’s quite complex to use and lacks the polish of some other page builders, but it definitely outperforms everything else out there.


Improving Page Speed

We tried this on our website TopReviewedTen and we got what we were looking for as soon as we shifted to Gutenberg. It could be the most complex thing out there, but as long as page speed and load times go, it’s lightning fast. Even if you run the most basic tests on your pages, you will quickly realize that Gutenberg provides you with the best performance of all page builders in the market.

Although, that’s not the only thing it takes to improve page speed. The all-new release by Automattic does help improve the load times, but there are certainly a number of other factors that actually help improve page speed.

So, here’s what you can do to improve your web page load times. We’ve tried and tested each one these methods.

Google website speed test (before Gutenberg):

website speed test (before Gutenberg)

Google website speed test (After Gutenberg):

website speed test (After Gutenberg)


1. Minification

First of all, you need to make sure that you are using a caching plugin on your site. Also, you need to use the caching plugin to minify all CSS and JavaScript on your website. Minification removes any unnecessary characters from your source code which helps to improve performance.


2. Image size

This should be common knowledge by now. Always use images with the lowest size. If you have an image with a large size then compress it before uploading it to your website. You can use https://resmush.it/ plugin for image compression.


3. Custom HTML/CSS

Instead of bloating your website with different gimmicks from page builders, you should use only custom HTML and CSS on your web pages. This greatly reduces bloat from your pages and drastically improves performance.


4. Remove scripts

Make sure that you don’t use any iframes or scripts on your pages. These can slow down your pages and decrease performance.


5. Lower usage of APIs

APIs that send requests back to the server often, add to your website’s loading times. Make sure that you don’t use a lot of elements on your web page that send requests.


6. Use Custom themes

This does require you to have some technical knowledge. If you want to improve your website’s performance then go for custom themes especially the ones developed with Node.js


7. Content Delivery Networks

This is a tried and tested method that works wonders for all websites out there. Use a CDN (Content Delivery Network) which hosts your content including media, like images. These CDN use their servers from around the world to deliver your content quickly through the nearest server.


8. WP Rocket to the rescue

WP Rocket is a speed optimization plugin for WordPress that helps improve your website’s page speed. Use this plugin for a variety of speed boosting options. If you are experiencing any cache issues, then this plugin will sort them out for you. However, make sure that you don’t use the “Auto purge cache” feature at all.


9. Always monitor your website

There are numerous tools out there like gtmetrix or pingdom that analyze your entire website and tell you exactly what your page load time is, and if there are any issues with the website. Use this data to fix any issues that you find. The higher the score, the better. So, try to fix all the issues to achieve the highest score on performance tracking websites.

Website monitored by GtMetrix (before Gutenberg):

monitored by GtMetrix (before Gutenberg)

Website monitored by Pingdom tool (before Gutenberg):

monitored by Pingdom tool (before Gutenberg)


10. Get rid of all the bloat

There are numerous things on a website that negatively affect its performance. These include spam comments, unused plugins, and even unnecessary posts/articles in trash/draft.

So, make sure you get rid of these useless items regularly. If you are not using any plugins then there’s no need to keep them installed as they only reduce your website’s page speed. So, remove all plugins that are deactivated. Also, don’t use a lot of plugins on the website because using many plugins can also negatively affect your website’s performance.


Results?

Well, after shifting to Gutenberg and also applying all the above-mentioned suggestions, we were able to improve our website’s performance and page speed drastically . Compared to our previous load times, the results were lightning fast. So, we think by applying these simple tricks, anyone can improve their website’s load times without much hassle.

Website monitored by GtMetrix (After Gutenberg):

monitored by GtMetrix (After Gutenberg)

Website monitored by Pingdom tool (After Gutenberg):

monitored by Pingdom tool (After Gutenberg)


Finally

We’d like to say that there are numerous factors that affect a website’s performance. So, it’s mostly a trial and error process, but we’ve tried our best to present to you the most critical factors that can improve your website’s page speed.
Let us know what you think!



Read Also

Do We Still Need Elementor if Everyone is Hyping About Gutenberg?

Need More Gutenberg Blocks? Download Free Getwid WordPress Blocks Plugin

Select the Perfect Gutenberg Themes for WordPress 5.0

What Do You Need to Know About JetGuten — Blocks Set Add-on for Gutenberg Editor?

Leave a Reply

Your email address will not be published. Required fields are marked *