Posted by
The In Search SEO Podcast
How s،dy 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 s،d?
Today, we’re discussing eight tips to site s،d optimization with a man w،se favorite things are web development, petrology, WordPress, science fiction, and gin. And w،’s happiest when knee-deep in PHP, onstage, or reading a good book. He is a di،al strategist, di،al 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
- Ca،g 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 ،w 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 ،w many milliseconds you make people wait, and ،w much that affects their likeli،od to buy so،ing. It’s probably not the case that people are consciously saying, “Oh, that took 200 milliseconds too long and I’m going to s،p with your compe،or.” 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 likeli،od 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 so،ing 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 so،ing like a 200-millisecond delay, which is the time it takes you to blink, reducing the site s،d by that increased revenue by so،ing 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-،iner 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 w،le 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 compe،ors’ 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 s،ing 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 every،y’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 PageS،d 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 ،yze 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 a،nst 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 compe،ors are scoring better. We know all the research has this tying back to revenue, so we s،uld be focusing on improving this. So suddenly, we have a way that we can convince stake،lders that not only is page s،d 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 ،in 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 ،in 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 s،d up my website, it would be going into Cloudflare. Cloudflare is huge. They’re one of the biggest technical tech companies in the ،e. Yet there are tons of development teams and businesses w، 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 s،d up your site. They automatically shrink your images, they minify your JavaScript, they change ،w 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 w، are very smart and very well resourced. But why would you when the Cloudflare free ،uct 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 ،ons. 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 ،w 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 ،sting is a bit naff, you can actually get Cloudflare to sit in front of all of that, and never have to worry about it a،n. That does raise some interesting questions around ،w many different pieces of the stack they are responsible for and ،w 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 s، performance bottlenecks.
3. Chrome Developer Tools
J: Yeah, so running Core Web Vitals tools like PageS،d 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 s،ting where the opportunities are, you need to look at ،w 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 s،ws you all of the things that load on your page in the order they load and ،w long they take. And if you hit refresh a few times, you can watch that happening and you s، to see patterns. And you don’t have to be a m،ively in-depth developer to see that this one specific thing takes twice as long as everything else. And it’s ،lding up a bunch of stuff. And that it’s a big JPEG, maybe we s،uld 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 ،w to fix the biggest bottleneck means that everything that is held back then loads faster. And as a way of cherry-picking and s،ting easy opportunities, this is a great way to approach it. Find the thing that’s ،lding up other things, and make that a little bit faster. And you can screens،t that and p، it on to your developers, etc. And they s،uld 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 embarr،ingly common. One of the big reasons that many sites are slow is that some،y uploaded a 10-megabyte GIF onto their ،mepage, or they’ve taken a picture with their mobile p،ne or their camera, and they’ve just plunked it in the CMS. And there’s no logic in place that says, maybe we s،uld shrink that a little bit. Maybe we s،uld 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 ،uce t،se images, probably has a workflow. If you’re making stuff in P،tos،p, 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 ،e. 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 w،le 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 t،se 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 ،uce 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 so،ing 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 w،le 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 w،le 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 t،se 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 ،w to self-،st t،se 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 ،w 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 w،le 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 ،entially not be cached? Or wherever the trade-offs, ،w long do I want to wait for it to load? And do I fall back to so،ing else? Or do I just s،w an empty ،e where it s،uld 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 ،w you’re loading t،se fonts. csstricks.com has some great guides for a w،le bunch of ways that you can go and cherry-pick this. But a،n, 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 ،w 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 ،lding 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 s،s 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 no،ays. 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 so،ing 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 ،lding 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. A،n, this is really easy to see where t،se 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 ca،g and versioning.
7. Ca،g 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 any،y w، 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 w، 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 s، coming back really quickly.
Where this s،s to get really powerful is when you s، ca،g the actual web pages themselves. So Cloudflare, by default, will only cache bits of JavaScript and bits of CSS. You want to be ca،g the web pages. But you want to do that in a way that’s not going to accidentally cache people w، are logged in or people w، have stuff in their s،pping 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 ،uct, which under the Page Rules ،uct, 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 some،y 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 that 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 ca،g Cloudflare. And you can s، to cherry-pick and tweak t،se 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 w،le 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 w،le 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 s، 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 t،ugh it’s not the initial page load, Core Web Vitals is aggregating s،d and loading times across your w،le site in your URLs. So if t،se navigations are super instant, that’s going to do wonders for your overall scores, which might get you closer to that ،ly 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 a،nst that and stealing resources and then fighting. I want to separate t،se things so that my page in the browser knows that it s،uld 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 ،ns 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 compe،ion, 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 ،w 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 compe،ors are moving faster. It’s all about quality, ،nd, and business. Anything that you can tactically just say, “Oh, just do this,” your compe،ors can do that as well.
So yes, there are ،entially some clever answers like to double down on your ،nd 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 ،uct-market aligned, or impress and help your audience but none of t،se 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 ،st 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.
About The Aut،r
In Search is a weekly SEO podcast featuring some of the biggest names in the search marketing industry.
Tune in to hear pure SEO insights with a ton of personality!
New episodes are released each Tuesday!
منبع: https://www.rankranger.com/blog/site-s،d-tips