Supercharging Oxygen Builder to a Perfect 100⚡

Step 1: install a test site

Another day, another site optimisation. This time it’s the turn of Oxygen Builder. So, first things first, let’s set up a test site and make it as complicated as we can. So, first things first, let’s set up a test site and make it as complicated as we can.

There are lots of nice designs to choose from:

I choose “One Page 2” as it at least has a slider on it. I then use the Oxygen editor to duplicate all of the elements on the page, and add in the JavaScript for Google Tag Manager and Google Analytics (as I do in all the tests).

Step 2: Test Initial Performance

Not bad! This is the highest initial score we’ve had so far in all the tests (DIVI got 32, WP Bakery got 55, Elementor scored 61, Elementor Pro got a 68, Avada scored 64 and Astra came in at 66).

Step 3: Let’s Optimise!

Ok, let’s get started!

• I locally host and compress the images using Compress X

• I’ll delay load the render blocking JS and remove any unused CSS using SpeedifyPress
• I’ll lazy load below the fold DOM elements using SpeedifyPress
• I’ll cache using SpeedifyPress and its Cloudflare worker script

• Next, we’ll sort out any render blocking fonts with OMGF
• I’ll also switch to using System Fonts on mobile using SpeedifyPress
• For good measure let’s lazy load images using SpeedifyPress
• We’ll also locally host the gtag.js script

Step 4: Tweak and Refine

Now, as usual, there are a few tweaks we need to do to make sure everything is displaying correctly:

• The slider CSS isn’t displaying correctly so I add slider as one of the selectors to always include

• And there’s some JS for the slider that’s loading too early, we’ll make sure it loads last

That’s it, the page loads perfectly now. And there we go, one more 100 to add to the collection! ✨ You can check it out for yourself here:

https://oxygen.speedifypress.com

---