We all know that a slow site negatively impacts user behavior. But are you really doing everything you can to minimize your site speed?
Today, we're discussing eight tips to site speed optimization with a man whose favorite things are web development, petrology, WordPress, science fiction, and gin. And who's happiest when knee-deep in PHP, onstage, or reading a good book. He is a digital strategist, digital marketing technologist, and full-stack developer and is head of SEO at Yoast.
A warm welcome to the In Search SEO podcast Jono Alderson.
The eight steps are:
Core Web Vitals
Chrome Developer Tools
Advanced Image Optimization Techniques
Advanced Font Optimization Techniques
Caching and Versioning
Clever Third-Party Kit
Eight Essential Elements of Fast Websites
J: Hey, good to be here. Thanks for having me. This is super exciting.
D: Superb, Jono. Good to have you on. You can find Jono over at jonoalderson.com. So Jono, what would you say are the current stance on how a slow site actually impacts user behavior?
J: There is so much research. And I think none of it is news. There's research going back decades now. And all of it says that there is a surprisingly direct correlation between how many milliseconds you make people wait, and how much that affects their likelihood to buy something. It's probably not the case that people are consciously saying, "Oh, that took 200 milliseconds too long and I'm going to shop with your competitor.” But it is a period during which they might look out the window or open another tab or wonder what's for lunch. And all of that erodes their likelihood to stay in the moment and to convert or take action.
I saw some really interesting research recently from Deloitte, a big consultancy firm. And they looked at something like a subset of 50 of the biggest different sites across eCommerce and lead generation and different sectors in the UK and the US. And they found something like a 200-millisecond delay, which is the time it takes you to blink, reducing the site speed by that increased revenue by something like 10%. And this is just one such study. There are many like this. And all of them say that faster, sleeker, more accessible, and more usable, just means more money. So yeah, it's a no-brainer for us to be looking at this.
D: I remember seeing a study by Amazon, I think it was over 10 years ago, but I hadn't seen up-to-date stats on it. But it's surely all comparative as well. Because if people are used to browsing other websites, and they see your site as a whole lot slower than other websites, then they're not gonna stick around too long.
J: Yeah, and people really don't think about this. They think their site is probably fast enough. But your competitors’ sites are getting faster, Facebook's getting faster, Instagram is getting faster, and the expectations of where the baseline of that user experience changes. So you've got to be getting faster than the expectation, otherwise, you're getting slower comparatively.
D: So today, you're sharing the essential elements of fast websites starting off with number one, Core Web Vitals.
1. Core Web Vitals
J: I think there might be some more outside of this. But this is definitely my go-to list. I'm sure everybody's heard of Core Web Vitals by now. But if you haven't, Google launched this, I think in mid-2020. And it's their attempt at creating some kind of standardized, universal metrics for measuring what PageSpeed is. Because technically, and conceptually, it’s quite complex. Pages loading, there are all sorts of different stages and all sorts of different things that affect it. So they simplified it down into a set of metrics that you can monitor and trend and analyze over time.
The really nice thing about this is that this is just step one. There are three metrics at the moment and we're getting two more this year. The metrics themselves are evolving. This is becoming a mature ecosystem for putting hard numbers against these kinds of measurements, which means it gets much easier as an online business to say that we're not scoring very well and our competitors are scoring better. We know all the research has this tying back to revenue, so we should be focusing on improving this. So suddenly, we have a way that we can convince stakeholders that not only is page speed important, but also we have a measurement that everyone will agree on that isn't opinionated and that isn't the SEO guy in the corner saying that he disagrees with the dev in that corner and not really having a shared language. So this is really powerful as a business tool, never mind just a technical measure.
D: I know your brain is saying that you can't commit to saying that there are only eight most important fastest things that you can actually do to improve your website. I know your brain can actually think of 1024 things at the moment, but we're just sharing the eight initial ideas that you came up with the one we just discussed a little bit earlier on as well. So number two was Cloudflare.
So if you've got a site that's maybe not scoring very well, that's maybe a bit slow, you could take a site that takes six seconds to load down to two seconds just by clicking a few of the buttons. The basic level is phenomenal but with the power users and advanced cases, you can go even further. You can say I want to more deeply integrate Cloudflare into how my site works. And I want to offload some of this business logic. And I want to run this tagging and tracking in Google Analytics on the edge in the cloud near to where the user is. It's a phenomenal tool for cases like where it’s a struggle to make the site itself faster, or it’s running on legacy hardware, or the hosting is a bit naff, you can actually get Cloudflare to sit in front of all of that, and never have to worry about it again. That does raise some interesting questions around how many different pieces of the stack they are responsible for and how much you want to be offloading business logic. But as a quick hack, it's a phenomenal tool.
D: And number three, use Chrome Developer Tools to spot performance bottlenecks.
3. Chrome Developer Tools
I'm on a Windows computer. So I hit F12 in a browser, I'm sure there's a Mac equivalent, and I get the Inspect overview. You can click the Network tab, and you get a waterfall diagram that shows you all of the things that load on your page in the order they load and how long they take. And if you hit refresh a few times, you can watch that happening and you start to see patterns. And you don't have to be a massively in-depth developer to see that this one specific thing takes twice as long as everything else. And it's holding up a bunch of stuff. And that it's a big JPEG, maybe we should shrink this JPEG. So as a way of diagnosing your site, specifically page by page or template by template, it's a powerful way of seeing where the biggest offenders are.
And yes, there's nuance outside of that, but knowing how to fix the biggest bottleneck means that everything that is held back then loads faster. And as a way of cherry-picking and spotting easy opportunities, this is a great way to approach it. Find the thing that's holding up other things, and make that a little bit faster. And you can screenshot that and pass it on to your developers, etc. And they should be able to attack whatever that is.
D: And number four, use advanced image optimization techniques.
4. Advanced Image Compression Techniques
J: Yes, I mentioned big JPEGs as an example. And this is still embarrassingly common. One of the big reasons that many sites are slow is that somebody uploaded a 10-megabyte GIF onto their homepage, or they've taken a picture with their mobile phone or their camera, and they've just plunked it in the CMS. And there's no logic in place that says, maybe we should shrink that a little bit. Maybe we should fit it to the size. So many of the times when you're looking at Chrome Developer Tools, and Cloudflare, you'll see that the bottleneck is it just takes a long time to load this image because it's big. There are all sorts of tools you can use to address that. The most important one is whatever process you're using to produce those images, probably has a workflow. If you're making stuff in Photoshop, when exporting stuff, make sure that you're exporting for the web. Think about if this JPEG really needs to be perfect pixel quality or can we reduce the quality a bit and maybe save on file size. If all that's a little bit technical, go to squoosh.app. Squoosh is a tool built by some of the Google development team. They're super nerdy, they're really into the image space. You drag and drop your image in. And it gives you options that you can click where you can change a PNG to JPEG. You drag and drop and as you do, you can see the quality changing in the image. Am I happy with that trade-off? And there are a whole bunch of advanced checkboxes I can click and see what happens and shave off another few kilobytes here and there. And you can very easily get an image that’s 2 megabytes down to 200 kilobytes in just a few seconds of dragging and dropping and playing with the settings. It's not very baked into your workflows, but as a quick fix to shrink down some of those big bottlenecking images, it's really cool.
D: Yeah, I need to get on top of image optimization because I hate to admit it, but I'm actually still using Macromedia Fireworks to produce software.
J: Oh, I miss Fireworks. There was a good decade or so where that was my toy.
D: I know. And I create an image and then I export it as a JPEG at about 80% quality and go, "That's okay for the web.” Maybe that was something remote 10 years ago.
J: That's probably a lot of people's workflow where they are just putting it out to 80% and it'll be fine. And that will, for the most part, be fine, but occasionally, stuff's going to slip through. And if you're wanting to do that unbottlenecking and unblocking, it's really worth spending the time looking at every single image and saying, "Am I happy with these trade-offs in the size?”
D: Absolutely. And for a hyperfast modern site that’s got to compete with the best out there, what I've just described is certainly not going to be able to do that. So that brings us up to number five, which is to use advanced font opt optimization techniques.
5. Advanced Font Optimization Techniques
J: I mentioned that big JPEGs are often a blocking issue. And one of the big offenders is fonts, Google fonts in particular, or in fact, any fonts that you're loading from a third-party domain. These are so often the slowest thing on the page, the biggest thing on the page, and you'll see this all the time as a user. When you're loading a page it takes a few seconds to sort out and then the font flashes in. It’s a really bad user experience. It's really bad in a whole bunch of ways for Core Web Vitals, but there are fixes. So one of the problems with Google fonts and similar fonts is that you make a cross-domain connection, which takes a little while. The thing you're connecting to queries a whole bunch of back-end systems that take a while. It spits the font back, you've then got to download that font, then you've got to render it. There are like five steps in that process and it takes seconds, and there's no way to make that faster.
So one of the easiest wins is to localize those fonts. Don't load them from Google Fonts, ignore the instructions Google Fonts gives you on copying and pasting CSS. Do a bit of Googling and find some guides on how to self-host those fonts. And that'll vary based on your setup and your CMS. Typically, there are plugins and processes to make this pretty straightforward. That shaves off all of that. And then the other thing you want to do is look at what actually is this font I'm loading and how am I loading it.
In modern font loading CSS, you can define specific character sets. So if you know that your website is, for example, mostly in English, you probably don't need to be loading the font characters for a whole bunch of extended Latin glyphs, which actually happens by default. So the font you're loading, you're only using A-Z, one to nine, but actually, you're loading 200 odd characters that never appear on your pages. So if you can carve that up, that's much faster. And you can also say, "Do I want this font to load quickly, but potentially not be cached? Or wherever the trade-offs, how long do I want to wait for it to load? And do I fall back to something else? Or do I just show an empty space where it should be?” There are different settings you can tinker with and tools you can Google for optimizing it. In the same way, as images you want to look at every single bit, really interrogate how you're loading those fonts. csstricks.com has some great guides for a whole bunch of ways that you can go and cherry-pick this. But again, look at your CMS and your stack, there will be plugins and purchases to make this easy.
D: And number seven is to get the most out of caching and versioning.
7. Caching and Versioning
D: And that takes us up to the last one. Number eight, use a clever third-party kit.
8. Clever Third-Party Kit
J: There's a whole bunch of stuff, you can just bolt on to cheat with some of this. I've got two real favorites at the moment. One is Instant Page, which is at instant.page, which has an interesting domain. This is really cool. So it doesn't make your site faster right away but it makes subsequent navigation faster. So when a user moves their mouse over a link on your page, it preloads it in the background of your browser, so that as they click, it's already available. And they've got a whole bunch of research that says the average person moves their mouse over a link for 16 milliseconds before they actually click. So there's a little bit of buffer time there. And in that 16 milliseconds, that's just enough time to start loading the page in the background. So it feels instantaneous.
And there are a few reasons why that's really nice. One, that's a great user experience. Two, it impacts your Core Web Vitals, even though it's not the initial page load, Core Web Vitals is aggregating speed and loading times across your whole site in your URLs. So if those navigations are super instant, that's going to do wonders for your overall scores, which might get you closer to that holy grail of improved Google rankings.
D: I was trying to have a look for the URL for Party Town because if you search Google for it's quite tricky to find, but it's on GitHub.
J: Yes. I've just pinged you a link that you can share. It's very beta. It's very GitHub. It's very nerdy and developer at the moment.
The Pareto Pickle - Make 100 Small Changes
D: Let's finish off with the Pareto Pickle. So Pareto says that you can get 80% of your results from 20% of your efforts. What's one SEO activity that you would recommend that provides incredible results for modest levels of effort?
J: The best advice I can give on that is to ignore the Pareto optimal for SEO. I don't think that's how this works anymore. I think that's great advice if you are our grandparents operating a brick-and-mortar retail store 100 years ago. I think our ecosystem is different. And I think for SEO in particular, the way you win is you make 100 small changes, one at a time iteratively today and tomorrow until you die. Otherwise, your competitors are moving faster. It's all about quality, brand, and business. Anything that you can tactically just say, "Oh, just do this,” your competitors can do that as well.
So yes, there are potentially some clever answers like to double down on your brand reputation, because that's definitely going to do well. But that's such a big complex thing. And I think a much better way of thinking about it is that this afternoon, what ten things can I improve? And just go and do that. And they don't have to be huge or clever, just iterate and get better.
D: You don't have to prioritize things. But surely some things have a greater impact than other things.
J: Yeah, but the big things all just turn out to be the better solution, have the better content, be more product-market aligned, or impress and help your audience but none of those are tangible, tactical things you can do.
You know what, I change my mind. The 80% thing you can do is to go get Cloudflare.
D: I've been your host David Bain. Jono, thanks so much for being on the In Search SEO podcast.