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 🙂
Hey there! I'm sure I can find this information somewhere, but your agency keeps popping up as one of the authorities on using Oxygen extensively for your own business, but also clients. I am looking into buying Oxygen, and transitioning to using it for myself and possibly clients. I am currently on Elementor. I also tested Brizy, and I don't like it much. I really like Elementor, but I can't get over some very awful aspects of it.
First, I was wondering what happens to your content if Oxygen is disabled? With some of the really good builders, the entire content area is transformed into Gutenberg blocks. It seems to me that Oxygen builds in a way that, when disabled, causes all of the content to disappear. Have you had an opportunity to test this, or have you needed to disable Oxygen for any reason only to find out that the content is completely gone?
My other concern is how to build an Oxygen site that is user-friendly for my clients. I don't think I would ever want them to use Oxygen themselves ... Elementor is really easy for me to build powerful websites, but my clients also have access to all of the great widgets that the might want to use on their future pages. Do you find this frustrating? Have you found a good solution for your workflow?
There are so many things that make Elementor really easy and a pleasure to use, but I don't deny that it also has a laundry list of issues. I am trying to find an enticing and solid excuse as to why Oxygen might be a better tool for all of my needs.
Thanks!
Hey Michael.
If Oxygen is disabled, content built with it will no longer work. So there's definitely lock in here. But that's true with most of the major builders.
For Q2, I think it depends on the client. For us, our clients don't want to build pages, they just ask us to. Oxygen has a "client mode", which works decently well, but realistically, if you want clients to build out pages and posts within the builder, it might not work well for them. IMO, clients should not build pages. That's why they hire you... to worry about responsiveness, technical SEO, design.....
Something we DO end up doing on every project is building out a complete client-editable backend with ACF. Here, they can change content, images and backgrounds on their core pages within the WordPress admin. No need to even fire up the builder. This is great as they don't/can't mess up our structure, design, responsive font sizes, so on and so forth. This is my recommendation for all client sites.
Also, I'll cover many of these topics in the Oxygen Builder course that we're publishing soon, if you'd like to sign up for the waitlist. There will be a launch discount!
Feel free to hit me with any questions. Also feel free to join and post this in my Facebook group - https://facebook.com/groups/isotropic. There are a ton of pro Oxygen users who may bring different viewpoints to the table.
James
James,
Thanks for the reply! Oxygen lock-in isn't a deal breaker for me, but I would have loved to see some of the content elements converted to Gutenberg blocks if disabled. The reality is that once you start using a specific solution, the only way to really switch is to start fresh. I've done it many many times over the years, and now I have segments of clients, each with their own stack ... Genesis Framework, completely hand-coded, Toolset, Elementor ... yikes! The life of running an agency I suppose 🙂
I definitely don't get many clients who want to even log into their websites, but I get the occasional weekend warrior who wants to manage their own website. When that happens, I certainly want to have a client hand-off solution in place. I like your method of building a custom page/post editor, that's interesting. I may also take some time to play with Oxygen's built-in client controls to see if they're worth using.
I signed up to receive updates about your course 🙂
Take care!