This article is going to take a look at the backend loading time of Oxygen Builder. Many people say this as a major downside of this WordPress PageBuilder, so we decided to test it out on several different devices. Let's see what was discovered.
First, we will compare different browsers on the same device. Then, we will compare different devices using the same browser. This should allow us to identify not only which devices load Oxygen Builder the fastest, but also which browsers are best for this task.
We will be excluding testing different hosting set ups as that adds a ton of complexity to this comparison. Also: it's a well-known fact that if you are using cheap hosting, you'll have slow loading times on both the front end and back end of any WordPress website. It's completely on you if this is the case. (However, we may revisit this in the future).
Our test subject is a relatively standard oxygen builder website created by us, for our audience. Let's take a look at the initial performance of the page, size, and additional aspects.
This test website is hosted on a dedicated DO Premium server, with 2GBs of RAM, and standard settings. It's managed by Cloudways, which is our recommended host for speed, cost, and support. At the time of testing, we had not completed any additional speed optimization on the site. Server settings were untouched since spinning up the instance.
Side note: this is a great server option for development and low traffic sites, that you can easily scale up when launching. Use code ISOTROPIC for a discount on Cloudways when signing up, and get a 3 day free trial (no CC).
The page tested is the homepage of the website. At time of testing, it looked like so:
The main elements of the page that were loading were an Oxygen Builder menu element, a custom search bar, and easy posts grid of demo posts (the first section), a WSForm Oxygen element, and an OxyExtras carousal with a repeater within. This repeater had over nine posts, and dozens of conditions based on MetaBox fields.
The page was public as a deals.isotropic.co subdomain DNS was proxied through Cloudflare.
The total page size was 5.05MB. This was primarily due to using an optimized images at the time of testing. Please remember this is an early stage development website (I promise we'll make it fast before going live 🙂 ). I believe that this type of website is the best way to test the back and loading speed of the Oxygen Builder as it simulates a normal development environment.
Plugins in use were as follows:
|BetterLinks||Ultimate plugin to create, shorten, track and manage any URL. Gather analytics reports and run successfully marketing campaigns easily.||WPDeveloper||Active||1.2.7|
|BetterLinks Pro||Get access to Individual Analytics, Role Management, Google Analytics Integration & many more amazing features to track & run successful marketing campaigns.||WPDeveloper||Active||1.1.0|
|Better Search Replace||A small plugin for running a search/replace on your WordPress database.||Delicious Brains||Active||1.3.4|
|Disable Admin Notices Individually||Disable admin notices plugin gives you the option to hide updates warnings and inline notices in the admin panel.||Creative Motion||Active||1.2.6|
|Disable Gutenberg||Disables Gutenberg Block Editor and restores the Classic Editor and original Edit Post screen. Provides options to enable on specific post types, user roles, and more.||Jeff Starr||Active||2.5.1|
|dPlugins DevKit||Plugin crafted for dPlugins instalations and debuging||devusrmk||Active||1.1.2|
|Elastic Email Sender||This plugin reconfigures the wp_mail() function to send email using API (via Elastic Email) instead of SMTP and creates an options page that allows you to specify various options.||Elastic Email Inc.||Active||1.2.3|
|Favorites||Simple and flexible favorite buttons for any post type.||Kyle Phillips||Active||2.3.2|
|Hydrogen Pack||A Pack of time saving Oxygen Builder enhancements||Clean Plugins||Active||1.3.5||Our Review|
|MalCare Security - Free Malware Scanner, Protection & Security for WordPress||MalCare Security - Free Malware Scanner, Protection & Security for WordPress||MalCare Security||Active||4.63|
|Meta Box||Create custom meta boxes and custom fields in WordPress.||MetaBox.io||Active||5.4.8||Our Review|
|Meta Box AIO||All Meta Box extensions in one package.||MetaBox.io||Active||1.15.1|
|Nextend Social Login||Nextend Social Login displays social login buttons for Facebook, Google and Twitter.||Nextendweb||Active||3.1.2|
|OxyExtras||Component Library for Oxygen.||OxyExtras||Active||1.3.8|
|Oxygen 3.9 Beta 2||BETA. USE AT YOUR OWN RISK.||Soflyy||Active||3.9 Beta 2|
|Oxygen Elements for WooCommerce||Build beautiful WooCommerce websites.||Soflyy||Active||1.4|
|OxyMade||Tailwind CSS Based, Utility class powered CSS Framework & Tools for Oxygen Builder.||Anvesh||Active||1.5.2||Our Review|
|Really Simple SSL||Lightweight plugin without any setup to make your site SSL proof||Really Simple Plugins||Active||5.1.2|
|Redirection||Manage all your 301 redirects and monitor 404 errors||John Godley||Active||5.1.3|
|Resize Image After Upload||Automatically resize uploaded images to within specified maximum width and height. Also has option to force recompression of JPEGs. Configuration options found under Settings > Resize Image Upload||ShortPixel||Active||1.8.6|
|Scripts Organizer||Advanced Code editor for Wordpress||dPlugins||Active||3.0.0 Beta 2||Our Review|
|SearchWP||The best WordPress search you can find||SearchWP||Active||4.1.22|
|SearchWP Live Ajax Search||Enhance your search forms with live search, powered by SearchWP (if installed)||SearchWP, LLC||Active||1.6.1||Our Review|
|SearchWP Metrics||Advanced search metrics from SearchWP||SearchWP||Active||1.4.0|
|SearchWP Shortcodes||Provides Shortcodes that generate both search forms and results pages for SearchWP search engines||SearchWP||Active||1.8.2|
|Shareaholic - Grow and Engage Your Audience||Shareaholic’s official WordPress plugin allows you to add Award-Winning Social Share Buttons, Related Posts, Content Analytics, Ad Monetization, and more to your website.||Shareaholic||Active||9.7.1|
|Swiss Knife||The first plugin you should install when the Oxygen's default is not enough.||dPlugins||Active||1.3.7||Our Review|
|WP File Manager||Manage your WP files.||mndpsingh287||Active||7.1.2|
|WP Grid Builder||Build advanced grid layouts with real time faceted search for your eCommerce, blog, portfolio, and more...||Loïc Blascos||Active||1.5.9||Our Review|
|WP Grid Builder - Meta Box||Integrate WP Grid Builder with Meta Box plugin.||Loïc Blascos||Active||1.0.0|
|WP Grid Builder - Oxygen||Integrate WP Grid Builder with Oxygen plugin.||Loïc Blascos||Active||1.0.2|
|WS Form PRO||Build Better WordPress Forms||WS Form||Active||1.8.125||Our Review|
|WS Form PRO - User Management||User Management add-on for WS Form PRO||WS Form||Active||1.4.1|
*We review plugins that we actually use, as evidenced here :).
It is important to take note that we were using the Oxygen Builder 3.9 Beta 2. We also had the WooCommerce elements installed, but WooCommerce itself was not at this point.
As per the reports of developers, this version of Oxygen was almost twice as fast to load on the backend as the previous.
Additionally, I want to note that OxyExtras, WPGridbuilder, OxyMade and WSForm all added elements to the backend of the builder. Swiss Knife, a skin/workflow tool and Hydrogen Pack are also loading into the backend.
Essentially, this test subject is a page that many who use Oxygen Builder have experience loading. There are several add-ons, extensions, and scripts that will load on the backend from both the builder and third-party plug-ins.
Finally, here's a quick glance at my WiFi:
This test is administered by directly loading the Oxygen Builder from clicking "edit with Oxygen" on the page backend.
The button is hit, and the timer starts there. Once the cog icon stops and the browser is fully initialized, the test stops.
Please note that this is not completely accurate as I am hand timing this using an iPhone stopwatch, but it should give a good approximation of which devices and browsers load this plugin the fastest. It's also worth noting - the page has been loaded previously on the fontend, but never on the backend builder as an admin. I'm getting to the builder by loading deals.isotropic.co, going to the top bar, clicking edit page, then clicking the edit with oxygen button.
The goal of this test is not a speed run. It is to get truly real world data on the back and loading times of this plug-in to see if concerns are warranted with the speed and efficiency. Instead of looking at the actual time figures, consider looking at the differences between these numbers when it comes to device and browser.
Finally, I've included Amazon links (affiliate) in case this inspires anybody to impulse buy 😆.
First, let's try loading it on all browsers installed on my Mac Mini M1. Stats will be restated when testing by device, but this is a 2020 M1 Mac Mini with 8GBs of ram, running Big Sur V11.3.1. This is my "daily desktop".
We start with a browser test to determine which one is the fastest for loading Oxygen. We will use this browser when testing different devices.
We test Safari V14.1, Chrome V95.0.4638.69, and Firefox V94.
Chrome was the obvious outlier here. I ran it again to see if there was a hiccup in the loading - it took just around 16.5 seconds to load the second time, so I think the average is a relatively accurate number.
The take away here is that Firefox is the fastest browser. This is been a topic discussed in the official Facebook group for sometime now, so hopefully this empirical data proves that you should be using this browser. Personally, Firefox is my favorite browser to develop websites in as it has a ton of high-quality front end developer tools. However, when compared to chrome it is lacking in security and performance audits.
We will use that browser for the device testing.
For this test, we are going to use devices all on the same Wi-Fi network, using the same version of Firefox, loading the same page as before. The differentiating factor will be the device and the test statistics behind it. Here's the lineup.
Loads Oxygen in 05.59 seconds.
Loads Oxygen in 11.54 seconds.
Loads Oxygen in 11.96 seconds.
Loads Oxygen in 16.19 seconds.
Loads Oxygen in 9.66 seconds.
Loads Oxygen in 5.43 seconds.
All devices are plugged into a battery charger during testing. The Firefox browser is the only open app/program. You may be wondering why I have access to all of these devices. I don't personally own every single one of these electronics, instead I have access to rent them from a local university.
First, as mentioned several times, this is an imperfect test. It wasn't performed in a lab environment. Pages with less dynamic data will load quicker in the backend builder, and pages with more dynamic data will load slower. Same for images, DOM elements, and scripts.
I suggest using these numbers arbitrarily. Instead of saying Oxygen will load in X.XX seconds for you, use the numbers to compare the browser and devices.
As the Facebook consistently states, Firefox is the fastest browser to load Oxygen Builder. I personally use Firebox developer edition.
The fastest two devices are the newest Apple devices using Apple Silicone. This makes sense; these processors are much faster than pretty much anything else on the market; and they're not that pricey. The base M1 Mac Mini is coming in at under $600 refurbished, and the M1 Macbook Air is $899.
It also looks like the more powerful the processor, the better the loading time of the backend Builder. For example, a laptop with 64GBs of RAM loads similarly to one with 16GBs of RAM. As processor power falls, so does the loading time of the builder.
I would expect that trying to load the builder on a Chromebook, or another device with low stats may be difficult.
The average Oxygen Backend loading time for this test was about 10 seconds for a large, unoptimized page, with a ton of dynamic data. Additionally, there were several addons that loaded elements of their own on the page, along with a hefty collection of custom, global CSS. This is very acceptable in my book. It becomes even more acceptable when changes the CSS classes and global options can be synced without needing to reload the builder with the Collaboration plugin.
As a webdev who uses Oxygen for most projects, the speed of the builder has never impacted me, but I wanted to seriously take a look at what the best setup was for it.
If you have any comparison numbers of your own, feel free to post them in the comments section below.