Oxygen vs Elementor Performance 2022 (Speed Tests & Key Features)

Are you hesitating between Oxygen and Elementor to build your next WordPress site? Stay with us: we will help you make up your mind. The goal of any website should be to provide an enjoyable browsing experience by being as fast as possible. And to ensure that you are providing an optimal user experience, it’s crucial to pick the right WordPress page builder that won’t affect performance. 

Oxygen is often seen as a full site editing tool for developers that do not even need a theme. It even “disables” the theme that you are using. It’s made for developers, and you’ll see it throughout the plugin’s interface.

Elementor is more beginner-friendly but will also give you the possibility to style your entire site, including the headers and footers. Many theme developers offer a bundle as they use Elementor as a pillar for their demos, making it one of the most used page builders in the world. Elementor powers around 7 million WordPress sites.

In this post, we’ll run performance audits based on real-case scenarios. We’ll also cover the main features and share some high-level techniques you can follow to speed up each page builder. 

Alright, it’s time to find out which page builder will make your WordPress site go faster: Oxygen or Elementor? 

Let’s dive in!

Performance Testing Scenarios for Oxygen vs Elementor (a Mobile Approach)

We’re going to run three separate audits to show you how Oxygen and Elementor compare in terms of performance on mobile. Why specifically on mobile devices? Because mobile optimizations are often overlooked in favor of easier desktop optimizations. 

If you are spending a high budget on responsive design, it also makes sense to offer the fastest experience possible to your visitors. What’s more, ​​lower pricing has led many users only to own a mobile phone and not a computer. Let’s not leave anyone out of your marketing strategy. 

Theme and Plugins Versions That We’ll Be Testing:

Theme: the free Hello Theme by Elementor (V 3.7.6) made it to the list of our best free and fast themes for WordPress.

Important note: Oxygen entirely disables the WordPress theme system: the active theme is never loaded and has no impact on your site’s performance or appearance. Seeing as Oxygen does not load the theme, we used the super lightweight “Hello” theme developed by Elementor to keep things fair. 

Plugins:  

• Oxygen (V.3.9) 
• Elementor Pro (V.3.5.2) – Elementor comes with a free and a Pro version.

To keep our comparison fair in terms of features offered by both of them, we’ll compare Oxygen with the Pro version of Elementor, which also includes full site editing (FSE). 

If you want to know how Elementor can boost your site’s speed, we recommend you to have a look at our dedicated article. 

Mobile KPIs and Performance Testing Tools

• Google PageSpeed Insights (Core Web Vitals, Speed Index, Total Blocking Time, First Contentful Paint, and Time To Interactive)

• WebPageTest (Fully loaded time, page size, and the number of HTTP requests on mobile – iPhone X with servers in France )

In our article, each page builder will be compared against the same content and scenarios so there can be an equal comparison.

• Scenario #1 – Page Builders With With Only a Single Line of Text

We’ll be looking at performance scores for each plugin before adding any kind of heavy content such as modules or any other advanced designs. We will simply activate both Oxygen and Elementor’s plugins on our site with one single line of text. We expect the results to be good as there is almost no content. 

• Scenario #2 – Adding Some Content

To keep things as fair and balanced as possible, we will add the same pre-built modules available for both builders.

Note: Elementor calls its modules “Widgets” while Oxygen uses the “Composite Elements” term. 

For our audit, we are building our test sites using only common elements, namely: 

• A hero section (with the same image weighing 250 KB)
• A button (call to action with a link)
• 1 text module for the “about” section (with the same content)
• Two images (weighing 189 KB each)
• An icon list (4 icons with a line of text)
• An accordion (FAQ with 3 questions and answers)
• 3 client reviews (with the same 3 pictures weighing 116, 104 and 108 KB each)
• A pricing table (two plans)

My test site built with Oxygen	My similar test site built with Elementor

• Scenario #3 – Some Content + 🚀 WP Rocket 

Finally, we will activate the WP Rocket plugin on our test sites to check if the performance scores have improved. 

