Google’s Core Web Vitals: Optimising Your Website
Let’s track back to June 2021: the world anticipated a lockdown-free summer, and National Donut Day was upon us. Perhaps a little less dramatically, it was when Google announced two major algorithm updates – Core Web Vitals and Page Experience update.
You may well be wondering what the Core Web Vitals experience update is (and why it coincides with Donut Day). Well, firstly, it has nothing to do with the donuts, but it has everything to do with how you go about designing your website and improving the on-page user experience!
Although designing a website is all about creative freedom, making sure you’re optimising your site against these new updates is what will really get it on the map (in other words – on Google’s first page!). Below, we’ll take you through:
- What Core Web Vitals and Page Experience updates are about
- Their impact on web design
- Our web design tips to optimise for Core Web Vitals
- How to test your website today
What Are Core Web Vitals?
Core Web Vitals is a set of three factors that Google has deemed super crucial for an excellent user experience on your pages. These factors measure the speed, stability, and responsiveness of your website.
It all sounds pretty intimidating and technical, but it’s easier once you know what these factors measure. Let’s take a look:
- Largest Contentful Paint (LCP): Measures how long it takes for a page to load with images, video, or text. It would be best if you aimed for a loading time of 2.5 seconds or less.
- First Input Delay (FID): Measures how long it takes for the page to become responsive as users interact with it. Google recommends 100 milliseconds or less for a great user experience (UX).
- Cumulative Layout Shift: Measures how frequently users will deal with unexpected movement in the page content. As you can imagine, pages that jump around are not ideal for user experience. It would be best if you aimed for a score of less than 0.1.
Google is prioritising user experience with its new ranking factors. This means we need to know how to improve our websites in each area to deliver an excellent overall experience and rank higher on Google.
Page Experience Update and Google Core Web Vitals
In a nutshell, Google assesses your website on six main signals and gives it an overall page experience score based on those findings.
Three of these signals are a part of the Google Core Web Vitals (which we’ll talk about in just a moment). These are the remaining three signals and how to score well for them:
- Mobile Usability: Your page has no mobile usability errors and is super friendly on any mobile device
- HTTPS usage: Your site uses HTTPS to show how secure its connection is and has an SSL certificate
- Advertising: Your site avoids posting disruptive ads that end up ruining a good user experience
Impact on Web Design
So, what exactly does all of this mean in terms of web design?
You’ve most likely been in a situation where a site’s complex navigation menu or its use of blinding font colours has ultimately diverted you off the page.
Not only does this make it super difficult for your users to find information, but it also brings down your overall page experience score.
Optimising your website’s overall design and layout is crucial because these six ranking factors are rewarding websites that deliver an excellent user experience overall – and design is a vital part of that.
For example, if you’re using pretty large images across the page, it’ll take a lot longer for your site to load. If this happens, your Largest Contentful Paint score may be deemed as “Poor” – which affects the site’s overall page score and, in turn, how it ranks on Google.
There are many ways you can play around with the design of your website to keep it as user-friendly as possible and ensure a glowing page experience report. So read on – we’ll break them all down below.
Our Web Design Tips for Core Web Vitals
Use Simpler Templates
Way before you get into your creative flow, website builders and CMSs ask you to pick a preferred template to match the sort of layout and aesthetics you’re going for.
The good thing is that some of the best websites out there adopt a sleek, clean design layout, which means you won’t be far from current UX design trends if you go for a more straightforward template.
The more code, the slower the load
Choosing a more straightforward template over a complex one impacts a site’s loading time and user experience. That’s because more basic, stripped-back templates are built with less code.
Code can become bulky and disruptive if it contains too many unnecessary characters, so it’s better to keep it minimal where you can.
It’s also important to note that some website builders don’t let you switch your template once the site has gone live, so make sure to check this beforehand, too!
You’ll want to look for lightweight templates and ones that aren’t overloaded with built-in features that end up slowing down your site.
Although you’ll have to sacrifice some of your creative freedom of expression, the SEO impact is worth it in the long run!
Image Optimisation
We’re all in favour of using images on any website because they’re ideal for engagement rates and help build a page’s character!
But be careful that they’re not having detrimental effects on your site’s loading time. Here are a few ways you can optimise your images when designing your website:
- Add relevant keywords to the captions of your images.
- Compress the images to reduce the file size without compromising on quality.
- Add keyword-rich alt text to your images because search engines use alt text to match your images to specific keywords.
Most sites enjoy having a big hero image at the top of the homepage to capture their audience instantly.
Although this certainly gets our attention, what will stand out more is how long it takes to load on the page. Try to use smaller, optimised images instead of larger ones – sometimes the hero might just be the villain!
Another tip is to be ruthless with your images and get rid of any that don’t add value to your content! Remember, less is more when it comes to optimising your site against Google’s new metrics.
Cutting Back on the Web Fonts
It’s easy to get ahead of ourselves when our creative juices are flowing, and sometimes we end up using more custom web fonts than are needed.
Some sites fail to load these fonts properly, which can cause many performance issues down the line.
Have you ever clicked on a page and witnessed that strange font-swapping during navigation? It doesn’t look so great for users and is a pretty clear indication of slow loading time.
We recommend sticking with two fonts to keep things nice and straightforward – one for your headings and one for the body copy. Better yet, use browser-supported fonts for the most optimised results in line with Google’s metrics.
Adding Dimensions to All Visual Elements
One of the key metrics Google is scoring your website on is Cumulative Layout Shift (CLS). This looks at any unexpected movements in a page’s content when the user is reading through it.
We all know how annoying it is when elements start jumping around the page, and a lot of this can be fixed by adding dimensions to video and image elements.
By adding the right height and width size attributes to these elements, you’re telling the browser how much space needs to be reserved for these elements to load efficiently. This then avoids your content shifting around in front of the user’s eyes – and saves us from “website owner embarrassment” (it’s a real thing!).
Hold Back on the Ads!
Not many people will know this, but displaying ads on your site is a huge hit (not the good kind) to your speed. We know ads generate revenue for many website owners, but it’s worth checking how it’s affecting your page and traffic. Here’s how you can do that:
Go to one of your low traffic pages and disable the ads on just that one page. Run that page through various speed tests such as PageSpeed Insights and navigate through the issues it shows you.
Once you’ve fixed all of these speed issues, feel free to reactivate the ads – and remember to check that they’re slotted into fixed image sizes to avoid the page jumping around!
It’s also possible to check with your ad partner about how they’re working to improve their platform with Core Web Vitals. You don’t want to risk your search ranking by scoring lower with CLS and LCP.
How to Test Your Website Today
Once you’ve optimised your website’s design, there are a few ways you can test your site against Google’s Core Web Vitals to keep track of its performance. Here are the two main methods you need to know about:
Google Search Console: Core Web Vitals Report
Google Search Console lets you see your Core Web Vitals report for both mobile and desktop settings. From our graphics throughout this guide, you’ll notice that performance has three indicators: Poor, Needs Improvement, and Good.
When you go into Google Search Console, you’ll have access to your report, which provides a detailed breakdown of how your site performs against each metric. What’s great about this is that you know what needs improving to bump those scores up.
For example, if you see that Largest Contentful Paint (LCP) indicates “Poor,” you’ll need to identify your most prominent on-page element. If it’s a large image covering the screen, you can implement our image design tips above to solve this!
PageSpeed Insights
PageSpeed Insights is a straightforward way to get a complete analysis of how your page is doing. Like Google Search Console, it will give you indicators and overall speed scores out of 100.
By inserting your URL into the search bar, you’ll be able to see suggestions on how to make that page faster and, therefore, enhance the user experience.
The significant advantage of using PageSpeed Insights is that it tests your page in real-time. Even when you’re making changes to your site, you can keep going back and checking your scores to see the progression in scores!
0 – 49 is bad (“Poor”)
50 – 89 is okay (“Needs Improvement”)
90 – 100 is best! (“Good”)
Check out this detailed breakdown of PageSpeed Insights to help you test and optimise your site further.
Core Web Vitals and Web Design Summary
Here, we’ve covered all there is to know about how to design your website in line with Google’s new page experience metrics.
Although it may feel like we’re sucking the fun out of the creative process by cutting down on large images and trashing the funky fonts, it’s a process you have to trust!
By keeping things sleek and minimal, you’ll be giving your website a much better chance of loading faster and keeping your visitors on your site for longer.
So, just to recap, our top design optimisation tips for Google’s new ranking factors are:
- Using more straightforward templates to avoid as much code as possible
- Cutting back on the complex web fonts
- Optimising large images and adding alt text for search engine use
- Adding dimensions to all visual elements to reserve space on the page
- Deactivating ads and reactivating them once speed issues have been resolved
Although it may feel daunting to go back and optimise against these metrics, Core Web Vitals proves to be an exciting new direction for the world of web and user experience.
As long as you’re on track to providing an excellent user experience, you’re heading in the right direction. Time to get designing!
