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:
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.
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.
Are there any competitors to Oxygen that come close in speed?
Beaver Builder is in second place I believe! It loads 38kb compared to Oxygen's 32kb of frontend assets.
If you end up buying BB, here's an affiliate link if you'd like to support 🙂 https://isotropic.co/out/beaver-builder/
Have you tested BB vs Oxygen in the same manner you've done here?
Please tell the load times. How much slower, in real time was Elementor? Was it 1 second slower? 5 seconds? an hour? 500ms? The actual time is what is important. To say one is "slower" is meaningless.
Nice work, James, thank you.
I whizzed through the vid so forgive me if I missed it but did you look at the DOM of both builds? 24 v 44 elements is indicative of a heavier DOM for Elementor over Oxygen, but I'd love to know the exact figures if you have them please 🙂