Oxygen Builder Vs Elementor Bloat And Speed Test (2020)

Published: 5 months ago

This article is going to compare the bloat and speed between two identical pages - One created with the Oxygen Builder, and another created with Elementor. After creating the identical pages, pictured below, I ran each through GTMetrix several times, and outputted a PDF report for each.

Watch this video for the full insights:

Misspoke at the beginning... James from Isotropic, not Elementor 😉

Please note that the server environment was the same, a 2 GB Digital Ocean Server with SSD storage, created through Cloudways. The pages were also identical, leaving the only difference (that had any impact on speed) being the builder behind the page.

Our findings were as expected. Oxygen Builder performed much better than Elementor. The Elementor page was almost twice as large as the Oxygen Builder page, and had double the total page requests. Oxygen had 24 requests, whereas Elementor had 44 requests.

Elementor loaded dozens of assets that were not used on the page, such as an animation library, and their custom icons.

Due to this, the Elementor website had a least contentful paint of 1.2 seconds, compared to the Oxygen score of 0.6 seconds. The Oxygen page had a performance score of 100%, whereas the Elementor page had a performance score of 89%. A notable difference was the fact that the total blocking time for Oxygen was 0 ms, and the total blocking time for Elementor was 267 ms.

Both CLS and time to first byte remained the same, meaning that the pages were virtually identical, as was the server environment.

The result of this test is that an identical page, one created with Oxygen Builder, and one created with Elementor, had a vastly different loading time. The Elementor page was much slower to load than the Oxygen page, primarily due to the code bloat, and loading of assets that weren't required.

On the topic of code bloat, we also took a look at the code output for specific elements created with each page builder. For example, a button in Oxygen contained a single line of HTML code, and had various CSS rules attached to it. A button in Elementor had several lines of code, and many CSS class is attached to it, as you can see in the video and screenshots below.

a screenshot of a cell phone screen with text
Elementor Button Code
a screenshot of a cell phone screen with text
Oxygen Button Code

It is this difference between the two page builders, the fact that the code output is vastly cleaner with Oxygen, that resulted in a much larger page size for Elementor, and a worse loading performance for its respective page.

To conclude our speed and bloat test between Elementor and Oxygen, the Oxygen Builder outputs cleaner code, which results in a faster loading front end page. Elementor has much more bloat, and results in a much slower loading page. For more insights, I recommend watching the YouTube video included in the beginning of this post.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram