Having shown that an Elementor demo site can indeed be tamed (see here), it’s time to see if such results can also be achieved on a real-world client site.
OK, so let’s take a look at the situation. As usual, we’ll be using the reports from PageSpeed Insights to help us optimise. Here’s the report for the unoptimised site:
So, it look like the usual suspects are creating issues. Let’s get to work!
First up, I activated page caching. For this site, I went with nginx Fast-CGI cache and the Nginx Helper plugin. We won’t be using Cloudflare for this one.
Now let’s sort out the images. I used the ShortPixel plugin and amended the nginx configuration to serve webp images, using these instructions.
Then I added some custom CSS to load browser fonts on mobile (soon to be a setting in SpeedifyPress)
Finally, I used the OMGF plugin to load Google fonts locally
Let’s see if that helped:
Next up, I turned on Unused CSS removal in SpeedifyPress. This caused an issue with a couple of the icons not showing (quite common), so I added their selector classes to the ignore box.
Then, I turned on JavaScript delay. I don’t want to delay the js-extra scripts (generally inline configs) or the Google analytics script. I also ensure that frontend.min.js gets loaded last, which is necessary for Elementor to work properly.
So, how are we scoring now?
Next, it’s time to configure image lazy loading and to locally host the Google Analytics gtag.js
So, how are we doing now?
We’re nearly there! But there’s a problem with the LCP.
SpeedifyPress has automatic detection of the LCP image and will preload it, but in this case the image is a background image and it’s not getting detected. For the moment we can use Find/Replace to preload it (but going forward I’ll make an amendedment to the LCP detection script to check for background images)
Having done that, we’re up to 99.
This is a great score, and every now and again when it’s run, it’ll score 100. But … it’s still not perfect. So, what’s going on and why doesn’t it score 100? Well, the issue is the image on the front page. The client has gone for an Elementor video background with fallback image.
After optimisation via ShortPixel, the image is 128kb (webp). Let’s try it as a 77KB AVIF …
It’s a little bit better, let’s try resizing it down by 75% to 45.2 kb…
We got it! Goes to show the importance of image sizing for those who like to hit that fabled 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 access to SpeedifyPress, you can subscribe below: