
## what is oxygen builder?

Oxygen Builder is a tool that enables you to build entire WordPress websites.
It is one of the best tools out their in terms of performance

## what is bricks builder?

[bricks builder](https://bricksbuilder.io/) is a WordPress theme that helps you build performant WordPress sites.

## why bricks vs oxygen ?!

For a long time, oxygen builder was the best tool to build performant websites.
you can build really fast websites with no bloat at all.
now [bricks builder](https://bricksbuilder.io/) comes in and provides this amazing tool that you can use to build a very close website in terms of performance to oxygen.

bricks provide a better interface than oxygen, is easier to use for non-coders, and amazing output site in terms of performance.

I'd say it's the only competitor to oxygen right now! even with this very early release. the roadmap is very promising as well.
the tool is built on vueJS which is amazing.

## real-life test comparison

here I'm gonna build a login page in both tools and test out the results to get a better idea about the differences.

**the design i'm gonna build** :

![login-page-desing](/images/login-page-desing.jpg)

## design results with minimal customization

### Oxygen

![oxygen-design-preview](/images/oxygen-design-preview.JPG)

### Bricks

![brick-design-preview](/images/brick-design-preview.JPG)

## Google PageSpeed Insights test

| Metric                   | Oxygen builder | Brick builder |
| ------------------------ | -------------- | ------------- |
| First Contentful Paint   | 2.5s           | 2.8s          |
| Speed Index              | 2.5s           | 2.8s          |
| Largest Contentful Paint | 2.6s           | 2.9s          |
| Time to Interactive      | 2.5s           | 2.9s          |
| Total Blocking Time      | 0ms            | 40ms          |
| Cumulative Layout Shift  | .26s           | 0             |

### Oxygen

![Google PageSpeed Insights for oxygen builder](/images/Google-PageSpeed-Insights-for-oxygen-builder.png)

### Bricks

![Google PageSpeed Insights for bricks builder](/images/Google-PageSpeed-Insights-for-bricks-builder.png)

as you can see both results are very close and the differences are very small!

## Gtmetrix test

| Metric                   | Oxygen builder | Brick builder |
| ------------------------ | -------------- | ------------- |
| Grade                    | A              | A             |
| performance Score        | 94%            | 94%           |
| Structre Score           | 90%            | 92%           |
| Largest Contentful Paint | 1.3s           | 1.3s          |
| Total Blocking Time      | 0ms            | 0ms           |
| Cumulative Layout Shift  | 0              | 0             |

![Gtmetrix test comparison between brick builder and oxygen builder](/images/Gtmetrix-test-comparison-between-brick-builder-and-oxygen-builder.png)

## W3C validator

| Metric   | Oxygen builder | Brick builder |
| -------- | -------------- | ------------- |
| Errors   | 1              | 0             |
| Warnings | 2              | 0             |

### Oxygen

![W3C validator for oxygen builder](/images/W3C-validator-for-oxygen-builder.png)

### Bricks

![W3C validator for Bricks builder](/images/W3C-validator-for-bricks-builder.png)

`on a bigger sites oxygen gets a lot of these Warnings and errors!!`

## final thoughts

if anything to say after these results, bricks builder is a very promising tool with some advantages over the already well knows and well-built oxygen builder.
and may even be the better option in the very near future!
I'm so excited to see the upcoming updates for the tools!

check out [bricks builder](https://bricksbuilder.io/) prices, they are offering 40% off right now as early-stage, and prices will eventually go up very soon.
and [here](https://oxygenbuilder.com/pricing/) for oxygen prices

oxygen offers some extra elements as a separate plugin called composite elements for an extra cost. most of these elements are already in bricks builder at no extra costs!.


WordPress

Posted in WordPress