Benchmarking Breakdance, Bricks Builder and Oxygen Builder

It is  interesting times in WordPress Frontend Development as UI vendors contend for developer loyalty by offering new Layout frameworks [Flexbox, CSS Grid, 3D Float, etc] , more templating features/flexibility,  novel plugin consolidations and better runtime performance both while editing and running in multiple display modes. Yes,  developers and agencies, you have a lot on your  decision plates as WordPress UI vendors contend for the estimated 670 million WP websites worldwide. With that in mind  a benchmarking tour  of three of the hottest, advanced WordPress ThemeBuilders should be timely and of interest. The biggest portion of the benchmarks would be in the performance measures with deliberate effort to eliminate the caching controversy seen in the Gutenberg Builder vs PageBuilders false performance claims from 2 years ago. WordPress Performance Optimization is already challenging enough without misinformation leaking in. Finally three worthy tools[Brizy, Divi, SeedProd] were not included in the tests for reasons of time, cost, and learning requirements. 
These benchmarks should provide 3 important tech insights for  WordPress users:
1 – Test the new Advanced Themebuilders for basic ease of development – we used latest copies of: Breakdance 1.21, BricksBuilder 1.61, Oxygen Builder 4.4.
2 – Test how well each of the Advanced ThemeBuilders work with three popular PageBuilders. Specifically to create posts and pages inside the new Advanced ThemeBuilders using Elementor 3.10.1, BeaverBuilder Standard 2.6.2  and Gutenberg Builder 15.0 on WP6.1.1
3 – Run speed benchmark with and without caching on the InstaWP Cloud sites which have fast response times: The 3 test websites are accessible for your own timings.
OxygenBuilder benchmarks can be checked  here with your with Pingdom, Lightspeed, etc
BricksBuilder benchmarks can be checked  here with your with your favorite speed tester.
Breakdance benchmarks can be checked  here with your with Google PageSpeed etc.
Overview of the 3 Advanced ThemeBuilders
All three of the Advanced ThemeBuilders deliver solid Frontend UI features. with varying levels of getting started help and overall ease of use. Here are our  5-weeks-in grades:
Bricks has the best getting started process  inside your web server with Breakdance close behind as it prefills some Header Builder, Form Builder,  and Sitewide CSS Styles with basic placeholder settings. Breakdance now has a large Design Library of code templates to help newby users. In contrast,. Oxygen with its 2 year head start has both a great Design Library and some solid video resources. But caution – be sure to check out this Oxygen error tips video.
As for ease of use, this developer found the layout logic and associated UI for  Bricks Builder and Breakdance the easiest to follow with Oxygen’s heavy CSS orientation more challenging for coding-averse users. But again,  put on your thinking caps, for all 3 ThemeBuilders, ease of use will be in direct proportion to how much time and effort you devote to testing features by doing the many basic tutorials.
How ThemeBuilders Integrate with PageBuilder  & other WP Plugins
One of the primary reasons for these benchmarks tests has been to see how well the new advanced ThemeBuilders integrate some of the popular PageBuilders[16 high performance PageBuilders could be tested – but sheer volume of work reduced the number to the 3 most popular]. But another reason to examine these advanced tools is how they are promoting  the consolidation of functional features throughout WordPress themes and plugins. Here are some examples:
1 – Backend WP performance tuning has seen  major players like CloudFlare, WP-Rocket, WP-Optimize pull together caching, image optimizations, database tuning, CDN-Content Delivery Networking, and elimination of  plugin bloat as important parts of their feature sets. But these are some of the features touted by Oxygen and Breakdance;
2 – Bricks UI editor adds 1M Unsplash images to a broader photo  and video editing repertoire with added gradient, icon, animation capabilities; Oxygen has no Unsplash images but adds more CSS customization to its mix
3 – All three Advanced Builders roil the CPT – Custom Post Type market with new  filter conditions, interaction triggers, query-loop controls along with alliances with ACF, Metabox, Crocoblock and other players in the dynamic data business. These capabilities also upset 3rd party plugin positions;
4 – All three Advanced Builders have routines for integrating with Gutenberg with Oxygen and Bricks offering not only interfaces for joint use but also routines that convert from their native code to Gutenberg or in the reverse direction – from Gutenberg into their native code;
5 – All three Advanced Builders are following the Elementor strategy and providing Component APIs and coding tools so savvy developers can add to the list of elements/components available in their UI Editors. This  strategy has trade-offs. The 3rd parties have to stay up with Component APIs at the risk  bug or security problems while the Advanced Builder may loose some control of innovation/features;
6- If I were a testimonial, slider/carousel, gallery, events/membership or other UI plugin vendor – paying attention to what the three Advanced Builders are offering in their components would be up there in priority with scouting out Advanced AI use in WordPress.

