Google Core Web Vitals explained

Do you belong to the group of bloggers and website owners that all of a sudden worry about the Google Core Web Vitals? 

I am here to tell you not to worry. But you are well advised to pay attention. Because there is more to come and the direction is clear. 

Here you will find the Google Core Web Vitals explained in plain language. And when you understand what they are, you will also know what to do.

Google Core Web Vitals – the surprise that was announce a long time ago

We could actually read about the Google Core Web Vitals already in May 2020.

“Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience. They measure dimensions of web usability such as load time, interactivity, and the stability of content as it loads (so you don’t accidentally tap that button when it shifts under your finger – how annoying!).“

This short paragraph clearly states the direction and importance of user experience and delivery performance. 

To paraphrase Winston Churchill this announced move “.. is not even the beginning of the end. But it is, perhaps, the end of the beginning.“

And this is why you need to pay attention. The focus on user experience and performance of delivery is here to stay.

Understand, measure, improve – using Core Web Vitals to excel

As we know that the focus on user experience is here to stay we need to understand what the metrics actually are and what they measure.

Because the good news is that we can measure our performance. And when we can measure we can improve. And when we can improve our performance we have nothing to worry about. 

See, I told you. No need to worry.

Now, let’s move on to understanding the Core Web Vitals’ three core concepts.

Warning. The terms do sound abstract and “techie” but stay with me. They make perfect sense. And for all of us who try to build a website the right way they kind of cement what we knew all along – user experience is key.  

The core concepts are Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS).

We will now move on to explaining and understanding each concept.

Largest Contentful Paint (LCP)

LCP simply measures the amount of time it takes for the largest element on your web page to load in the visitors browser.

And when we say element it can be a movie clip, a youtube video or a large image for that matter. 

This does however not mean that the entire web page needs to load. LCP is just interested in the main content of your web page. 

The logic is that the largest element surely has to be one of the most important parts of the web page. Right? After all, who would include a large element on a web page if it is not really important. 

How fast is fast you may wonder? For the user experience to be good we need this important largest element to load in less than 2,5 seconds.

This further hammers home the importance of compressing and optimizing your images as well as web pages for speed.

To evaluate your LCP look at the graded scale for LCP below as measured from when the page first starts loading.

Largest Contentful Paint (LCP) summary

LCP measures loading performance from when the page first starts loading. You need to deliver a LCP of less than 2,5 seconds to deliver a good user experience. 

First Input Delay (FID)

FID simply measures how quickly a visitor can interact with a web page. 

Interact you ask? Interacting with a web page would for example include clicking a link or submitting a form and for that interaction to yield the desired result.

We have all arrived at a web page and clicked a link and then the page simply continues to load in our browser. And then, after a while, we have to click the link again. Needless to say, that is not a good user experience.

FID sets out to capture the time it takes the web page to not only display but also the time it takes for the browser to react to visitor interaction.

You could simply say that FID measures how quickly a web page is usable and not just a pretty image.

First Input Delay (FID) is measured in milliseconds 

First Input Delay (FID) summary

FID measures the time it takes for a web page to become interactive or usable. You need a score of less than 100 milliseconds to deliver a good user experience.

Cumulative Layout Shift (CLS)

CLS measures how quickly a web page reaches a stage of visual stability.

We have all arrived at a website and when trying to click a link or a button the layout shirts and we find ourselves clicking a blank canvas.

The situation described above happens when a page has not finished loading or ever found its final form or layout. 

Today websites need to load fast and smart as we have to contend with devices with varying screen resolutions and responsive designs to contend with these variations.

But as the user experience is key we need to make sure that the web page is loaded in its final and correct layout in a speedy and stable manner.

I would like to point out that CLS is designed to measure unexpected shifts in layout and design. Consequently, if the visitor were to click a link and the page reveals more text as a result this would not affect the CLS score in a negative manner.

Cumulative Layout Shift (CLS) is measured as a factor of the layout shift and the impact it causes. It is a somewhat complicated calculation and you can learn more here.

Cumulative Layout Shift (CLS) summary

CLS measures the time it takes for a web page to reach visual stability. You need a score of less than 0,1 to deliver a good user experience.

Summary:

The Google Core Web Vitals are all about loading time, interactivity, and the stability of content as it is loading in the browser.

You should regularly test your web pages for the Core Web Vitals. The idea of delivering a superior user experience is nothing new. But the focus on the Core Web Vitals is a firm indication of where we are heading. 

And if you think about it it makes a lot of sense. Today almost everyone uses YouTube channels in addition to written content on one and the same web page.

Maybe this is a great method of delivery. Or maybe we must learn to sometimes say no to some opportunities and not just to keep piling it on just because it is available.

With the added complexity and abundance of available technologies Google’s Core Web Vitals serve as a reminder not to forget the user and the user experience.

Maybe we should be brave enough not to always offer everyone everything? After all, is it really necessary for every single web page to offer an embedded feed or video of some sort?

Whatever you decide it should be clear that you need to focus on LCP, FID and CLS going forward.

I will leave you with a quote from Google from April this year regarding the reasons behind the Core Web Vitals. I leave it up to you where you go from here.

“Our vision for page experience is to build a web ecosystem that users love—together. We’re hard at work to make sure that you have the right tools and resources available before the ranking rollout starting in mid-June 2021.“