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.
|Breakdance ThemeBuilder tests with No Caching
|Breakdance ThemeBuilder tests with Full Caching enabled
|BrkBBGalM&D||Not available bug between Breakdance and BeaverBuilder|
|BricksBuilder tests with No Caching
|BricksBuilder tests with Full Caching enabled
|Oxygen Builder tests with no caching|
|Oxygen Builder tests with Full Caching enabled|
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.