Core Web Vitals: A Brief Overview

Many site-owners are trying to figure out why their website’s ranking has been plummeting, and panicking as their bank balance drops as a result. While there are of course a couple of things that could be causing this, the most likely cause is that your website does not pass Core Web Vitals.

Google first introduced Core Web Vitals in 2020, and they have been gradually implementing and refining them since its announcement date, especially since they switched completely to Mobile-Indexing in March 2021.

If you haven’t been paying attention to your site’s Core Web Vitals, there may not be any significant impact on your site, if you do not have a lot of traffic. However, since September 2021 any site that doesn’t pass Google’s Core Web Vitals is likely to suffer the consequences quite significantly when traffic increases.

Let’s dive in and we’ll give you a brief introduction to Google’s Core Web Vitals.

What are Core Web Vitals?

If you haven’t been following Core Web Vitals’ incremental updates, you can check your site’s score in your Search Console under the ‘Enhancements’ tab.

Core Web Vitals are user-centric algorithms that Google’s crawler bots consider essential to create a better user experience (UX) for a website’s visitor. Google considers Core Web Vitals as ‘a new way of highlighting search experience in Google’, which means they are major ranking factors in addition to the previously existing user-experience metrics, including:

There are many Web Vitals at play however the three that Google consider the Core Web Vitals are: LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift). Let’s talk about what each element of Core Web Vitals contributes to a user’s experience.

Largest Contentful Paint (LCP)

LCP refers to how long it takes to load the largest single element on your page. The LCP (Largest Contentful Paint) metric reports the render time of the largest text area or media shown within the viewport, in relation to when the page first started loading.

In the Largest Contentful Paint API, there are currently five elements being measured by their render time:

These are the initial elements to help developers ease their way into adapting their sites to LCP guidelines. There is a possibility that other elements may also be added to the LCP category.

However, it’s not the same as other page speed or load time measurements. Time to First Byte (TTFB), for example, measures a web server’s responsiveness, whereas LCP represents the perceived scenario that involves real users.

You can see your entire site’s LCP from the Core Web Vitals report in your Google Search Console. From there, you can see each page’s Page Speed Insights to see which are performing poorly and what part of them take the longest to load.

The ideal goal would be optimising everything on every page on your website to load in under 2.5 seconds, which is the threshold to achieve the ‘good’ LCP score.

Unlike other page speed measuring tools, the data provided by Google’s Page Speed Insights (PSI) is much closer to real-world situations since everything is collected from users’ Chrome browser data. Also, if you haven’t yet had enough traffic to your website, PSI will give you a “lab” result, based on all the metrics it can use and the average user experience, which will adjust once Google assess the user experience data specifically on your websites user experience.

Google also provides their guidelines on LCP, which you can use as a reference for improving your site’s score.

First Input Delay (FID)

While LCP measures how long it takes to load the largest single element on your page, First Input Delay goes one step beyond that, by measuring the time it takes your user to interact with your site.

The interactions being measured as FID include:

Google takes FID as a user-experience (UX) metric because it represents how well your page’s layout performs in terms of interactivity with users.

In website development, there are thousands of lines of code involved, which means some codes are loaded earlier than others. You might have experienced this when you load a website on your phone, but when you try to play a video or click on a link, nothing happens.

This input delay, otherwise known as latency, happens because the browser is busy rendering something else. One of the most common reasons for latency is the presence of JavaScript on your site that needs to be parsed by the browser.

It would be rather difficult to build a modern website with no JavaScript. The art is considering what is necessary, then building that with the minimal use of JS possible.

In short, when your site’s FID score is poor, it could mean that you must optimize the code for interactive elements on your pages to fire and be effective as soon as the page loads.

Similar to LCP, there are thresholds that you have to achieve with FID. Google PSI sets the ‘good’ threshold for FID at 100 milliseconds or less.

On pages where interactions rarely occur (e.g. blogs), FID is probably not the first thing you should be overly concerned about. That said it may not be a priority on these type pages but should be kept in mind if you want to pass Core Web Vitals.

However, on other pages where interactions do occur, or are expected to occur, such as landing pages, sign-in pages, and download pages, FID is a significant factor that could sink or raise your entire site’s performance in Google’s Search Index.

Cumulative Layout Shift (CLS)

The simplest definition of Cumulative Layout Shift is how much and how many of the elements on your page move (shift) around as it loads up in the browser.

Google considers this visual stability necessary because when everything stays in place as the page loads, users don’t have to find where links, images, videos, etc. are located once the page has loaded completely, or worse you click an element before the page is completely loaded which turns out to be another element than intended.

Not only is this highly frustrating as a user, it also creates an issue in bounce rate because the natural instinct is to hit the back button and try again (or worse give up and go to a competitor’s site instead).

Chances are you have likely seen websites with images that shift downwards or sideward when the page completely loads. These types of experiences are mostly just an annoyance on the user’s part but in some cases it can cause real damage. For example the slight shift of the ‘Confirm Payment’ button, or losing what you are reading, because the page is still loading and shifting around. NOT good!

To achieve a good user experience, and therefore a good CLS score, the elements on your page need to stay put as other elements load in the browser.

The threshold for a ‘good’ CLS score is 0.1 or less for the 75th percentile of page loads on mobile and desktop devices.

Why Core Web Vitals are Important?

Previously, UX (user experience) was merely a vague metric for search engines – but with Core Web Vitals now in full swing, poorly designed/coded websites may no longer even make the tenth page in SERPs. In fact, if your site is desktop only, it is likely to be dropped from the primary index altogether.

That said, there are several things that you can do right off the bat to improve your site’s UX:

While the items in the list above may look pretty simple, they can be very challenging in actuality, especially those involving modifying scripts.

If you don’t want your site to drop to the last pages of the SERPs, you need to start focusing on your site’s Core Web Vitals and UX. And better sooner rarther than later.

That doesn’t mean that you should disregard your content’s quality. As Google themselves point out – a good page experience doesn’t override great content. But, in cases where there are multiple websites with similarly excellent content quality, the page experience will determine which one will rank better in search results.

Why would you spend all that time researching, studying, practicing, gaining all the knowledge needed to create relevant unique content, type and edit that content for your audience, only to put it on a website that will never be seen?

Great content should sit on a strong foundation of a high-performance Mobile-First website that passes Core Web Vitals. Like most things, the secret shortcut to success is doing the work and avoid wasting time and money on “shortcuts”. If you do not know how to do the work yourself, then hire someone that does.

Core Web Vitals are now a very important ranking factor in Google. You must act quickly and efficiently to achieve a ‘good’ result in all three primary factors, while keeping your content quality on par with your competitors or ideally better. It’s now more important than ever to focus on improving UX and Page Speed, which also helps reduce the CO₂ per page view.

Right now, you have a real, open opportunity to leap ahead of your competition. Use it to your advantage.

At BusyDAZE we use our own proprietary software to create lightening fast, high performance Mobile-First websites that are Core Web Vitals and UX compliant. If you would like one of our pro specialists to help create the perfect foundation for your great content – Get in Touch Today!