Why Oxygen Builder is our Design Tool of Choice for WordPress in 2021



As web designers & developers working off the WordPress platform, there are many ways to construct and manage websites. These usually include custom-coded builds using HTML & PHP, designing upon templates, or even JavaScript frameworks that combine with WordPress as a Headless CMS. In recent years, page builders have seen a major surge in popularity. This is mainly due to their ease-of-use, and the speed by which they allow websites to be built. expressive use Oxygen Builder with WordPress as our workflow of choice - read on to learn why.

* expressive don't share any affiliation whatsoever with Oxygen Builder.

Oxygen Builder is Conducive to High Performance

While coding a website, its overall performance ought to be at the forefront of each developer's mind.

"Performance plays a major role in the success of any online venture. High-performing sites engage and retain users better than low-performing ones."

https://web.dev/why-speed-matters/

Keeping users on your website is imperative to maximising the impact of your digital presence. Core to this is the user experience, which is heavily influenced by performance signals.

Per MDN Web Docs, the measurement of web performance includes:

  • Reducing overall load time;
  • Making the site usable as soon as possible;
  • Smoothness and interactivity;
  • Measuring the actual and perceived speeds of an application.

In terms of performance metrics, Oxygen Builder consistently comes out on top of its most popular competitors:

A significant trade-off associated with page builder designs is the inefficiency of the code they’re built with. Essentially, page builders generally cause ‘bloat’ by utilising unnecessary style sheets, scripts and extra assets by default. Websites designed with the likes of Divi and Elementor for instance, are far more susceptible to encountering performance issues than a cleanly coded build. See the below chart for a graph comparing CSS & JavaScript quantities loaded on blank pages built with Oxygen Builder, compared to its competitors:

The fact that Oxygen typically loads only the necessary scripts and styles required by each website design is testament to its overall efficiency.

Supplementary to Oxygen’s pro-performance features is its ‘bloat eliminator’ tool in the settings pane. This provides the option for users to disable WordPress-default scripts and styles that may be considered surplus to requirements:

Note the performance scores expressive are able to achieve with a development stack of Oxygen Builder & self-hosted WordPress:

Oxygen Allows a Professional Developer Workflow Within an Appealing User-Interface

A gripe that web professionals often have with WordPress is its restricted development UI. Unless supplemented by a visual page building plugin, the backend can be arduous to build upon if you’re not a seasoned developer. Considering the industry standard that is the WordPress content management system, the aforementioned issues don’t outweigh the countless positives. In saying this, the emergence of excellent WordPress alternatives such as Webflow have resulted in the transfer of many sites toward the latter. As seasoned users of both Oxygen and Webflow, expressive believes a majority of Weblow’s benefits are enjoyed in the Oxygen ecosystem. This is especially evident in terms of code quality and design versatility.

Code Quality - Oxygen Outputs Only What You Need

See below: a comparison in code output used for a single heading. Elementor (left), Oxygen (right):

Viewers of a particular web page aren’t generally concerned by what’s happening under its hood, unless they’re a highly inquisitive developer. As we’ve touched on, however, the technical layout of a page absolutely does affect its performance. With excessively nested <div> tags, developers have their work cut out for themselves when trying to select CSS for the most minor of changes. In contrast, default Oxygen <h1> output is clean and concise.

While the likes of Divi, Elementor and WPBakery facilitate a streamlined initial build, the upkeep often feels like an uphill grind.

Minimising Elements in the Document Object Model (DOM)

It’s advised by Google to avoid excessive DOM sizes in web pages. According to Google Developers, a substantial DOM ‘tree’ can cause issues with:

  • Network efficiency and site load performance;
  • Runtime performance - compromising a page’s interactivity;
  • Memory performance.

In terms of suggestions on the matter, Google advises that DOM objects (such as HTML tags) be used only when needed. Considering that Lighthouse flags DOM trees in excess of 1500 nodes, employing most page builders for complex builds may be considered inefficient.

Endless Design Possibilities Exist With Oxygen

Oxygen’s development interface is simply unmatched. Right off the bat, the UI draws similarities to Webflow, with HTML elements readily available in their raw format. This is especially helpful with programming to semantic HTML conventions:

In terms of on-page editing, expressive are yet to encounter a setup as extensive as Oxygen's. Navigating between structural elements and altering properties is seamless, with plenty of scope for customisation. Responsive controls are highly workable, with media queries not required unless you're extra particular. If you're intent on adding some dynamism to your web pages, Oxygen enables the additions of vanilla JavaScript, as well as PHP.

Oxygen's Value for Money is Outstanding

One-time pricing for Oxygen Builder licences range from 99-169 USD (as of January 2021), depending on your needs. Many competitors charge more than this figure, but on a yearly, auto-renewing basis.

In Conclusion.......

It isn't even a contest. Oxygen thrashes the competition in terms of overall performance, customisation, reliability and end-user experience. expressive highly recommends its use, and encourage all WordPress professionals to employ it within their front-end workflow.