How speedy is your site?
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
- Cloudflare
- Chrome Developer Tools
- Advanced Image Optimization Techniques
- Advanced Font Optimization Techniques
- CSS and JavaScript Tricks
- 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.
2. Cloudflare
J: If I had only enough time and resources to just do one thing to page speed up my website, it would be going into Cloudflare. Cloudflare is huge. They’re one of the biggest technical tech companies in the space. Yet there are tons of development teams and businesses who have understandably never heard of them because it’s a bit nerdy. Cloudflare is a content delivery network. It’s a piece of infrastructure that sits in front of your website. They have a free version. It takes about 10 minutes to set up. And they just use magic to speed up your site. They automatically shrink your images, they minify your JavaScript, they change how things load, they make sure that connections route more efficiently around the globe for different uses in different places, and 1000 other things. And these are all things that you could in theory, do some of if you had a dev team who are very smart and very well resourced. But why would you when the Cloudflare free product does most of it, and the $20 a month one does pretty much all the rest?
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
J: Yeah, so running Core Web Vitals tools like PageSpeed Insights and Web Page Test will give you top-level scores and some generic advice. And the problem with generic advice like using less JavaScript is that it’s not really going to be very easy to apply that to your website and your challenges. Your website’s unique, it’s built-in a very specific way. If you want to get to the next level of really spotting where the opportunities are, you need to look at how your website loads. And one of the best tools you can use for that is 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.
"Outperform "The
Outperform Your Competition - in Every Marketing Channel
The all-in-one solution for data-driven marketing planning and competitor analysis
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 are, 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 six, use CSS and JavaScript tricks.
6. CSS and JavaScript Tricks
J: So the next most common offender is how styles and scripts are loaded. And if you have a website that has lots of complex visual stuff, and maybe has movement and interaction and widgets and things you can click on and do stuff with, it’s almost certainly the case that the CSS and JavaScript used to power that takes a while to load and interacts with the page in different ways. You’ll see this in your Chrome Developer Tools report when you’re looking at that waterfall of things holding up other things. JavaScript is a really bad offender for this. If I have a script that’s powering, say, a carousel at the top of my page, I don’t want to have to wait for that script to load before that carousel starts scrolling. So there are a few things you can do with this. One is you can just make them smaller. Cloudflare is really good at this. If it’s smaller, it’s fewer bytes, it’s a faster page load time. But the other thing you can do, which is really powerful, is to say for this JavaScript file, I don’t need to load immediately, I can wait until the page is done.
And there are different ways you can do that. You can load asynchronously, you can defer it. Deferring is typically the best practice nowadays. People do all sorts of weird stuff with combining async and deferring it makes a mess. But just using the defer attribute on JavaScript files that you don’t need right away, can make your page so much faster. So if I’ve got some JavaScript that controls something in the footer, I really don’t need to wait for that to load the rest of the page, especially when you consider that the way that JavaScript and CSS interact gets quite muddy. If I’ve got lots of scripts, lots of styling on my page, some of that is going to wait until the JavaScript is loaded. So you’ve got things holding up other things all over the place. So being really tactical and saying that I don’t need this immediately can unlock huge performance boosts. Again, this is really easy to see where those offenders are in Chrome Developer Tools. And if you’ve got a development resource, it’s super easy to do this. You literally just add an attribute to the tag and it does it automatically.
D: And number seven is to get the most out of caching and versioning.
7. Caching and Versioning
J: So one of the things that Cloudflare does really well is when it first encounters a resource, whether that’s an image or a piece of JavaScript, or a style, it saves it into Cloudflare, and then anybody who asks for that in the future gets the cached version. And that served from somewhere super local to them. That’s super-efficient, really nice. Many websites work in a way that makes that quite tricky. For example, you want to be sure that you’re versioning your style sheets and your scripts. So when you publish your latest version of your piece of JavaScript, you want to say this is version six. And then that can get cached nicely by Cloudflare and for everyone who visits. When you make updates to it, you want to change that file type, change the file name, so this is version seven. And then all of your caches have expired, people are requesting a different resource, and they start coming back really quickly.
Where this starts to get really powerful is when you start caching the actual web pages themselves. So Cloudflare, by default, will only cache bits of JavaScript and bits of CSS. You want to be caching the web pages. But you want to do that in a way that’s not going to accidentally cache people who are logged in or people who have stuff in their shopping cart. If you’re on WordPress, there’s a service by Cloudflare called automatic platform optimization which does this automatically. So now you’re serving your website from wherever the nearest Cloudflare data center is to your user, and they’re getting a cached saved version of it in 50 milliseconds, rather than 600 milliseconds.
If you’ve got a more complex website set up, you can do this with Cloudflare with the Workers product, which under the Page Rules product, lets you define some of your own logic for that. But basically, the premise is, you don’t want your website to be doing anything. If somebody is opening your pages, you want that page, every bit of JavaScript, and every bit of styling to be served from wherever the nearest data center is from you. My servers are in Norway, I think. But if you open my website, now, everything on it comes from Manchester because that’s the nearest place where Cloudflare has a data center. And you can tinker away with this. You can look at this in Chrome Developer Tools, you can add an extra column to the view that says if this is caching Cloudflare. And you can start to cherry-pick and tweak those settings to make sure that nothing is ever hitting the back end.
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.
For the more technical people, the other toy I’m really into at the moment is Party Town. And the premise is that some of the stuff you’re loading on your site is third-party. And that’s often tracking pixels and Google Tag Manager and maybe other odds and ends. You don’t want that stuff competing with the main important stuff that’s critical to your website. So if I’ve got a bunch of JavaScript that powers the page loading, I don’t want Google Tag Manager to be loading up against that and stealing resources and then fighting. I want to separate those things so that my page in the browser knows that it should really be prioritizing the stuff that’s critical and that the third-party stuff can happen in the background, it can happen separately. And from a tech perspective, it loads all of these third-party resources in a separate worker, which means it happens outside of the normal stream, it doesn’t impact performance, and it happens quietly in the background. I’ve seen some incredible performance gains from this sort of stuff. I think this is very much where performance optimization is going. It’s a little bit tricky to set up, it doesn’t work perfectly with all stuff. But if you really want to get ahead of the competition, this is a really cool toy to play with. So it’s a little bit beta, but it’s worth exploring.
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.
J: Thanks for having me. This was delightful.
D: And thank you for listening.
Darrell creates SEO content for Similarweb, drawing on his deep understanding of SEO and Google patents.
