GOOGLE’S CORE WEB VITALS: WHAT ARE THEY, AND WHY SHOULD THEY MATTER TO BUSINESSES?

Have you heard of the term Core Web Vitals? If you have, you might not be clear on exactly what they are and why you should care about them as a business. We’re here to tell you that they do matter to business owners because they’re already impacting how a website ranks for different search terms. And that changes the traffic that Google sends their way. So, let’s dig in and get to the bottom of Google’s Core Web Vitals, so you know exactly how they will impact your business.

What Are Core Web Vitals?

Google needed to better understand the speed and functionality of websites. It had to be done in a standardised way so that it could be applied to all websites. They also had the idea that they wanted to encourage website owners to participate in improving how quickly their websites loaded. And if they tied the Core Web Vitals metrics into search engine ranking – mostly on the bad side – people would pay more attention to it. This was also combined with a move to prioritising mobile site indexing first, and desktop indexing second. At this point, it became obvious that the web had a speed problem.

Core Web Vitals at the time of writing refers to three metrics that measure site performance in different ways. This is shortly to increase to at least four metrics, with plans to add additional ones in the coming years, but as of early 2022, there are just three. The Core Web Vitals are:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shifts (CLS)

Why Do They Matter to Businesses?

As we mentioned at the top, poor scores on a site’s Core Web Vitals can trigger Google to reduce the ranking for certain keywords – or across the board, if the site loads slowly on all pages.

Deciding Factor in a Ranking Tiebreaker

Google uses many ways within its complex algorithm to decide what pages to rank and in what position. Sometimes, it is a tossup between two competing pages with Google not initially knowing which should get the better spot. The deciding factor can then be the site with the better Core Web Vital scores because it’s seen as providing a better user experience.

Good Way to Judge Site Speed/Performance

Using a speed tool like the one from Google to verify performance is also beneficial because it provides pointers to where to look to start making improvements.

Depending on how deep you dig into the scoring and the data behind it, it’s possible to isolate problem areas slowing the site down and to know what to avoid in the future.

Many business owners are blissfully unaware of how slow their site is when they connect to it on super-fast fibre from their office. Not everyone has the same lightning-fast internet connection. Scores are based on slower connections. For mobile testing, smartphone connection simulations offer more realistic metrics.

Core Web Vitals 101

The Core Web Vitals are broken down into three metrics. These are explained one by one below:

Largest Contentful Paint (LCP)

The Largest Contentful Paint is a metric relating to the largest image, video, or other content on the page. It’s usually the most time-consuming thing for a web browser to download.

It’s also possible that it is blocking other content from being seen below it while it’s loading. Therefore, it’s the bad guy here.

An LCP of 2.5 seconds or quicker is a good score. Between 2.5 seconds and 4 seconds needs some improvement, according to Google. Anything above four seconds gets a downvote.

Improvements that can be made for a large image include turning it into a progressive JPEG file that loads gradually, rather than all at once. Also, a WEBP file format version that’s faster to load on compatible web browsers is a good addition. Making the image smaller in dimensions or compressing it also reduces the file size.  

For video images, if it’s an embedded YouTube or Vimeo video, then the embedding itself is resource heavy. However, it’s possible to use an image with a button in place of the video. Here, when clicking the button, it loads the embedded video following a user interaction after the page has loaded.

For WordPress CMS users, there are plugins like Lazy Load for Videos plugin that can do this automatically for you.

First Input Delay (FID)

The First Input Delay (FID) is based loosely on how long it takes before the user can begin interacting with the content or page.

Under 100 milliseconds is good, between 100ms and 300ms needs beefing up, and above 300ms is a poor rating.

With this metric, many things can delay the display of the text of an article or a home page from showing properly. These usually include JavaScript code doing some fancy computer gymnastics. However, this can be deferred until the end of the page load to stop it from “render-blocking.”

Cumulative Layout Shifts (CLS)

The Cumulative Layout Shifts (CLS) are based on content blocks that keep moving around as the page is loading. This happens because images, videos, or advertising are loading in where the width and height are not stipulated. The web browser won’t know how much blank space to leave for them while displaying the page’s written content nearby.

Ultimately, the browser will guess wrongly, leading to the space closing smaller or opening wider when the image or video is fully downloaded for the browser to display. This process causes blocks to keep jumping around the visually distracting page, especially on a slow internet connection or older PCs/devices.

The metric is good at less than 0.1, needs some work between 0.1 and 0.25, and is considered poor if it’s over 0.25. The main fix for this is to ensure all media has its dimensions specified.

Improving the Scoring Metrics

It is worth working with people who know how to improve the Web Core Vitals. If they’ve worked on plenty of websites before and made significant strides to improve their scores, then you’ve found a winner.

Once improvements are made, it’s possible to draw up a list of good practices to follow when adding new content or making changes to the site. This avoids fixing speed issues and then making them worse again for new content. Some examples might include how to optimise images for speed and testing for new speed issues regularly.