Then one fateful day an email dropped in my inbox with the subject line “SEO Audit – Pagespeed Improvement.” Curiously I opened it, as it turned out a client who had a website with us had outsourced his SEO requirements (which made sense at the time) and the agency he had used specifically required “the website to get at least 90/100 with pagespeed insights.”
That quote haunts me to this day.
Not only because (at the time anyway) in 2014 knowledge about how to do this was sparse. There was a mish-mash of articles across the length and breadth of the internet about caching and image optimization and how to properly queue your resources. But that was it, it was a very blind-leading-the-blind situation.
Also, for background, because the site in question was a complicated woocommerce build with a lot of bespoke functionality (including integration with an external ordering system and product customisation) we were fighting an uphill battle as it was.
Needless to say – 3 days later, a lot of trial and error, some very frustrating JS errors and a lot of tears we were at 70/100. I’d fought through the endless lists of optimisation rules, picked apart my own code to claw those extra points in, I could see the summit…And then the wheels fell off, one crucial JS change and the score shot down to 45/100.
Why you ask? Because I followed a rule Pagespeed Insights asked me to.
Fast Forward a couple of years and the landscape of things has changed drastically
After a rocky start Pagespeed and I actually formed a friendship of sorts. It became less frustrating and more challenging to try and pick apart site optimisation, there was something nostalgic about grinding away trying to get those extra points. It harked back to Christmas ‘94 when my parents got me a Megadrive and I had to get good at Streets of Rage, and believe me I got good at Streets of Rage.
Then just as I was ready to rest on my laurels and call it a draw, Google changed the game. Around 2018 they announced the “speed update” which in layman’s terms meant if your Pagespeed Score was in the ground, so was your site. Absolute disaster. It placed mobile optimisation at the forefront, all of a sudden the rules we’d followed before were out the window and sites over 1mb initial load were the enemy.
And hey by 2020 the game changed again
Google launched its lighthouse feature. Something which I fought initially but after settling in and investing 20 or so hours of my life really digging around in the fundamentals I grew to appreciate. It’s a meticulous bit of kit and something I put up there with the Adobe Suite as an absolutely necessary tool for any designer/developer in 2021.
So, what’s the difference?
Well, if you want it in the simplest of terms – Pagespeed Insights is Freeview, it’s better than just having 5 channels. But Lighthouse is like having the full Sky Package, it’s got the stuff you never knew you needed until you actually had it in front of you.
If you’re just looking to see how your site ranks based on performance only, or you want to show a client how their site is performing, then load up Pagespeed. It’s a great overview of things and it’s usage shouldn’t be overlooked, but it does come with drawbacks.
For instance because Pagespeed needs to connect to your website and then feed it’s data back you can get issues raised that aren’t really issues (the worst culprit by a country mile is “reduce server response time.”)
Your clients won’t be interested in 90% of what Lighthouse will tell you. But speaking as a designer/developer it is an absolute TREASURE TROVE of points for improvement. Whereas Pagespeed offers a great overview, Lighthouse is that granular level of detail that you need to fine tune your site performance.
The downside, compared to Pagespeed, is the time it takes to run these reports. You’ll be sat waiting for a couple of minutes while they generate and if you’re at the final hurdle of getting a project over the line it can get frustrating. Perseverance will pay off though when your First Contextual Paint is in the green.
So, technical jargon aside why does pagespeed matter
I’ve mentioned previously that the “Speed Update” of 2018 was a game changer, and it was. Google promises that ultimately as long as your site optimisation isn’t “terrible” then it won’t impact your natural SEO rankings.
Because, and to be fair to the corporate giant, if your neck of the woods only gets a 2G data reception or below you aren’t going to be able to view a site that loads in at 5mb in less than 2 seconds (and that’s extreme, but more common than you’d think). They’ve got the best of intentions because it’s about providing the best experience for the greatest number of people.
The downside is that “terrible” can be essentially anything less than 49 points. Which unfortunately despite best efforts, a lot of sites fall under. So I guess we’re all in this together.
There’s a sense of hypocrisy here as well, because global multinational companies such as Apple and Coca Cola also rank terribly with Pagespeed, but I suppose when you’re a household name your natural SEO ranking isn’t a worry.
So you want to fix your Pagespeed, but don’t know where to start
Well I guess the most important thing to do is set realistic goals. Unless you have a basic blog, the simplest of websites, or you’re willing to invest the man-hours you’re not going to hit anywhere near 90/100. It’s a sad thing to say but it’s true.
WordPress has gotten great at improving the speed of its builds (speaking from experience, I questioned even using it as a CMS at one point because of the bloat) but obviously if you’ve got external tracking, user monitoring (such as Hotjar), social media integration (live feeds), complex animations, lots of plugins or anything that requires a response from somewhere else then your score is going to be impacted. Pre-built themes are especially bad for this.
Even with the best asset organisation in the world, 90/100 is a way off. BUT, all hope is not lost. Instead of worrying about what you can’t do, worry about what you can do. The priority should always be to get as much on screen as quickly as possible, after that it’s just lining up the rest of your site.
I’ve put together a handy cheat sheet below that highlights where you can find some easy wins, because God knows I don’t think anyone should have to go through this alone.
The easy wins
- Good Hosting – GoDaddy offers hosting from £1/month. There’s a reason it costs £1. If someone came up to you in 2021 and said “hey you can get your internet for £1 a month” the first thing you’d think is “well how fast is it.” The same can be said for your website, good hosting can range from £10 – £20 a month, but if you’re really invested in your business the speed is worth it.
- Caching (when you’re using a WP setup) – If you’re on a server that supports it, Litespeed is 100% the best caching service to use. Failing that, and if you’re willing to play around with it, Autoptimize is the way to go.
- Be sensible with your css – I’m speaking to you, developers out there. With the release of Bootstrap 4 there’s a ton of common, clearly named “helper classes” out there that do all your basic css commands. Yes it’s a bit of a pain to have long class names in your neat html layout, but it can save you 100s of lines of unminified css.
- Speaking of CSS, be critical with it – Pardon the bad pun, but getting a decent critical css setup run (the css a page needs to show everything “above the fold”) is crucial to driving down the initial “paint” of your site. As above; Litespeed has this built in, but you can also use this great free tool here.
Consider dropping some legacy support – IE11 is dead, and we’re all happier for it. Microsoft announced it was finally dropping support this year, and after it stopped supporting Windows 7 last year it made little sense to continue doing so either. It’s no longer the “default browser” for most Windows users.
Why is this important? Well for font support it is. For years now it’s been a case of using Woff2 (super compressed files) for everything else, and looping in Woff (larger files) for IE legacy support. The same applies to css fixes and flexbox. You can save yourself 100kbs of resources by dropping IE from your supported browsers.
Image optimisation – Again, speaking just for WordPress, you’ve a plethora of options available to you. I tend to use Ewww Image Optimizer to fine tune my media library / assets and then Litespeed to churn out .webp assets and lazy loading. But if your server doesn’t support Litespeed then Ewww also comes with these features built in, just remember lazy loading out-of-the-box only works for img elements.
And as always, if you can use SVG’s even better.
The difficult stuff
Minimise main thread work – this ties together the whole point of this post. Thread work is a complicated way of saying “amount of things your site has to do so someone can use it.” All those fancy animations? They take time to execute. Those social feeds? They’ve got to come from somewhere. That slider with a million effects? It has to load somewhere. You want to track user behavior? That needs feeding back.
So if you have to wait for all your fancy stuff to load first, chances are it’s going to take longer for your site to load. And surveys show that anything longer than two seconds is enough to put your users off.
Long load times = less conversions.
So the take home from this is either a) really, really simplify the assets you load for mobiles OR b) have a think from a user perspective, do you really need that slider at the top of the homepage? Will your users care if all the logos you have to show slowly scroll across the screen?
- Passive Event Listeners – This one goes out to all my jQuery users out there, I found this fix buried in a stack overflow thread. It’s an integral problem with jQuery and wordpress, and this gets around it.
- If you’re loading your site with css asynchronized – Which is the most efficient way to do things, consider loading your body as “opacity:0” and simply changing it to “opacity:1” after a slight delay. Yes it’s a little hacky, but it gets around the dreaded “flash of unstyled content” that a lot of sites fall victim to while still keeping within the FCP rule.
- Preload your fonts (or set their display properties sensibly) – It seems so ridiculous to say it aloud. But if you’re loading your fonts from your server consider adding rel=”preload” to your files to save on load time. And if you’re using a third party service (such as google fonts) try setting your font display to “block.” It’s not a catch-all, but I’ve found these settings work the best.
Overall the thing that matters most is your FCP (First Contentful Paint) and Time to Interactive – This is the time it takes to display the initial part of the site that sits “above-the-fold” and then interact with it. Ideally this comes in at 2 seconds or less, and according to user data 53% of users will abandon a site if it takes longer than 3 seconds to load.
This doesn’t sound like much, but try loading your website on your data connection and count how long it takes to become usable and ask yourself “is this what I want potential clients coming up against.”
Ultimately though, it’s important to not obsess over this
Google hasn’t put out much data on what is relatively “bad” but it’s safe to assume that unless you’re loading 50mb of resources “above the fold” or installing Limewire onto your users machines then Google isn’t going to remove you from their search engine.
That being said optimisation and speed should be at the top of your priority list when developing or evaluating your current website.
Nobody is saying you have to have a “boring” website because of this. It’s all about being sensible and playing to your strengths; take a look at your competitors and see how they rank, prioritise mobile design, strip back on features you like but don’t necessarily need.
And hey, if you really want that social feed to display your Twitter updates, then consider cutting back on another area of your website. Make allowances and win the battles you can. Keep your initial load to under 1mb, and if worst comes to worst break all your JS up into tiny files so it’s easier to execute (oh yeah, I’ve been there)
At the end of the day it’s an optimisation tool designed to help you make your site better. It’s not a barometer of the quality of work you put out.