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 PageSpeed.web.dev 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.