Google Core Web Vitals

Written by Samantha Mythen

Google sets new goalposts for website performance

As a world leading company, Google watches carefully how search behaviour changes. Every so often, Google announces a new standard that web designers have to aspire to, in order to improve customer experiences on websites. They recently announced a new “standard” that websites will have to reach by May 2021, called “Core Web Vitals”.

You will remember a few years ago when everyone had to ensure their website would render on a mobile phone. Everyone rushed to make their websites “responsive.” Then we had to move from http:// to https:// to keep our credit card details secure when we enter payment details.

Next, last year they said they were going to make the mobile version of websites the one they crawled so your seo data had to be set up to work with shorter text on mobile versions of websites.

And Google added a speed incentive: websites had to download in less than 4 seconds or they were penalised and pushed down the rankings if they were slow.
Fair enough. Google knows that you can improve your website’s conversion if the site downloads within 4 seconds.

When Google brings in new standards, they give web designers a heads up, a good 9 months before the change will become a ranking signal (i.e. if your site doesn’t achieve it, your site might fall in search results. They do this by having something called Google Console. Basically we put a bit of code in the top of a website that proves to Google we are authorised to make changes, and they then know who to email when there are important updates such as Core Web Vitals.

So what are Google Core Web vitals?

Core web vitals are three important factors that influence how quickly a page is “usable” to visitors, such as how long it takes to be able to view the information on the first screen before scrolling, and how long before the buttons etc actually start working. Essentially it’s a whole lot of techy nerd things that can be scored, and we have to up the game again to keep speeding up how quickly websites become usable.

What are the specific measurements?

Google uses three specific page speed and user interaction related measurements. These are:

Loading

This is a metric that measures the time a website takes to show the user the largest content on the screen, complete and ready for interaction.  Watch out if you have big banners!  This is influencing a trend to big font headings instead of big pictures.

Google considers only the content above the page’s fold, meaning everything that appears before you start scrolling. This includes images, video thumbnails; background images and text elements such as paragraphs, headings, and lists.  Essentially, the server has to go back and forth and say “oh where’s this website file hosted?  What is the theme? Where is the logo? Now I need the menu, oh and the banner.  Heck where’s the menu? Gee there’s three fonts? If only there was one…”.  The server goes back and forwards to get all the elements.

Google is wanting us to build sites so there are fewer trips to get the elements (some could be clumped together to save trips, like sharing seats in a car).  Google wants us to ensure that there’s no extra bits that are unnecessary that slow the experience down.  For example, sometimes older themes mean you have to bring down a whole lot of stuff for desktop, when you only want the smaller items sized for mobile phones, if you’re on a phone.  Other times, there might be whizz fang bits of code to do fancy moves, but they are actually only needed on other pages deeper in the site – so why have it on the home page).

This metric is called Largest Contentful paint (LCP) and here’s what is considered good, bad or indifferent (yes there is a link later so you can see how your website scores).

lcp

Interactivity

is a metric that tracks the time from when a user first interacts with a web page after entering it, to the time when the browser can start processing that interaction. So basically, the delay between when you click or tap on something like a link or a button, and the time that the browser responds to your action and starts processing it.
This metric is called First Input Delay (FID) and is measured in milliseconds (ms).

fid

Visual Stability

is a performance metric that measures how reliable the page is in terms of what elements move unexpectedly on it. User-initiated shifts of content occur when content on the page moves around due to a user action, e.g. clicking on a search bar and a new menu appears. In contrast, unexpected layout shifts happen when content on the page moves around without user input or prior notification e.g. trying to click on a button and the content moves due to a pop-up.
This metric is called Cumulative layout shift (CLS)

cls

Why is it important to perform well on these metrics?

Over the past few years, Google has increasingly focused on defining evaluation parameters to enhance the user experience. User experience is a differentiator, as well as a fundamental parameter for sites to be found on the web. That’s why it’s not enough to have good content, attractive products, and sophisticated design. Agility in page loading, interactivity and visual stability are essential parts that are not only favourable for the user itself but also direct ranking factors.

So, if you care about your ranking and user experience, you must take time to work on your web vitals before May 2021.

If you’d like to see how you scored on Google’s last speed test, you can check your site here: https://developers.google.com/speed/pagespeed/insights/
To see how your site is looking on Core Web Vitals, the reports are full of technical details and nearly all sites need improving. Yep. Raising the bar.

There is an endless stream of things that can be done, but we recommend allowing a block of 10 programmer hours to work on your Core Web Vitals. It’s a good thing to get done in the first quarter of 2021.

You have any questions or wish to know your score, give us a bell.
Your healthy core web vitals are just a call away.

alex-core-vitals-diagram-v2

Start typing and press Enter to search

Call Now ButtonCall Us Now