by Jude Love
21 May 2021
If your eyes glazed over immediately at the phrase ‘core web vitals’, you’re not alone.
But you probably should focus for a second because Google is making some pretty big changes to its algorithm this month, and it could affect your website traffic and the user experience you’re delivering to visitors.
Yes, a nicely designed site and solutions-focussed copy is important. But so is your site’s tech and performance. If it’s slow or the user experience is crap, it could mean the different between you getting that job, or the client going to the next person in the search results. That’s why you want to ensure your core web vitals are in tip top shape. Here’s what you need to know.
The Google algorithm is a mix of around 200 factors used to rank sites in organic search results. It’s the ‘secret sauce’ that attempts to level the playing field for businesses and websites – and determines which page your site pops up on during a Google search.
This month, Google’s making major additions to the algorithm. User experience on mobile is now a huge priority and the core web vitals being introduced are an important measure. They look at the way a site loads and responds to users on the slowest mobile delivery service.
There are three key metrics that are now critical in the Google Page Experience algorithm. More will be rolled out in coming years, but these are the first to tackle. We could throw big words at you like ‘largest contentful paint’ and ‘first input delay’ to explain it but here’s an easier breakdown:
One of the most important things you should do for your website is to ensure you don’t have any super chunky images on your home page. If you’ve got a banner that’s 10MB, for instance, that could be slowing your site down and hurting your user experience (UX). This is especially relevant to mobile use (as mobile is served via a throttled connection speed) so you want to make sure your images are small, compressed and load fast!
In Google speak, this is known as ‘cummulative layout shift’ or CLS for short, and it basically means the faster your page can become visually stable, the better. You know when you’re looking at a site on a smartphone and some content will load, then be pushed out while other content loads? Or you’re trying to purchase something and the button moves just as you’re about to press it because another part of the page is still loading? It’s super annoying, right? To sort it out, you need to optimise your CLS by adding width and height attributes for images in the CSS.
If a user comes along, taps on a button, scrolls or inputs something into a form, does your site respond fast to those interactions? This is know as ‘first input delay’ or FID. It’s especially relevant for login pages, sign up pages, or other pages where users need to click quickly. One way to improve your FID ‘grade’ is to strip out images and any additional functions scripts so people can do what they need to as quickly as possible. If not, your site may be slow and as we all know, that’s super frustrating, right?
Luckily, there are some relatively easy ways to check under the hood of your site and see what you might be able to improve on.
Google has several tools that offer you insights, such as Google Search Console (although not all core web vitals information for your site might be available yet). Also try the Google PageSpeed Insights tool.
Don’t forget, websites have lots of different moving parts and little fixes can eventually add up to better Google rankings. Here’s what to tackle now.
1. Make sure your logo is nice and small and loads well so people understand your site instantly – upload this as a .gif rather than a .png and name it your business name, not 6785378295850283web.png
2. Reduce the size of your images, especially that first ‘banner’ image
3. Replace an image slider with a single, small sized image – similarly those testimonials and client logo sliders – add these as static images rather than sliders.
4. Set images to ‘lazy load’ (this prioritises images to load sequentially, so images further down the page don’t load until the user reaches them).
5. Place your USP high up in the page, as TEXT atop the hero image, or directly beneath it so people can read it instantly, while other elements load beneath.
6. Put a static image in place of a video, with a button to launch play, rather than embedding the video itself. As people read your USP and move down the page, the video is loading behind the image
7. Remove social feeds – these add extra code and scripting that take time to load.
8. Reduce extraneous plugins or apps – as with social feeds these add extra code and scripting that take time to load.
9. Use quality web hosting. Cheap shared hosting means that all of the sites that are sharing your site’s server are jostling for load.
Checking on your core web vitals and making the necessary changes as soon as possible is important. However, if it’s all a bit over your head, get in touch with a web developer who can check on your grade and make changes for you. Good luck!
