Kadence Theme – Hitting the High Notes of Performance? 🎶
Can this popular WordPress theme be fine-tuned to a perfect 100 on Google PageSpeed Insights? Let's find out.
For this adventure in WordPress optimization, our focus is on the Kadence theme. Kadence is often praised for its lightweight, speed-friendly design – but can it hit a perfect 100 score on Google PageSpeed Insights without breaking a sweat? In this article, I put Kadence under the microscope, taking it from stock setup to lightning-fast.
Why Kadence? Well, after tackling builders like Divi, Elementor, Oxygen, Avada and more in previous installments, Kadence seems like a promising contender for a hassle-free high score. Will Kadence live up to its performance-friendly reputation, or will it hit a few bumps on the road to 100? Let’s jump in …
Step 1: Install the theme and set up the test site
First things first, I spun up a fresh WordPress install and activated the Kadence theme. To keep things realistic, I created a demo page using one of the Kadence starter themes. This site is brand new and built solely for this test. The idea is to mimic a real-world site running Kadence with default settings.
To keep things realistic, I also added in Google Tag Manager and Google Analytics (just like with all the other tests). I also duplicated the page content a few times to ensure a realistic amount of DOM elements, and make sure we had a couple of JS components in there (a slider and an accordian).
With everything set up, it’s time to see how Kadence performs right out of the gate.
Step 2: Test initial performance
So … the initial performance score came out to 72/100 on mobile. Not bad, not bad at all! — in fact, Kadence’s out-of-the-box score is the most impressive one we’ve seen so far. (Oxygen builder got 69, DIVI got 32, WP Bakery got 55, Elementor scored 61, Elementor Pro got a 68, Avada scored 64 and Astra came in at 66).
This is a fantasic starting point, but to reach 100, we’ll obviously need to push further. Time to break out the optimization toolkit!
Step 3: Turn on the optimisations!
If you’ve been following our series, you know the drill: now we unleash our go-to optimisations to give Kadence the speed boost it needs. This involves a couple of trusty tools and tweaks:
SpeedifyPress Plugin: I installed and activated SpeedifyPress, my preferred performance plugin (obviously, as I wrote it… :-) that handles a lot automatically. With SpeedifyPress, I enabled its recommended settings:
Remove Unused CSS: This trims away any CSS not actually used on our page (Kadence, like most themes, comes with a general stylesheet; not all of it is needed for one simple page).
Delay JS: All non-essential JavaScript was set to load delayed until after user interaction. This prevents render-blocking scripts from delaying the initial paint. I excluded Google Analytics from being delayed, in-line with previous tests.
Lazy load Images: Although our demo images were already reasonably sized, SpeedifyPress ensured they were being lazy-loaded (except the very first banner image for LCP).
Font Options: I enabled the option to use system fonts on mobile (whilst preloading on desktop)
Cloudflare: Added the SpeedifyPress cloudflare worker for improved Edge caching and initial document response time
Local gtag: enabled the option to locally host the gtag.js script
Localizing Google Fonts: Kadence was pulling in fonts from Google. To eliminate that external dependency, I used the OMGF plugin (Optimize My Google Fonts).
Optimise images: the images were already pretty good here, but I moved the ones that were hosted off-site to the media library and installed CompressX to optimise them
With these optimizations in place, I ran PageSpeed Insights on mobile again to see the impact.
So, it’s a pretty clean 100, with just a few things left to tidy up.
Step 4: Tweak and refine...
So, the final stage is just having a run through the site and making sure everything is working as expected (especially the JS related functions).
Very quickly, I can see that the hamburger menu on mobile isn’t working at all. So I set SpeedifyPress to preview mode and see if any classes get added when clicking on the menu:
It looks like the show-drawer and pop-animated classes are added so I’ll add in drawer and pop- to the list of selectors to always include
OK, now it works! But I can hardly see the text in the menu.
That’s not related to SpeedifyPress, but let’s fix it quickly using Find/Replace (normally of course we’d go into the Kadence palette options and fix it there).
And that’s it! Everything seems to be working perfectly now, with a 100 PSI score! You can check it out here: https://kadence.speedifypress.com/
How to optimise your own site
If you’d like to have a crack at tweaking your own site for performance, then read through My List of Tools and Resources.
If you’d like access to SpeedifyPress, you can subscribe below for a free single site license: