web vitals

Google Core Web Vitals – New KPIs for UX & SEO

Finally, we have SEOs, something to learn again! Also, hard vital figures that are measurable! LCP, FID, and CLS will keep us busy from today until well into the next few years – that’s my assessment.

The whole thing is quite complicated, and there are many misunderstandings to clear up. The terms don’t mean anything to you yet, neither do “Web Vitals”? Then read this blog post – it will be necessary!

Google Core

What are Google Web Vitals?

For years, Google has included UX (user experience) in the ranking of websites. How this was and is done has been and remains a mystery. Artificial intelligence, click data, layout rendering, and lots of data are probably the basis.

What Google has always had in mind: to get webmasters and SEOs to get more involved with UX.

How does that work best? With simple vital figures, a scale from good to wrong and warnings in the Search Console. The Web Vitals have managed to put mobile UX into three key statistics.

Until now, mobile usability, safe surfing (i.e., without spreading viruses and malware), HTTPs, and no annoying interstitials (popups) were the official UX signals for Google.

The new vital figures are:

  • Largest Contentful Paint: Simply put, this key figure tells you when the main content is loaded.
  • First Input Delay: Tells you when to wait the first time for input to stop.
  • Cumulative Layout Shift: Roughly speaking, this key figure tells you by how much the content is shifted down during loading.

This is just a rough understanding. On closer inspection, it becomes a little more complicated, more about that in a moment. 😉

Here’s a guide that will show you: How to optimize your wordpress website.

web vitals graphic

Putting that right into the announcement shows two things:

  • Google wants to communicate clearly from the beginning. There was some criticism due to the last Core Update because it went live unexpectedly in the middle of the Corona crisis.
  • There will be effects on the ranking of websites. The first Panda update was communicated so clearly and with such a big lead time.

We would also like to thank the Search Quality Team, which has been criticized so much. There will still be criticism afterward, but at least this time, you can’t be accused of not warning anyone.

How strong the effects will be in the end, nobody knows. My feeling is that the impact will not be so significant in the beginning. But Google has already stated that they will continue to develop the Web Vitals.

So the issue is not a flash in the pan, it’s an entirely new core area in search that will evolve. The term “Core” Web Vitals, which already evokes associations with the Core Update, also speaks for ranking relevance.

If you love your website, then it’s best to start working on it now. If you are planning a relaunch, then take that into account.

Why key figures?

The Search Quality Team has correctly recognized that simple numbers are what most motivate webmasters to change things. PageRank, Speedbacklinks visibility index, Domain Authority (often used by link sellers), and the Page Speed Index all work well when you want to make real changes.

Fewer people will understand the calculation of the critical figures than the Pagerank or the visibility index because it is much more complicated.

But the fact that it can be “streamed” into a number speaks volumes. I think the whole thing is a successful PR coup. In the future, the CEO will call the developer and say, “Our CLS score is way too high, it has to be lower.” And he’s right!

Largest Contentful Paint: When is your main content loaded?

Largest Contentful Paint

The first core web vital indicator is called Largest Contentful Paint. In short, it measures the website’s loading time, but in the smartest way of all.
Until now, there have been several website speed indicators:

  • Time to First Byte is when the first byte is sent back from the server to the client.
  • DOM Content Loaded means when the complete source code was loaded.
  • First Contentful Paint means when the website shows some content for the first time.
  • First Meaningful Paint is when the website shows some content for the first time, which is something different from the logo and has some meaning.

The Largest Contentful Paint is the most ingenious option – It shows when the largest block of content has been loaded – which is usually the main content, and therefore what the Google Quality Rater Guidelines (PDF) call the most essential part of a website because the main content serves its purpose.

How is the Largest Contentful Paint calculated?

Here a look into the documentation, which is very detailed, helps. Put simply, and it’s the most massive visible area within the Viewport, the part of the screen that is visible on a mobile phone without scrolling.

The LCP should be loaded within 2.5 seconds maximum. In this case (see the big graphic above), you are in the green area – of course, as a reader of Speedbacklinks, you are not interested in anything else. 😉 The size of an element is best seen by rendering the mobile version via the Search Console – but there are some exceptions.

For the details, see the documentation here. Google also gives a lot of tips on how to improve your LCP value in this blog post. It’s all about website performance, i.e., your page loading speed.

But now it’s no longer the total loading time that matters, but the time when your main content is loaded. That’s logical, isn’t it? You probably don’t care when the footer is loaded at Amazon.com – you want to see the article picture and the price as soon as possible. What a high figure! 🙂

