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. Yes,  developers and agencies, you have a lot on your  decision plates as WordPress UI vendors contend for the estimated 6 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 benchmarks would center on  new advanced features plus performance test  measures. There would be a 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.

The tests would see how well Breakdance, Bricks, and Oxygen support 3  of the most popular PageBuilders – BeaverBuilder, Elementor and Gutenberg Builder. it is important to note that  three worthy tools[Brizy, Divi, SeedProd] were not included in the tests for reasons of time, cost, and sheer work effort. 

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  6-weeks-in grades:
Bricks has the best getting started process  inside your web server with Breakdance close behind as it prefills some key components as  a 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-especially  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 well they are delivering  consolidation of plugin, theme  and other WordPress functional features .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 all 3 Advanced ThemeBuilders.
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 CPT and  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 for two reasons – first, convenience of getting both mobile and desktop test scores quickly and conveniently. Second, the Google tester produced more consistent repeated test scores than other sites like GTMetrix and Pingdom. But we found differences in the same basic tests based on time of day. So the PageSpeed Insights scores did vary by 10-15% on repitition depending on when  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.

All of the test posts used 9 optimized images in a  gallery component along with simple header blocks. Galleries tend to challenge performance results. But all of the Advanced Theme Builders plus PageBuilders delivered 2 second or less Desktop test scores when cached. By far Bricks delivered the best test scores But all the Advanced Builders  had  poor mobile test results of 2-3 times slower than desktop. However, this is partly because advanced mobile tuning with AMP, PWA, and CSS/JS were not used at all.

Perhaps the most important result is that it pays to use caching. 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 delivering  confusing results.

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 while used in Bricks.

Test Rate FCP LCP</strong 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 due to 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/td> 10ms 0
BrkGutGalD 95 0.9 1.3 0.8 0 0
BricksBuilder tests with No Caching
BriOwnM 96 1.4 1.4 .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/td> 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 has prospered becoming the number one SMBS – Small to Medium Business Sytem used worldwide with over 7 million active websites  This success has been based on a confluence of factors:
0 – Open Source core system with largely free community development & broad decision making with original creator Matt Mullenweg having the final say;
1 – Low cost, simple setup, and ongoing configuration/customization based currently on choices among a wide array of hosting services, 5,000+ themes and 50,000+ plugin extensions to select from;
2 – Ease of use epitomized by form-based  point and click, full screen operations at every  admin, backend, security, design, and page-creation process;
3 – A frontend editing system using drag &  drop design and layout  with  full screen page layout and styling;
4 – Policies  of “no coding required”, with maximum backward compatibility for minimal abandoned coding processes has been a decade long standrad practices in WordPress development;
5 – There are a host of new features such as automated responsive mobile layouts, animations attached to any component,, popup sections/forms, and scrolling special effects. The irony is that 12 PageBuilder led by Elementor, Divi, and Visual Composer among others beat Gutenberg Builder to many of these frontend design innovations. So despite a five year Core  push for Gutenberg Builder it is locked in battle for acceptance among developers and end-users.

So it is no surprise  that  Frontend UI development continues to dominate the WordPress agenda as seen here; and here. In the meantime, the 3 Advanced Theme Builder are giving Gutenberg Builder/FSE-Full Site Editor, plus the leading PageBuilders a run for the title of Next Generation WordPress Development tool. And waiting in the wings are revitalized WebBuilder tools plus Enterprise LCPD -LowCode Platform Developer tools that are making mobile and special system inroads across SMBS shops.

Meanwhile our benchmarks  tests show Bricks has a lead in runtime performance, Breakdance in attention-getting ease of use features while Oxygen Design Library gives it end usage leadership..But expect new developments to emerge among these 3 Advanced ThemeBuilders  as they continue to innovate at a torrid pace.


Pin It on Pinterest

Share This