Changing our processes and learning a new tool is always a pain, something we avoid if possible. But we also want to make sure we are recommending the best tools to our clients and setting them up on a website platform that will serve them well for several years.
So that is why we have decided to switch to Oxygen Builder!
For many years, we have been using Beaver Builder for all websites we build but our testing confirmed that Oxygen Builder produces cleaner code and a higher mobile speed score.
Why is Oxygen Builder Better than Beaver Builder?
We ran a test to validate our research that Oxygen Builder seemed to be a better tool for building WordPress websites.
We built a long sales page for a client following our normal process building with Beaver.
Then we created an exact copy of this sales page building with Oxygen.
This page has many images, lots of sections with different layouts and a video.
Average scores out of the box, with no caching or lazy loading in place.
Beaver got 41 mobile PSI and 85 desktop PSI and 63 desktop GTMetrix
Oxygen got 32 mobile PSI and 79 desktop PSI and 75 desktop GTMetrix
With WPRocket Caching and lazy loading enabled Oxygen steams ahead!
Beaver got 48 mobile PSI and 91 desktop PSI and 82 desktop GTMetrix
Oxygen got 84 mobile PSI and 83 desktop PSI and 83 desktop GTMetrix
But something seemed odd, why did Beaver have a better desktop score?
I realised that what we were testing was a landing page with no header or navigation.
A sticky header with navigation is typical of most of our client’s websites, and this adds a bunch of code at the top of the page.
How clean the header code is would make a big difference to this test of identical pages. So we added that and tested again (and changed to mobile test on GTMetrix).
With a sticky header and page navigation, the winner is clear.
Beaver got 49 mobile PSI and 81 desktop PSI and 69 Mobile GTMetrix
Oxygen got 80 mobile PSI and 85 desktop PSI and 71 Mobile GTMetrix
The page built by Oxygen had a third of the number of lines of code compared to the Beaver page. It is this simplified code structure which gives it better performance.
Oxygen works differently to traditional page builders (Bakery, Divi, Elementor, Beaver etc). Oxygen doesn’t use the theme files, so you just keep the default wordpress theme installed. Oxygen uses the Gutenburg default wordpress editor so it is easy to edit the content of a blog post or product page for example.
Oxygen is perhaps not as user friendly as Divi or Elementor for the other page layouts and sections, but it is still user friendly and simple to use after a quick tutorial to learn where things are. You don’t need to learn code.
But really, as a business owner, you shouldn’t be fiddling around trying to build or adjust your website by yourself. And there are some things that developers can do with Oxygen which help it perform even better than you would achieve with just the drag and drop builder.
Should You Do the Switch Too?
Switching your website to Oxygen is not a small task, it will require rebuilding most of the pages, templates and layouts on your website. A project you might not be ready for just yet. But if your website is due for a refresh soon anyway I would strongly recommend you consider building with Oxygen. And if you are not ready now, keep it in mind for later down the track when you do need a rebuild.