Perhaps the biggest impact is how the three Advanced Builders  takeover many traditional Theme functions.  Customizer functions have shriveled up to a few options as Theme Stylers  and Settings are now under local/global control with greater export/import flexibility in the Advanced Builders. Also the Templates Editors are robust providing Header, Footer, Popup, Single, Archive, Error template edits. And all the of the  template editors support FlexBox as well as Bootstrap Responsive CSS Frameworks. All three of the tools are adding  CSS Grid layout frameworks. Truly Advanced ThemeBuilders have arrived.

These sophisticated layout rules provide design and layout opportunities; but the trade off is the learning curve and risk of bugs are increased. For both BricksBuilder and Oxygen, figuring out how to use the new layout effectively was non trivial. Breakdance’s dual purpose template and  builder editor helped in getting started:

Notice the Breakdance template editor is also used to customize the Elementor Gallery post. Also Breakdance just added its Design Library so users can download from the Breakdance Design Library either sample sections  or pages to get a head start on developing routines. layouts that use the many Breakdance special widgets/elements.

Both Oxygen and Bricks Builder had multi-purpose editors for templates and post/page edits using all three of our benchmark PageBuilders. So, yes all 3 ThemeBuilders allow for joint PageBuilder and ThemeBuilder editing.  However, Bricks Builder does not have a Design Library; rather the Bricks Library is a $150/year add-on. But Bricks does have a very complete and well organized Getting Started Guide. And like Breakdance, Bricks  Post Editor is multi-purpose and can be used  for template editing too:

So the bottom line, is all 3 advanced ThemeBuilders  supported all 3 PageBuilders in joint editing sessions. The one exception was  some Beaver Builder edits within Oxygen Builder  had notable bugs. Also, the Breakdance editor stuttered with performance lapses from time to time. Finally, be advised, all 3 ThemeBuilders with their new CSS frameworks are simply more complex to use with hefty learning curve for  many  newby users..

Benchmark Performance Test Results

These peformance results were done on Google  PageSpeed.web.dev for two reasons – first, convenience of getting both mobile and desktop score quickly and conveniently . Second, the Google tester produced more consistent repeated test score than other sites like GTMetrix and Pingdom. But we found differences in the same basic tests based on time of daya. So the PageSpeed Insights score could vary by 10-15% on repitition depending on time of day taken.

So readers can get their own test scores by going to thr BreakDance, BricksBuilder, and Oxygen test websites and running their own tests using Gtmetrix, Pingdome, or whatever they prefer to use for performance measures.

Now as for the test results, the most important result is that it pays to use cache. This was missed in the WPTavern’s performance comparion story. So it is it is encouraging to note that use of caching  and minification consistently  improved runtime speeds by 20-30% [and sometimes by over 80%]. Finally we can say among the Advanced Themebuilders Bricks scored the best performance by a wide margin with Breakdance tests being worst or confusing.

We have marked in green highlights the ThemeBuilder+PageBuilder combo that turned in the best results. Again, the caution is that all three Advanced Themebuilder are developing improved releases at a breakneck pace so expect changes in these results. For now Bricks produced the best  overall results, Gutenberg used in Breakdace produced best no cahing and fully enbaled results. Beaver Builder  produced top results in Oxygen with no caching while Elementor had the best desktop caching score usedin Bricks.

