Google Core Web Vitals - New KPIs for UX & SEO
By:∣ Updated: April 09, 2021
Finally we SEOs have something to learn again! In addition, hard key figures can be measured! 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 pretty complicated and there are a lot of misunderstandings to clear out of the way. The terms don’t mean anything to you, “Web Vitals” doesn’t mean anything either? Then be sure to read this blog post – it will be important!
What Are Google Web Vitals?
For years, Google has included the UX (user experience) in the ranking of websites. How this was and is done remains and will remain a mystery.
Artificial intelligence, click data, layout rendering, and lots and lots of data are probably the basis. What Google always had in mind: To get webmasters and SEOs to finally deal more with UX.
How does it work best? With simple key figures, a scale from good to bad, and warnings in the Search Console. The Web Vitals have managed to bring mobile UX into three key figures.
So far, mobile user-friendliness, safe surfing (i.e. without spreading viruses and malware), HTTPS, and no annoying interstitials (popups) have been the official UX signals for Google.
The new key figures are:
- Largest Contentful Paint: This metric tells you when the main content is loaded.
- First Input Delay: This says when you have to wait for the first time until input is stopped.
- Cumulative Layout Shift: This figure roughly says how much the content shifts down during loading.
Video: The Core Web Vitals And SEO
What Do The Core Web Vitals Mean?
Strangely enough, this important statement is missing in the translation or does not come across with this clarity. The statement means that Google will include the Core Web Vitals in the ranking.
Several times in the blog post there is talk of a “ranking signal”, and there is even an indication of when (at the earliest) it can be expected.
“Important: We know that the work of many website owners at the moment is mainly determined by the corona crisis.
The changes presented here about the categorization of websites will not be implemented until next year at the earliest, so that website owners do not have to take immediate action.
We will also remind you of the upcoming changes at least six months before implementation. The new tools are already available because we keep hearing from website owners that they want to be informed about changes to the ranking as early as possible. But you have enough time for the implementation. ”
Putting That Into The Announcement Shows Two Things:
- Google wants to communicate clearly from the start. There was a little criticism due to the last core update because it went live unexpectedly in the middle of the Corona crisis.
- There will be an impact on the ranking of websites. The first Panda update was last communicated with this clarity and with such a long lead-time.
Nobody knows how strong the effects will ultimately be.
My feeling is that the effects won’t be that big at first. However, Google has already announced that they will continue to develop the Web Vitals. So the topic is not a flash in the pan, but a completely new core area in Search that will develop anew.
Incidentally, the term “core” web vitals also speaks for relevance to the ranking, as it arouses associations with the core update.If you love your website, it’s best to start looking at it now. If you are planning a relaunch, then plan that too.
Why Key Figures?
The calculation of the key figures will understand fewer people than the PageRank or the visibility index because it is much more complex.
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 managing director will call the developer and say “Our CLS value is far too high, it has to be lower.” And he’s right!
Tip: If you are commissioning a new website or planning a relaunch, it is best to have the upper values for Core Web Vitals written down in the specification sheet. So you are on the safe side that your web agency takes the whole topic seriously and adheres to the guidelines!
Largest Contentful Paint: When Is Your Main Content Loaded?
The first core web vital metric is called Largest Contentful Paint. In a nutshell, it measures the loading time of a website, but in the smartest of all ways.
So far there have been a few website speed metrics:
- 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 text was loaded.
- First Contentful Paint means when the website shows some content for the first time.
- It is First Meaningful Paint when the website shows a little bit of content for the first time that is something other than the logo and that means something.
The Largest Contentful Paint, on the other hand, is the most ingenious option. It shows when the largest block of content was loaded – which is usually the main content and thus what is the most important part of a website according to the Google Quality Rater Guidelines (PDF) because the main content fulfills its purpose.
How Is The Largest Contentful Paint Calculated?
The LCP should be charged within a maximum of 2.5 seconds. In that case, you are in the green area – as a reader of Seocracy you are of course not interested in anything else. 😉
The best way to see the size of an element is to render the mobile version via Search Console – but there are a few exceptions. For the details, there is the documentation here. In addition, Google also gives a bunch of tips in this blog post on how to improve your LCP value.
This is about website performance, i.e. your page loading speed. Only now the total loading time is no longer decisive, but the time when your main content is loaded. It’s also logical, right?
At Amazon you probably don’t care when the footer is loaded – you want to see the item image and the price as quickly as possible. What a great metric! 🙂
Again To Take Notes:
The Largest Contentful Paint measures the time it takes for the largest block of content within the viewport to be loaded. It should be less than 2.5 seconds.
First Input Delay: When Can You Interact With The Website For The First Time?
Roughly speaking, the key figure FID means when the browser can react to user input for the first time.
Often it is like this: You are visiting a website. You rarely wait until it is fully loaded, but often click on a text field or button as soon as it somehow works.
Usually, nothing happens immediately, because the browser and the website are still busy loading the website completely in the so-called main thread.
So there are delays here and they are bad for the user experience because you don’t want the website to finish loading when you’ve long been wanting to move on to the next URL!
The First Input Delay key figure measures how long it takes from user input to the response from the browser.
The beige time intervals are important, as they indicate that there are times during the loading of a website when the website does not immediately react to user input.
The best way to access this data is in the Search Console in the new Core Web Vitals Reports. When optimizing, you should primarily focus on the TBT (Total Blocking Time).
This is the time between FCP and TTI (Time to Interactive). The time between which you see the first content until the website is completely interactive.
This is easier to measure and does not require any user data. Incidentally, First Input Delay is not TTI (Time to Interactive). FID is about the period of time when a website is already partially loaded but not yet fully interactive.
There is also detailed documentation and a contribution with tips on how you (or your developer) can improve the FID.
The FID (First Input Delay) measures the time after the FCP (First Contentful Paint) and between the time in which a user makes an input for the first time and the first response from the browser. It should be less than 100 milliseconds.
Cumulative Layout Shift: How Is Your Visual Stability?
Do you know that you visit a website and try to interact with yours while it loads? However, while loading, the content keeps shifting and sliding down. It’s annoying, isn’t it?
Put simply, the value CLS (Cumulative Layout Shift) 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 based on the impact fraction and distance fraction.
Impact Fraction is the key figure that indicates what percentage of the screen is moved between two frames in total.
The Distance Fraction measures the distance that unstable elements have moved on relative to the viewport.
The calculation always takes the greatest distance that any element has traveled within the frame.
The following formula then applies:
Layout Shift Score = Impact Fraction x Distance Fraction
In our example, this means 0.75 x 0.25 and thus 0.1875. That would then be in the yellow area – still justifiable, but already in need of improvement.
I refer to the documentation from Google and the fact that you can find out this value with various tools, for example in the Google Search Console.
However, you have to understand why and how a high value can come about just by “trial and error” is not possible. Again there is a blog post with improvement tips!
The Cumulative Layout Shift (CLS) measures how often and how much content shifts within the viewport during the loading of a URL. The more and the larger the shift, the higher the value. Ideally, it should be below 0.1.
How Do I Measure These New Values?
A distinction is made in the data between “Lab” and “Field”. While “Lab” data are only extrapolations and approximations of how users are likely to use your website, “Field” data are real user data that Google provides you with.
Google has put a lot of work into documenting these new values and implementing them into all of their tools. From my point of view, that shows the seriousness with which this approach is taken.
Disclaimer: It will of course not be the case that all SEO will be focused on the Core Web Vitals. These three numbers are more likely to be used to move the really bad websites down. Similar to Panda, it will only catch those who cross a certain threshold.
However, I can already predict that the layout shift score will be a huge problem for all news websites (keyword: advertising banners). Incidentally, Google nailed the first coffin nail in AMP in the blog post.
As Jens Fauldrath also mentioned in his latest SEO House podcast, according to the Google blog post it will no longer be a requirement in the future that you use AMP to get into the mobile headline carousel.
It has been like that until today. As for Jens, it sounds like a first, cautious retreat from the AMP world to me. I don’t think that’s bad.
No one needs AMP, you can build fast websites without them.
I think Google’s changes are brilliant. Turning such factors into “hard numbers” that make sense was a lot of work.
I think that many other factors play a role in the algorithm, because if there are “Search Signals for Page Experience”, then there are certainly also “Search Signals for Domain Experience”, which I would also find interesting.
But now, as online marketers, we also have great tools in hand to show management with the hard facts that the usability of a website is not good. I’m looking forward to the metrics to come – a great move from Google!
If you have any questions or comments, please let us know! If I’ve explained something wrong, please let me know.
Do You Want More Traffic,
More Leads & More Clients?
Let us analyze your website today for better ranking & revenue. Click on the below button for a free analysis. Request A Free Analysis!