Core Web Vitals

ByGiulia Bezzi, Kleecks Brand Ambassador

Google gives us new indications on how users want to navigate the pages and talks about “core web vitals“. These are considered as fundamental by Google to judge a website in terms of the best user experience.

When Google calls, urging to evaluate whether our website meets its requirements, it is a good idea to listen and catch up.

Core Web Vitals

During these last months, I have been talking about three words that define a performing website and, therefore, with better chances of being in the first search results: speed, usability and content.

And here is that Google underlines what they already claim: fast and usable site.

The “core web vitals” speak, in fact, of this. We have been in the mobile era for some time, we must think that the user is always faster in browsing, he has knowledge of the layouts with which the websites are created, after having navigated them for years and quickly understans how to move around.

Pay attention to it when you surf, notice how quickly you are ready to see a product catalogue in an ecommerce or a list of articles in a blog. The browsing experience accumulated over years of research, is part of all of us and if we do not recognise certain elements or we spend to much time to try to read a resource, we are not at all soft: we abandon the site and look elsewhere.

Google itself provides us with some interesting data on the performance of the page in the Search Console help:

  • If the page load time increases from 1 second to 3 seconds, the bounce rate increases by 32%
  • If the page load time increases from 1 second to 6 seconds, the bounce rate increases by 106%

You can try yourself to see how your website is doing and then ask Kleecks to help you avoid problems and a low score.

But let’s see together what are the core web vitals that are collected in an easy to read table:

Different Web Core Vitals

Loading – Largest Content Paintful (LCP)

The amount of time it takes for the biggest element of the page (image, video or a block of text) to be completely visible to the user, when asking for that page.

I am sure you have experienced entering a page and not be able to immediately view the elements of which it is composed. This generates a bad user experience, not everyone wants to wait for the loading, possibly thinking that the page has something wrong. And so, leaving the the page and consequently increase the bounce rate is ensured.

We must therefore avoid that the biggest page element is visible in more than 2.5 seconds.

Let’s see two examples directly taken from Philip Walton’s post on web.dev.

Web Core Vitals Example 1

In green the biggest element of the page, which in this case seems to be the title, but when fully loaded it is clear that the image should have appeared first

In this second case, however, we see how the text block loads immediately, provides immediate information and, although the images may seem bigger, being one behind the other, they are not smaller, and the text block remains the bigger element with a very low loading time.

Web Core Vitals Example 2

Interactive – First Input Delay (FID)

The time that elapses between the user’s first action on the page (a click on a call to action, a link or an image, for example) and the browser’s response to that action.

To be a good result it must be less than 100 ms, giving the impression that when clicking the required resource is immediately clearly visible.

The metric is based on the first delay because we know well that if, at the first action of the user, the result is a poor performance, there is a greater possibility of letting the user exit the page.

People do not want to wait, at the first occasion of a poor interaction, rather than trying again, they prefere to choose another website where to search for the information they need. If the page has loaded quickly but does not respond to actions as well, it will not return a good browsing experience to those who are reading.

Visual Stability – Cumulative Layout Shift (CLS) 

The amount of the page layout that changes while the page is loading. The score is rated from 0 to 1, where zero stands for no change and 1 for the biggest change.

It is an experience that we have all gone through: we enter a page, start to see the page loading, scroll to see the rest of the content and the elements of the page unexpectedly move.

It also happens when we are about to click on an image, a banner or a call to action, risking doing something we did not want to do, maybe clicking a link of little interest to us.

If the content is not stable, we do not feel comfortable, a little bit like removing the earth from under our feet, right?

These metrics have been around for a while, but when Google highlights them, underlining that to help developers has given new indications in Google Search Console and has updated the tools available, such as PageSpeed Insights and Lighthouse, it is appropriate to take action and evaluate the URLs of our website. With Kleecks, the problem does not exist, because core web vitals are part of its core functionalities and this is one of the best improvements that the SaaS, of which I am Brand Ambassador, provides to any website that adopts Kleecks.

 

People do not want to wait, at the first occasion of a poor interaction, rather than trying again, they prefere to choose another website where to search for the information they need. If the page has loaded quickly but does not respond to actions as well, it will not return a good browsing experience to those who are reading.

If you think you have such problems, the Kleecks team is ready to come to your support and show you what it can do for you, contact them!

Get in touch

Case Studies & Resources

By |2020-07-01T17:52:18+01:00June 22nd, 2020|Kleecks, Tech Optimisation|

About the Author:

Giulia Bezzi
An entrepreneur, expert in SEO and Content Marketing strategy, with myI am committed with my company to find the best way to make websites bubble up in Google's search results pages. It is the best way to grow your business online. I am Kleecks Brand Ambassador, the latest generation of SaaS in marketing, which facilitates my work with the developers and the SEO team of companies, focusing on strategy for the conversion from organic traffic, saving time and resources as well as costs to obtain long-lasting results. I believe that we should abandon our resistance to change, let ourselves be helped by artificial intelligence and new technologies to better enjoy the stimulating part of our work. That's why I "married" Kleecks.