First Input Delay: When can you interact with the website for the first time?

first input delay

Roughly speaking, the code FID means when the browser can react to a user input for the first time. Often it is like this: You visit a website. You rarely wait until it is fully loaded, but click on a text field or button as soon as possible.

Most of the time, something does not happen immediately, because the browser and the website are still busy loading the site in the so-called main thread.

Therefore there are delays here, and these are bad for the user experience because you don’t want the website to load completely when you already want to move on to the next URL! The First Input Delay measures how long it takes from user input to browser response.

In the graphic below, you can see the typical loading of a website. The beige time intervals are significant because they indicate that there are times when the website does not react immediately to user input during the loading of a website.

First, Input Delay is only measured after the First Contentful Paint, but then, there are several interruptions. Therefore, this key figure is also measured “in the field,” i.e., with real user data. You can best retrieve this data in the Search Console in the new Core Web Vitals Reports.

When optimizing, you should concentrate on the TBT (Total Blocking Time). This is the time between FCP and TTI (Time to Interactive): The time between when you see the first content until the website is fully interactive. This is easier to measure and does not require user data.
First, Input Delay is not TTI (Time to Interactive), by the way. FID is about the time when a website is already partially loaded but not yet fully interactive.

Cumulative Layout Shift: How is your visual stability?

Cumulative layout shift

Do you know it? You visit a website and try to interact with it while it loads. However, while loading, the content keeps shifting and sliding down. That sucks, doesn’t it?

Simply put, the CLS (Cumulative Layout Shift) value describes how much the content shifts during loading, and the more, the worse.

How is the CLS calculated?

On the one hand, it depends on how often the elements move and how far down they move. As always, the starting point is the viewport. The CLS is calculated using the Impact Fraction and Distance Fraction.

Impact Fraction is the crucial figure that indicates what percentage of the screen is moved between two frames in total.

Impact Fraction

The Distance Fraction measures the distance that unstable elements have moved on, relative to the viewport.

The calculation always takes the most extensive distance that any element has moved within the frame.

The following formula then applies:
Layout Shift Score = Impact Fraction x Distance Fraction.
In our example, 0.75 x 0.25 and thus 0.1875. This would then be in the yellow range – still acceptable, but already in need of improvement.

There are other subtleties in the calculation of newly appearing elements and also of several elements that would be super suitable for a higher failure rate in the SEO specialist certificate of the Federal Association of the Digital Economy à la “Calculate the CLS in the following graphic, you are welcome to use a ruler and a calculator,” but we’d rather leave that alone.

Instead, I refer you to the documentation from Google and the fact that you can find this value with various tools, such as in the Google Search Console. However, you have to understand why and how a high value can be achieved just by “trying around” it doesn’t work. Again there is a blog post with tips for improvement!

What next?

Google has put a lot of work into documenting these new values and implementing them in all of its tools. This alone shows the seriousness with which this is being done, in my opinion.

Webmasters have until 2021, but you can be sure that the time of bad mobile usability 2021 is over. If you are not yet fit in mobile and UX, you will have a rude awakening next year.

Do you want to be ready? We can help you with page speed optimization and usability, provided we will still have the free capacity in 2020. Of course, we will pay close attention to the Core Web Vitals from now on.
Disclaimer: Of course, it will not be the case for all SEO 2020 and 2021 based on the Core Web Vitals.

These three figures will instead serve to put the horrible websites on the backburner. Similar to Panda, only those that exceed a certain threshold will be hit. However, I can already predict that the Layout Shift Score will be a massive problem for all news websites (keyword: banner ads). By the way, Google has nailed the first nail in AMP in their blog post.

As Jens Fauldrath mentioned in his latest SEO house podcast, according to Google’s blog post, it is no longer mandatory to use AMP to get into the mobile headline carousel. Until today this was the case. Like for Jens, this sounds like a first, cautious retreat from the AMP world to me.

I would not find that bad. Nobody needs AMP, and you can build fast websites without it.
I think the changes in Google are brilliant. To make “hard numbers” out of such factors make sense, that was certainly a lot of work. I think that under the hood, there are many other factors involved in the algorithm, because if there are “Search Signals for Page Experience,” there are indeed “Search Signals for Domain Experience,” which I find interesting.

But now, as online marketers, we also have super tools in our hands to show the management with hard facts that the usability of a website is not good.
I’m looking forward to the key figures that will follow – a significant step from Google! 🙂

Some Useful Links For You:

1 thought on “Google Core Web Vitals – New KPIs for UX & SEO”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top