By Tim Russell
User Experience Is King: Understanding Google’s New SEO Metrics
As if the world of SEO wasn’t complicated enough, a couple of months ago Google announced a handful of new search metrics which it calls Core Web Vitals. These new metrics sit alongside existing UX (user experience) based criteria. Which have been around for a couple of years now. As the search giant tries to encourage web builders to think not just about content and keywords, as has been the case pretty much since search existed, but also about providing a quality user experience when someone visits a website.
What do these metrics mean for small business owners building or managing their own websites? The main impact will be on the technical side of your site. If you’re a non-techie who’s built a DIY website using a website builder such as WordPress, Wix or Squarespace, you may need a little bit of technical assistance to get your site up to speed. And speed is the operative word. Because as of next year, Google will start giving slow websites a pretty hard slap on the wrist.
So to help you prepare for this new world of search, here’s our guide to Core Web Vitals and how to handle them!
Core Web Vitals
On 28 May this year, Google announced that what it calls Core Web Vitals would become ‘ranking signals’. This basically means factors taken into account when working out a web page’s search ranking. These factors have nothing to do with the content of your website. Instead, they are based on user experience and on-site loading speed and behaviour. And as such, they require technical rather than content or marketing-based fixes.
But don’t panic! To give website owners some time to prepare, these three new metrics won’t come into play until 2021 at the earliest. So you have a few months to tweak your site if necessary. Let’s take a look at the three Core Web Vitals and what you can do to prepare for them.
Largest Contentful Paint (LCP)
A bit of a mouthful. LCP essentially boils down to the optimum way of measuring when a user perceives that a page has finished loading. Let’s say you open up a web page, and the header image and text loads. That’s your First Contentful Paint. But you scroll down and see there’s a large video or image at the bottom of the page that you want to look at. As far as you’re concerned, the page hasn’t finished loading properly until you can see it. That’s the thinking behind LCP.
What Google does is continually look at the next largest piece of content on the site to load. It times how long it takes for it all to appear, or how long it takes on average for users to interact with that page. Because it may be that there’s a large image still waiting to load, but most page visitors don’t really care and start clicking on the page before it’s finished loading. Either way, that’s your LCP score. Here’s a visual example:
Image courtesy of web.dev
We can see in the first image that the FCP is the ‘Visual stories’ link. However this is an inaccurate measure of loading time as it’s pretty useless on its own, without the rest of the page content. So Google then switches to the headline and sticks with it as its measurement of LCP. Even when, in the fourth screen, an image appears, as that image is below the fold and thus not of interest to the user. But above the fold, the user can see a big white space with three dots which indicate there’s a picture waiting to appear. And it will not consider that page fully loaded until it does. So it’s that image loading time that Google bases its LCP speed on. Got it?
Think of it like going to see your favourite band. The drummer and guitarist might come on first and start playing. Which is great, but you won’t really consider the show to have properly started until the lead singer arrives. That’s LCP in a nutshell.
How to Fix Your Site
The first thing to do is check how your site measures up already. You can do that via Google’s own Page Speed Insights too. Simply enter your URL and click ANALYZE, and Google will do the rest. If your site is rated green – a score of 90-100 – then congratulations, you don’t really need to do anything. But if, like most of us I suspect, you’re red or amber, there’s a bit of tweaking to be done.
As far as LCP is concerned, anything under 2.5s is green; 2.5-4s is amber; and anything over 4s is red and needs work. Page Speed Insights will give you a few tips, but the main four things to look at are:
- Hosting speed – check you’re using the fastest hosting package you can afford, especially if you have a lot of web traffic and are an e-commerce site.
- Images – Images are one of the biggest contributors to slow LCP, so either compress them before you upload them via a tool like TinyPNG. Or, if you’re using WordPress, via an image compression plugin such as Smush. Good compression won’t noticeably affect the visual quality of your images, but it will make them load quicker. Also try a lazy load plugin which means images will only start loading once they’re in view (ie above the fold).
- CDN – using a content delivery network such as Cloudflare can speed up how large elements such as images are delivered.
- Code – untidy code can also slow your site down so make sure you’re minifying HTML, CSS and Javascript on all pages. Again if you’re using WordPress there are several plugins that will handle this for you, such as Autoptimize.
First Input Delay (FID)
A slightly easier concept to grasp, FID (also known as Total Blocking Time) refers to the time it takes for a page to be ready to accept user interaction – for example clicking on a link or a button, or entering information on a form. It may be that certain interactive elements on your site are loading quickly, but are waiting for other larger elements to load before becoming interactive. And that is your FID score.
Image Courtesy of Nitropack
In the above example, the user is unable to click on a button until the FCP and first piece of content have loaded, so that’s the FID. There is then a further delay until the website responds to that click, which is known as Time to Interactive (TTI), i.e. the time a page takes to respond to the first user interaction.
To use another entertainment analogy, say you go into a fast food restaurant and go up to the counter to order your food. However the server is busy looking at their phone, and until they put their phone down and look at you you can’t give your order. That’s FID. Then after you’ve ordered, they pick their phone up again for a few seconds before keying your order into the system. That’s TTI.
As for speed, anything under 100ms is green, 100-300ms is amber, and over 300ms is red, so you need to make sure that any interactive elements on your page are amongst the first to load properly.
How to Fix Your Site
Again, use Page Speed Insights to find out how your site’s FID measures up. If you’re red or amber, then the same four steps apply as for LCP – hosting speed, image loading, using a CDN, and optimising your page code.
Cumulative Layout Shift (CLS)
Primarily occurring on mobile, CLS – also known as ‘content jank’ or to the rest of us as ‘stuff moving about’. It refers to the phenomenon of content shifting after the page has begun loading. Which can lead to the user clicking on the wrong thing. If you’ve experienced it you’ll know how annoying it is! Here’s a very clear explanation:
Image Courtesy of NitroPack
In the first image, the page has loaded with a video on the left that I want to watch, so I go to click on it. However, just as I do so, an ad suddenly loads and shifts the video down the page, and I end up clicking on the ad instead.
The calculation used to work out your sites CLS score is fairly complicated. But to put it simply, it multiplies the percentage of screen space affected by the shift, by the distance the shifting element has moved. So if 75% of the screen is affected by an element moving a distance equivalent to 25% of the screen, the CLS score will be 0.75 x 0.25 = 0.1875. Google then calculates a total score for the site based on the total sum of all individual CLS scores, divided by the total number of shifts on your site. Still with me? Good.
Basically the main thing you need to know here is that anything under 0.1 is green, 0.1-0.25 is amber, and anything over 0.25 sees you in the red.
How to Fix Your Site
Again, use Page Speed Insights to find out your site’s CLS score. If you’re in the red, you’ll need to do the following. And you’ll almost certainly need a bit of technical help here!
- Make sure all image, video & ad content has width & height attributes to allocate space for content before it loads. Or use CSS aspect ratio boxes.
- If you’re running dynamic ads or other dynamic content, make sure you reserve static space on each page for it. Avoid placing dynamic content above static content where possible
Other Google UX Ranking Signals
You may not have been aware of it, but Google is already using some UX-based metrics to calculate page rankings. Here’s a quick look at the key ones:
Mobile Friendliness
With over 50% of all searches now done on mobile devices, Google takes your site’s mobile-friendliness into account. And it is already punishing sites that don’t provide a good mobile user experience. If you’re not sure if your site stacks up, Page Speed Insights will check the mobile as well as the desktop version of your site. Whilst Google Search Console will give you more insights as to what’s wrong and how to fix it.
Safe Browsing
Google Safe Browsing is designed to protect browsers and devices from dangerous or malicious websites. Such as sites containing malware or that are used for phishing. Or sites that have had their security compromised in some way. It’s possible that this may have happened to your site without you even being aware of it. And if it happens, users will be warned before proceeding to your site. Which can have a catastrophic effect on your web traffic. Make sure you’re using Google Search Console so you’ll get a warning if it is happening to you!
HTTPS
In Google’s words, “HTTPS (Hypertext Transfer Protocol Secure) is an internet communication protocol that protects the integrity and confidentiality of data between the user’s computer and the site”. Basically, it ensures a secure and confidential browsing user experience when you visit a site. These days, Google labels non-HTTPS sites as insecure. Which can have a hugely negative effect on your search rankings and web traffic. Surveys suggest that over 80% of users would refuse to use an e-commerce site that didn’t have an HTTPS certificate. So make sure your site is compliant.
Intrusive Interstitials
Intrusive what? Basically, they mean pop-ups. Not all pop-ups, just ones that take up an unreasonable amount of screen space. They are also ones not considered absolutely necessary (eg age checks, cookie notifications or GDPR notices). So if your site has popup banners that take up a significant amount of screen space, Google will punish you accordingly.
Image Courtesy of TNNG
In image 1, the popup covers nearly all the screen and obscures the main content, which is a non-no. Whereas in image 2, it’s still visible but is unobtrusively located at the top of the screen with the main content still visible, which is fine.
Remember, SEO isn’t a one-off job. Rather it’s a regular, ongoing task which is won not in one all-out battle but in dozens of tiny increments. And the more user experience aspects you get right, the higher your ranking. So read and understand this post as much as you can. Check your site’s performance, and then take the necessary action. You’ll soon be well equipped to thrive in Google’s brave new world of UX-focused SEO!
And of course, Booming Businesses is always here to help. If you need the help of a professional to improve your user experience, you know where to find us.
