OK, here we go! A real world site built with the Uncode theme that has been giving its owner sleepless nights for months (years?): https://visualsitemaps.com/
It’s been a consistently poor performer in PageSpeed insights, but nothing seemed to help.
WP Rocket was no use, switching hosts to Kinsta provided a mere 2 point boost. So .. let’s see what we can achieve with SpeedifyPress…
Step 1: Install SpeedifyPress and get started
OK, let’s start by having a look through the Uncode options and turning off any options we don’t need. So, we’ll disable Adaptive Images, Synced Animations, Defer CSS Styles, In-Line Core Style and In-Line Style Custom.
So, with that done we’ll turn on all our optimisation options and see where that gets us.
So, with that done we should already have a nice improvement. But … what’s this?
Hardly any improvement at all!
Step 1b: why aren’t the optimisations working?
This is a very curious one. It seems that none of the CSS optimisations are being run and the JavaScript isn’t getting delayed. OK, so let’s turn on debugging for the JavaScript delay script and see what’s happening:
So we get to jquery.min.js, but the script never loads. Checking the DOM, it’s not had it’s data-src attribute changed to src. Weird. But shouldn’t take too long to find the cause.
... THREE HOURS LATERErrr, what else can we try? Let’s check out what the previous script that did load was, maybe that was up to no good.
I think this could be it! It’s a piece of JavaScript that’s replacing the entire document body with itself! That’ll mess with the DOM and break JavaScript delay, which means the CSS won’t get optimised either.
Right, let’s use Find/Replace to quickly get rid of it.
OK, let’s see what we’ve got…
OK, I can see this is going to be a tough one. Let’s move onto the next step…
Step 2: Tweak and Refine
Looking into the details of the report, it’s obvious that the Wistia video is a problem.
To get rid of that we’ll need to put in a facade. This will mimic the Wistia embed, but it’s really just an image with some HTML elements on top. If the user clicks it (or interacts with the page at all), the real Wistia video will load. So .. just need to quickly code up a facade and use Find/Replace to add it in…
... FOUR HOURS LATEROK, that’s the Wistia facade done! Let’s see how that helps:
Amazing! That Wistia was a real performance killer. But there’s more to be done still..
We have our old friend the Google font.
We’ll install the OMGF plugin to help with that. And then I’ll clear the Unused CSS cache so that we get our new fonts preloaded. Let’s see now…
OK, great, we’re nearly there now. But I wonder if we can do something with this critical chain.
After looking into it, we don’t need Font Awesome at all as uncode-icons handles that. And we don’t need uncodefont-google.css on mobile (as we use system fonts), so we can use Find/Replace to ensure that’s only loaded on desktop.
And … that brings up the 100
So, we’re done right? Not quite…
Step 3: Fix the janky JS and CSS
So, although the site might be loading nice and fast it’s not displaying correctly at all. We’ll need to find any CSS classes that are in use but aren’t being auto-detected. And we’ll need to try to work out what JavaScript needs to be called that isn’t (normally something that’s attached to a document ready listener or similar).
... A LONG TIME LATEROK, we got the CSS list:
and we add some custom JavaScript to handle everything that wasn’t running properly there:
So … we’re done. Well … not quite. There were some more things to tidy up:
All those tests were done on a staging site, so I moved all the SpeedifyPress settings over to the live site and retested
I set up the Cloudflare worker using the script in SpeedifyPress. This required some adjustments to get it to work nicely with Kinsta.
I fine-tuned the mobile CSS system fonts override to more closely match the desktop fonts.
With the client, we went through all the URLs in the rest of the site and made sure everything was OK. Some of the URLs had JavaScript effects right above the fold, so we excluded those from JS delay. (We didn’t optimise these pages through to 100, but they should all score well enough.)
And that’s it! So let’s check the final score on the live site:
Great stuff! We’ve brought a very tricky site in with another 100.
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 me to do it for you (like I did for this client) then please have a look here.
If you’d like access to SpeedifyPress, you can subscribe below:
And if you’re still reading…
..and you’d like to generate an awesome visual sitemap for free, then checkout this now speedy site: https://visualsitemaps.com/ (WordPress case use: generate before and after you update your plugins, no more painfully checking your site by hand!)