So, it’s time to take a look at Astra, one of the most popular themes in the WordPress ecosystem. I’ve never used it before, so this should be a fun one!
Step 1: Install the theme
This is easy! It’s one of the first themes listed in the WordPress directory, and it gives me lots of nice options for a done-for-you site. I choose a businessy-looking one.
It gave me a few options to bundle in, and I ended up with some pre-installed plugins. I wonder how they’ll affect performance?
As ever, I added in some code for Google Tag Manager and Google Analytics, because most sites are going to have those installed, right? (I used Header Footer Code Manager to get that done)
I also edited the home page to made it longer and more like a real-world homepage.
Step 2: Test initial performance
So, let’s see how this performs out the box!
A 66! Nothing surprising there at all. Regular readers will remember that prior to optimisation Elementor scored 61, its big brother Elementor Pro got a 68 and Avada got 64. So unoptimised sites scoring the 60’s is par for the course around here.
Step 3: Turn on the optimisations!
Let’s dive straight in and unleash SpeedifyPress to see how much of this it can clean up:
I turned out Unused CSS generation
I turned on page caching
I set gtag.js to host locally
I enabled all the new font preload options, whilst also setting an image preload
I enabled Javascript delay, and set js-extra inline script not to delay
I enabled the SpeedifyPress compatible Cloudflare worker
So, with all that completed, let’s see how we’re doing:
Hmmm, not bad at all. But there’s more to be done!
Step 4: Tweak and refine…
So, immediately noticeable was the 730ms of render-blocking resources. Let’s take a closer look…
Ah, a Google font. I therefore…
installed the very reliable OMGF to get the webfonts hosted locally (note that previous favourite Local Google Fonts didn’t pick up the fonts, so I switched away). Once that’s done, SpeedifyPress picks it up and preloads it properly.
Also a problem is a non-next-gen image. An easy fix…
I used the ever-handy Compress X to get the images into next-gen format
Now, what’s this one?
Ah, looks like Cloudflare is injecting it’s email obfuscator.
Pretty simple to turn that one off in Scrape Shield:
Now there’s this little annoyance:
I’ll just fix that quickly using SpeedifyPress’s Find/Replace:
Ok, now we’re up to 98
But that’s not good enough! Let’s see, what’s this..
Hmmm, looks like the asta google fonts are getting loaded on mobile. We can actually use Find/Replace to sort that one:
But putting <!-- FontPreload --> and <!-- /FontPreload --> either side of the stylesheet, it tells the caching engine (on Cloudflare too!) to ignore that for mobile devices (including mobile PageSpeed Insights).
OK, after that we have ….
Still 98! Although the speed index has improved we’re not at 100 yet. This is bad news for a man who’s decided to call himself Mr One Hundred. I have one final trick up my sleve, something that I haven’t had to deploy for the themes and page builders tested so far. We need to do something about this:
Currently, we do not delay the Google Analytics tag because we want it to be loaded early to test for bouncebacks etc. However, if we allow it to be delay loaded but move it first into the loading order and then set the delay to only last 1 second there’s almost no difference to stats collecting.
And the effect on the score is…
Magic! We’ve done it, the mythical one hundred achieved with Astra! This is interesting, because although doing it this way round does still show unused Javascript (and even more this time), giving it a 1 second delay means we can render the rest of the page in the meantime.
… so it’s just given a yellow warning. This technique won’t work for all sites (especially if they have movement on the homepage that would cause layout shifts), but it’s great for this one.
Now, before we go there were just a couple of final tidy ups:
Surecart was not working well with JavaScript delay, so I preventing it from running on the homepage using Freesoul Deactivate Plugins. For Surecart sites, Delay would need to be turned off entirely for the cart page.
On mobile, the nav menu wasn’t working. I needed to add ast-mobile-popup to the force include selectors list.
And that’s it for this 100🎯! You can check it out for yourself here: https://astra.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: