In the course of my daily rounds I was interested to see how svelte I could make the core web vitals on my own site.
What are core web vitals?
These are three tests for a webpage:
- how quickly page content loads,
- how quickly a browser loading a webpage can respond to a user’s input,
- and how unstable the content is as it loads in the browser.
So using a number of popular online testing services, I stripped some elements out, changed a few things around, and added some caching and compression and tested over and over. I went from a negligible score to a A ranking in a short period. Here’s what I did:
Firstly, to test I am using:
These services all produce slightly different results but all can be helpful. You may also find that you will get one result one minute, and a different result 5 mins later for no reason. There is sometimes a reason for this, but I guess often it’s down to your hosting.
Also, I am really only testing the homepage here. You can of course extrapolate this info to any other page on your site (do I need to point that out?) – but I guess we want a fast homepage as the first goal.
Step 1 – remove bloat and problems
Ok first thing to do, is get rid of any obvious problem. Here I’m talking about ginormous images, things loading twice, billions of google fonts, or any non-essential stuff hanging around on your page.
This is before any gotchas, or quirks, or tips ‘n’ tricks-type stuff. This is the obvious stuff that we all let slide as it’s our own site and not a clients’ The painter never paints his own house right? If you’re perfecting your own website constantly it probably means you’re not that busy 🙂 So just get rid of anything you feel is surplus (I got rid of a video on the homepage), and compress any images that are any way too large. Pingdown and GTMetrix are great for spotting large images. Use TinyPNG or similar to downres them. I am not currently using Cloudimage.io for images but I have used it with success in the past to serve large images quickly. It’s a paid service but it’s good.
Step 2 – Minification
Ok, so this is where things get a bit frustrating. Basically, the whole process of squeezing a WP site includes a lot of this: Finding various combinations of minification, caching, unloading and hoping they all work together. I have used the fabulous WP Fastest Cache in the past many times and I reached for that here to start off. It has great minification seemingly, and also ties in with Cloudflare (more on that in a second).
With this caching plugin I instantly jumped from a negligable Measure score to around 50%. Measure, by the way, uses a mobile environment to test. So it seems like the most stringent test around at the moment, and if you can get a good score on that, you should be doing well on desktop relatively easily.
So, that was good. But you’ll find, as I always do with this stuff, that it’s a bit addictive. So I didn’t want to stop at 50%, and kept on looking to improve.
Step 3 – CDN
So a few years ago I signed up to Cloudflare. I don’t remember there being any major issues with it. Just a free account, I think I possibly had to edit some DNS and that was it. Cloudflare has a lot of cool features, including HTTP2 support, minification, compression, analytics. I’m mainly concerned with the Speed and Cache options.
Well in hooking up WP Fastest Cache, I noticed that you can add a token to the CDN section (which you generate in Cloudflare) and Fastest Cache sets up some settings for you. It turns off Cloudflare minification in favour of it’s own. Everything’s good. But I still wasn’t getting a high enough score.
So I decided to purchase a Cloudflare subscription (20 USD a month) to see what it could do. I removed WP Fastest Cache and decided to focus on Cloudflare. I just figured that as a widely-used CDN, it’s bound to have some sort of power worth investigating and I was hooked up to it anyway. I wasn’t going to be unhooking it anytime soon. So may as well go all-in.
So I turned everything on, including Brotli (a replacement for GZIP). I then went for:
Step 4 – More Minification
I decided to go down the road of Autoptimize and it’s pal Async Javascript. I had read about the healing power of these two plugins, whereby the former just squeezes the above the fold content to death, and the latter rearranges your scripts to produce the fastest results. I found the UI of these plugins to be really excellent. They talked to each other and made settings recommendations based on the environment, which was very handy. However my score was going down. This is the problem – these caching plugins all start to clash after a while. Saving rules to your htaccess, adding folders of static files, minifying this, which you are then reminifying. It’s bound to cause problems at some point. You are just caching a cached cache. Move that down there, then cache it. Then another plugin has cached that and eventually it’s hard to know what files you are actually serving, stripping or minifying and when. There’s a lot of trial and error.
Step 5 – More (Less) Minification
So I got rid of those two plugins and went for a cool plugin called Asset Cleanup – this helps you unload and strip junk out of your pages, and load certain scripts/plugins on certain pages. You could do this manually, but hey – why bother if this thing has you covered, and gives you a UI on every page to use. So I pulled out Contact Form 7 from my homepage, plus some other nonsense that doesn’t need to be in there.
Then I went to my hosting and update the PHP version. It said it was running just less than the latest, but according to my WP it was a good bit lower – weird – but once I updated PHP in CPanel I was able to utilise the Cloudflare Plugin for WordPress, which has a special WordPress-only feature called Automatic Platform Optimization:
Automatic Platform Optimization for WordPress serves your WordPress site from Cloudflare’s edge network and caches third party fonts. Get the benefits of a static site without any changes to how you manage your site
Coupled with Autoptimize and Asset Cleanup, I was now getting scores in the high 70s on Measure.
Hosting
Okay, one thing to point out. My hosting isn’t good. I’ve had it for ten years, and there’s so much on there that is being used and tested by clients, that to move it all somewhere would be painful. But I am definitely going to do it! Some good hosting I have used recently is Siteground, WP Engine, Kinsta, and more locally, Beecher in Cork. For WordPress, something like Kinsta is where it’s all going. Backups, staging server, easy to use. I love Kinsta, it’s amazing! And great support too. Please note I am not affiliated, I just like a well-run hosting company that gives you a screamingly fast site. Siteground also appear to have great, friendly support and are priced similarly to a lot of the big hosting companies here. Siteground also has a dedicated caching plugin and dedicated server-side caching (which you actually have to be careful of if you don’t want to use it lol).
Anyway, you can only do so much with lame hosting. So I am still battling a 1.2 sec wait before my site springs into action. Cloudflare should mash this down a good bit but it still seems to be an issue.
Wrap-up
To finish, I did some work on my actual homepage. I was using a js-based background animation. It was cool, but not mind-blowingly cool. It was quite a heavy plugin so I stripped it out and used CSS transition gradient instead. It’s fine, not amazing either but at least it allows for a massive dumping of scripts I don’t need.
Next, I went back through my fonts to remove any Google font I wasn’t actually using. I fixed a few problems here also, turns out I wasn’t loading an important font this whole time, I just happened to have it on my system! So I never noticed. every day is a school day!
I had been using a Google form to get enquiries, but I hated the look of it and it wasn’t really generating anything, so I removed this (iframe embed in the footer). This was a big render-blocker that, when I removed it, gave a good improvement. The initial script for it was taking a while to load.
Then, getting down to small stuff, I put in a conditional on my blog posts to only render 6 on the homepage and added a View All button to take the user to the Blog page. This meant a much smaller DOM and that improved the Measure score.
So finishing up my few hours’ work, we are up at 91 on Measure. I don’t realistically think I can or want to implement all the recommendations, such as swapping image formats, but you never know. I want to first see if there’s a good response in terms of Google rank