Now that we have explained how we will test the performance, it’s time to share the data!

Oxygen vs Elementor Performance Compared: Which WordPress Page Builder Is Faster?

No more suspense, let’s begin with Scenario #1:

Scenario #1 – Page Builders With Only a Single Line of Text

In this first test, we just add a single line of text using each builder’s text module.

Text module with Oxygen	Text module with Elementor

Let’s have a look at our findings: 

PSI grade with Oxygen installed (Text only)	PSI grade with Elementor installed (Text only)

I’ve summarized visually the KPIs in the table below: 

With only text, Oxygen Builder and Elementor are pretty similar in terms of performance. Elementor is creating more HTTP requests than Oxygen (13 requests for Elementor against only 7 for Oxygen).

It will be interesting to add more content and see in which direction the audit will be evolving. 

Scenario #2 – Adding Some Content

As a reminder, we built two similar pages with matching modules for the two builders. Again, we put both of our URLs in Google PageSpeed Insights and WebPageTest. The results are below: 

Page performance with Oxygen	Page performance with Elementor

Both our test sites have slowed down, which was predictable as we added some content.
Google PageSpeed Insights gives orange grades for Oxygen (77/100) and Elementor (55/100).
Oxygen performance metrics are better compared to Elementor, and I’ve summarized the main metrics in the table below: 

First conclusion: Is Oxygen Faster than Elementor? 

The short answer is yes, Oxygen is faster than Elementor. Elementor’s page takes longer to load: almost 4 seconds against 3 seconds for Oxygen’s one.

Regarding the Core Web Vitals, Oxygen is also performing better than Elementor. Oxygen Largest Contentful Paint (LCP) is 4.6 s (in red) but Elementor’s one is even worse: 10.5 s (in red, as well). 

It’s time to move to the last step of our testing process, the 3rd scenario with the installation of our powerful cache plugin: WP Rocket.

Scenario #3 – Some Content + 🚀 WP Rocket 

When activating WP Rocket, both my test sites moved to the green zone on mobile! One of the most important improvements was the fully loading time metric: it went from 2.989 s to 0.77 s for Oxygen and from 3.998 s to 0.896 s for Elementor. And last but not least: my Core Web Vitals went from red to green with WP Rocket. 

Oxygen + WP Rocket (PSI)🚀	Elementor + WP Rocket (PSI) 🚀

Here’s the final comparison table that shows both builders with and without WP Rocket:

🚀 Key performance conclusions when using WP Rocket: 

Thanks to WP Rocket, we have seen significant performance improvements happening for both Oxygen and Elementor, namely:

• We scored 100/100 for Oxygen and 99/100 for Elementor on Google PageSpeed Insights
• All my Core Web Vitals are now in the green: WP Rocket made my Largest Contentful Paint going from 10.5 s to 1.6 s for Elementor! 
•  The fully loaded time has improved (went from 3-4 seconds to under 1 second for both builders)
• The number of HTTP requests has also significantly decreased: they went from above 20 to respectively 4 for Oxygen and 7 for Elementor.
• All the issues flagged by Lighthouse are now in the “passed audits” section as you can see below. 

How to read the screenshot? 

—> Issue solved by WP Rocket 

—> Issue solved by Imagify

#Disclaimer about image performance: I had only three remaining issues on Google PageSpeed Insights which were “Serve images in next-gen formats”, “Efficiently encode Image”  and “Properly Size Images”. I simply activated the Imagify plugin to compress and convert my images to WebP: which made the issues disappear. 

WP Rocket made both our websites skyrocket and we are going to show you the WP Rocket features we used to boost the speed of Oxygen and Elementor. 

How To Speed Up Oxygen And Elementor with WP Rocket

To speed up any websites built with Oxygen and Elementor, Lighthouse recommends using a powerful cache plugin to optimize your code and your images:

Thankfully, WP Rocket ticks almost all the boxes flagged by Lighthouse when it comes to improving performance. As seen in our performance audit, WP Rocket significantly speeded up our test sites (we went up to 99/100 and 100/100 with Elementor and Oxygen on PSI).

In fact, WP Rocket automatically applies 80% of web performance best practices. To go further, here are the most powerful features that helped speed up both Oxygen and Elementor:

• Caching and Gzip compression – WP Rocket is a powerful cache plugin that comes with caching of all the pages including for mobile visitors. It also decreases bandwidth usage thanks to the automatic GZIP compression upon activation. 

• LazyLoad – In the Media tab, we implemented lazy loading on all of our images (testimonials, hero header, etc.). This optimization technique aims at loading only the images actually being viewed by the users. 

Note: Lighthouse also recommends using the next-gen format (such as WebP) for your images. Check out Imagify if you want to compress your images and convert them to WebP. 

• Remove Unused CSS, Minify and Combine CSS files, Optimize CSS Delivery – These options removed unused CSS, combined and minified critical CSS, and optimized CSS delivery.

• Minify JavaScript files, Load JS deferred and Delay JS execution – These features minified, deferred, and delayed JavaScript. In other words, they helped eliminate all the JS render-blocking issues and improve the load time of my page built with Oxygen or Elementor.
  By reducing JS execution time and delaying JS until user interaction, WP Rocket saves some resources and prioritizes what needs to be displayed first.  

Finally, make sure to opt for a fast and reliable hosting provider when starting your next WordPress project with the page builder of your choice. 

Now that we are done with our performance reports let’s explore the similarities and differences between Oxygen and Elementor. 

Choosing Between Oxygen vs Elementor: Built-in Performance, Key Features, and Pricing

Both builders are great advanced drag-and-drop page builders for WordPress developers, but how do they compete in terms of features? Clean code, a lean interface, and cutting-edge design possibilities are a must-have nowadays, but having built-in performance optimization features can really help to speed up your site. So, what does the “native” performance landscape look like for Oxygen and Elementor? We are about to find out. 

Built-in Performance Features (Oxygen) 

• Oxygen Builder is built with the philosophy of only loading what is needed and when it’s needed.
• It creates very clean HTML code in order to avoid bloated code. Other builders create large numbers of nested divs even for simple elements like H1, H2 headings, for instance. 
• There is a “Bloat Eliminator” tab within the oxygen settings: 

• A CSS Cache feature is also activated by default:

Built-in Performance Features (Elementor)

• Elementor also comes with the feature to load your website faster with dynamic assets loading without unnecessary code. Since Elementor 3.0, the dynamic CSS loading and rendering mechanism has been improved. 

• When a page is created and visited for the first time, Elementor creates a cache of all elements with dynamic values. This is great for a website built with ACF for instance, that needs to load a lot of dynamic content and styling.

Key Similar Features

• Visual page builders have intuitive interfaces that are easy to use. Custom elements (widgets and modules) are located on the left for both builders:

Oxygen Interface (developers look-and-feel)	Elementor Interface(slightly more user-friendly)

• Ability to design WordPress posts and pages without any coding – both builders offer powerful styling for each module including an “advanced” tab with CSS options. 

Oxygen Styling Interface	Elementor Styling Interface

• Impressive libraries of responsive templates, that you can simply install and replace with your content. 

Oxygen demo sites (Design Sets)	Elementor demo sites (Library)

• Entirely customizable pre-made sections for adding headers, sliders, call-to-action buttons, contact forms, testimonials, and much more to your WordPress site.

Pre-made blocks (Oxygen)	Pre-made blocks (Elementor)

Both libraries are easy to use. For example, with Oxygen, you need to select the industry first. Then you can choose to import a full page or a section: 

• Ability to create custom templates for custom post types and archives – such as the shop page in WooCommerce, 404 page, and single product layouts. 
• Full theme editing (FSE) options – design everything around the page’s content, including custom headers, footers, and other parts of your website. 
• Responsive design – each builder lets you build separate versions for mobile, tablet, and desktop:

Responsive design mode (Oxygen)	Responsive design mode (Elementor)

• Modals and Pop-ups: Oxygen calls them “modals” and the term used by Elementor is “pop-ups”. Both tools are powerful and allow you to create an overlay on your page for your users to interact with. Note: Oxygen has a steeper learning curve to style your content. It kind of forces you to learn basic CSS (which is actually great if you start making websites for your clients).
• “Global Widgets” for Elementor, and “Reusable Parts” for Oxygen – they let you both use the same page part in multiple places. That’s really handy and will save you tons of time. 
• SEO – Oxygen has built-in integration with Yoast and SEOPress in order to get SEO scores for each part of your content (it also works with RankMath via a premium third-party integration). Using Elementor can help you improve your technical and on-page SEO, thanks to the full integration with Yoast or RankMath. 
• WooCommerce Integration – these customizations include customizing from scratch the store page, product type page, product categories, shopping cart, customer account, etc. In short, everything about your store with dedicated Woocommerce blocks. Those features come with Elementor Pro, but you will need a premium WooCommerce add-on for Oxygen.

Key Different Features

• The learning curve – The learning curve is steeper with Oxygen than Elementor, and you need a few basic codes and design skills to use Oxygen. Besides, there is the logic section/div/aside/articles/nav/ when using Oxygen.
• Marketing features – Elementor Pro is integrated with many marketing tools. All you need is an API key from Mailchimp for example and you are ready to go! On top of that, integrations are pretty well documented and you can find some content online. Elementor also offers a contact form builder, unlike Oxygen, where we have to download another WordPress plugin to get such a feature.
• Elementor has over 300 rich and varied modules and templates that are included in each Pro version. To access the library of Oxygen, you’ll need to use the most expensive plan.
• The users’ target is slightly different – Oxygen Builder offers more developer options, is much more manageable, and is cheaper for web developers. Elementor and Elementor Pro are made for users who want to create their website in a fun way and have little or no knowledge of HTML and CSS coding. 

Note: we present Oxygen as a “framework for developers” but if you are an advanced developer, you can still use Elementor Pro for your next project. All the features are great, and you can also tweak the design in any way you want.

Pricing

The first difference is that you can have a lifetime license with Oxygen but not with Elementor, which only offers yearly memberships. 

With Elementor, the price depends on the number of websites you will build, the level of support you expect, and if you want to be on their Experts Network Profile or not. The first package starts at $49 / year for one website and $999 / year for 1000 websites.  

As mentioned previously, Oxygen is more about a one-time payment system. To unlock the WooCommerce features, the Gutenberg integrations, and the Composite Elements (library access), you need to get the Ultimate package: $349 for a lifetime account. 

Overall, Oxygen is much cheaper than Elementor because you don’t need to make any yearly payments. This allows you to buy more advanced web tools and dedicate a budget for the speed optimization of your WordPress site. 

Wrapping Up

In conclusion, Oxygen and Elementor both have their pros and cons, but when it comes to performance Oxygen tends to be better. The choice depends on your needs as well as what type of site-building experience you’re looking for: a developer approach with Oxygen or a more “user-friendly” one with Elementor. 

When it comes to your website, remember that you should use a builder that’s powerful and fast because speed matters and directly impacts the user experience. Thankfully to boost your Lighthouse performance score, you can use a performance plugin like WP Rocket. As presented in our audit above, thanks to WP Rocket we got a 99/100 performance score on mobile for Elementor and we even scored a 100/100 for the site built with Oxygen!

Conclusion of the audit: if you absolutely want to use Elementor which is a bit slower than Oxygen, WP Rocket will help you stay on track and improve the performance of your WordPress site. 

Which page builder are you currently using? Have you tried WP Rocket to speed it up? You are not taking any financial risks here: if your performance score does not improve on Google PageSpeed Insights – which we doubt – we’ll gladly provide a refund if you request it within 14 days of your purchase.