Test Rate FCP LCP TTI TBT CUMSH
Breakdance ThemeBuilder tests with No Caching
BrkOwnM 72 3.0 3.2 7.1 90ms 0.04
BrkOwnD 67 1.1 2.7 1.1 0 0.328
BrkBBGalM 56 3.3 4.4 7.4 450ms 0
BrkGalBBD 84 1.5 1.7 1.5 0 0
BrkGalElemM 79 3.0 3.0 5.2 170ms 0
BrkGalElemD 74 1.6 2.8 1.6 0 0
BrkGutGalM 85 2.5 2.5 6.6 80ms 0
BrkGutGalD 90 0.8 1.6 0.8 0 0
Breakdance ThemeBuilder tests with Full Caching enabled
BrkOwnM 79 3.3 3.6 5.1 40ms 0.04
BrkOwnD 63 1.1 4.2 1.5 0 0.389
BrkBBGalM&D Not available bug  between Breakdance and BeaverBuilder
BrkGalElemM 79 3.4 3.4 4.2 60ms 0
BrkGalElemD 74 1.1 2.1 1.6 10ms 0
BrkGutGalM 85 2.8 3.3 3.7 10ms 0
BrkGutGalD 95 0.9 1.3 0.8 0 0
BricksBuilder tests with No Caching
BriOwnM 96 1.4 1.4 2.0 20ms 0
BriOwnD 94 0.5 0.5 0.5 0 0
BriGalBBM 89 2.5 2.8 2.6 60ms 0
BriGalBBD 96 0.8 0.8 0.9 0 0
BriGalElemM 73 3.8 3.8 4.2 170ms 0
BriGalElemD 91 1.2 1.2 1.2 20ms 0
BriGutGalM 89 1.7 1.8 2.7 90ms 0
BriGutGalD 90 0.5 0.8 0.5 0 0
BricksBuilder tests with Full Caching enabled
BriOwnM 99 1.3 1.6 1.8 30ms 0
BriOwnD 100 0.4 0.6 0.4 0 0
BriGalBBM 97 1.5 1.8 3.0 110ms 0
BriGalBBD 99 0.5 0.8 0.9 0 0
BriGalElemM 98 1.3 1.4 2.4 120ms 0
BriGalElemD 100 0.4 0.4 0.4 0 0
BriGutGalM 99 1.3 1.6 3.4 60ms 0
BriGutGalD 100 0.4 0.6 0.5 0 0
Oxygen Builder tests with no caching
OxyGalOwnM 78 3.4 3.4 3.9 80ms 0
OxyGalOwnD 89 1.1 1.5 1.1 10ms 0
OxyBBGalM 79 3.4 3.6 3.4 40ms 0
OxyBBGalD 89 1.1 1.4 1.1 0 0
OxyElemGalM 64 3.9 4.0 5.8 260ms 0.007
OxyElemGalD 81 1.2 2.0 1.2 0 0
OxyGutGalM 77 3.4 3.7 3.7 100ms 0.026
OxyGutGalD 86 1.1 1.4 1.1 10ms 0
Oxygen Builder tests with Full Caching enabled
OxyGalOwnM 87 2.5 2.6 2.8 20ms 0
OxyGalOwnD 98 0.8 0.8 0.10 0 0
OxyBBGalM 87 2.8 2.8 3.2 140ms 0
OxyBBGalD 96 0.8 1.3 1.2 10ms 0
OxyElemGalM 88 2.6 2.6 4.2 150ms 0
OxyElemGalD 95 0.8 1.3 1.2 0 0
OxyGutGalM 89 2.6 2.8 3.3 130ms 0.026
OxyGutGalD 98 0.8 1.0 1.4 20ms 0

Bottom Line

WordPress Frontend UI development continues to dominatet the WordPress agenda as seen here; and here. In the meantime it appears Bricks has a lead in runtime performance, Breakdance in attention-getting feature and Oxygen Design Library functionality.But new developments to emerge among these front runners as they continue to innovate at a torrid pace.

 

Pin It on Pinterest

Share This