The world’s most common search engine is con­stantly trying to improve its search results for users, including by way of regular Google updates. Users surfing the web should be able to obtain in­form­a­tion quickly and at the same time have a positive ex­per­i­ence while visiting websites. That’s why Google is sup­port­ing admins and content creators in creating better websites. One of the measures to improve web content is the Google’s Web Vitals ini­ti­at­ive: uniform metrics for clear state­ments about the technical quality of a website. If you run a website yourself and do not want to sink in the SERPs, then Web Vitals should be part of your SEO strategy.

You can already view your own website’s Core Web Vitals and start op­tim­ising them. However, the metrics will only gain real relevance from August 2021 onwards. Google has announced that the Page Ex­per­i­ence update, which the Web Vitals will be a large part of, will be rolled out from mid-June. The impact of the update will probably first be seen around two months later. Learn how you can prepare yourself now!

Tweet from the Google Teams regarding Core Web Vitals
Google will roll out the Page Ex­per­i­ence update including the Web Vitals from mid-June. / Source: https://twitter.com/google­searchc/status/1384173984334237699

What are the Core Web Vitals?

With Core Web Vitals, Google in­tro­duces key figures that provide website operators with in­form­a­tion on the quality of their Internet presences. But the focus here isn’t on the content on the re­spect­ive website. Web Vitals measure technical aspects that affect the user ex­per­i­ence. More precisely, the metrics refer to the ex­per­i­ence that website visitors have in the first few seconds. Google has defined three values for this:

  • Largest Con­tent­ful Paint (LCP): How fast does the largest element load?
  • First Input Delay (FID): When can users interact with the website?
  • Cu­mu­lat­ive Layout Shift (CLS): To what extent does the layout move while the page is loading?

For the Web Vitals, Google records the ex­per­i­ence of website visitors. To measure this, Google evaluates data from the Chrome browser and uses it to create the Chrome User Ex­per­i­ence Report. Here, mobile data and measured values from desktop PCs are measured sep­ar­ately. In the report itself, you will also always find a total score that includes 75 percent of website visits. This is important because different users sometimes have very different ex­per­i­ences. But ideally, you want to design your website in a way that all users have a positive ex­per­i­ence.

Googles Core Web Vitals in­tro­duced

Up to now, Google has in­tro­duced three different values. In the future, ad­di­tion­al values could be added though. Primarily, already existing Web Vitals focus on elements of in­ter­activ­ity on a website.

Image: Schematic representation of the Core Web Vitals and other Google ranking factors
Currently, Google has outlined three measures that are essential to Web Vitals in addition to other important ranking factors.

Largest Con­tent­ful Paint (LCP)

How quickly can the user recognise content on the website? Google uses LCP to measure when the largest visible content block (in terms of visual present­a­tion, not data volume) is displayed to the user. This can be text, images, or videos, for example. Since the largest element is usually loaded at the end and it’s often the main content element on the page, Google can get a very good im­pres­sion of how long it takes for users to read or interact with the website.

With LCP, the search engine man­u­fac­turer has developed an al­tern­at­ive to older metrics such as load or DOM­Con­tent­Loaded. These metrics tend to provide in­form­a­tion that’s more on the the­or­et­ic­al end. Largest Con­tent­ful Paint, on the other hand, relates much more to the actual user ex­per­i­ence. The very similar value First Con­tent­ful Paint (FCP), on the other hand, simply indicates how fast the first element was loaded. In many cases, however, this is com­pletely ir­rel­ev­ant to the actual content of the website. Similarly, the First Mean­ing­ful Paint (FMP) metric has proven to be too complex and error-prone in the past.

As a guide, Google says that 2.5 seconds should cover everything from the first time the website is called up until the Largest Con­tent­ful Paint appears to users. It is important that this value also applies to all users. Values that you achieve as a webmaster in tests can differ greatly from the ex­per­i­ence of different users.

Image: Largest Contentful Paint (LCP)
Largest Con­tent­ful Paint (LCP): green: up to 2.5 seconds, yellow: more than 2.5 and up to 4 seconds, red: more than 4 seconds / Source: https://web.dev/vitals/

The following tips can help you improve the LCP value:

  • Use a framework instead of a large HTML page, so that you can better control how different elements on the page play out.
  • Use a content delivery network so that a user’s location doesn’t have any influence on server access.
  • Be careful when using CSS and JavaS­cript, making sure that the browser isn’t over­loaded.
  • Make images smaller to lower file sizes and reduce loading times.
  • On static websites, a server cache can speed up access times.
  • Build a con­nec­tion to external sources ahead of time to avoid bot­tle­necks.
Tip

Get an even closer look at how the loading time of the largest content element can be shortened in this article on Google’s LCP.

First Input Delay (FID)

Once the website is loaded, users will want to interact with it. First Input Delay indicates the length of time between the website visitor’s first in­ter­ac­tion with the website and the response of the website. This can be a login attempt, for example, but could also be a simple click on a link. To avoid spoiling the first im­pres­sion, servers should process the input as quickly as possible. But server speed is only part of the challenge of achieving a good FID score: Web­mas­ters should also consider users’ browsers. If the software is busy with other tasks, they cannot process the input. The most common weakness is therefore large JavaS­cript files that keep the browser busy for a long time.

Google states that it should take about 100 mil­li­seconds from the moment a user triggers the in­ter­ac­tion to the time the change is visible in the browser.

Image: First Input Delay (FID)
First Input Delay (FID): green: up to 100 mil­li­seconds, yellow: more than 100 and up to 300 mil­li­seconds, red: more than 300 mil­li­seconds / Source: https://web.dev/vitals/

If you want to improve the First Input Delay of your website and provide visitors with a better ex­per­i­ence, you should consider the following op­tim­isa­tion measures:

  • Try to split long tasks into smaller parts. If a JavaS­cript task is running, the browser cannot process other jobs. Google considers pro­cessing times of more than 50 mil­li­seconds to be long tasks, so you should avoid them.
  • Load the most important in­ter­ac­tion elements first. This way, users can act faster and don’t have to wait for longer loading times.
  • Use a so-called web worker. These processes make it possible to execute more complex tasks in the back­ground.
Tip

Do you want to learn more about how you can improve the FID score of your website? Google has got a detailed article on how to optimise the First Input Delay and how to respond faster to user in­ter­ac­tions.

Cu­mu­lat­ive Layout Shift (CLS)

Often a website is loaded in such a way that visitors can already use it before the last element appears in the browser. This has great ad­vant­ages in terms of the LCP but can cause the layout to continue to shift. Content elements that jump around, however, result in users either getting confused while reading or un­in­ten­tion­ally clicking on the wrong element.

For the CLS value, Google measures changes in the layout of a page. Every time an element un­ex­pec­tedly moves about, it is recorded. In­ten­tion­al changes due to user in­ter­ac­tions are excluded here. Google not only pays attention to how many objects move and how often, but also measures how far the re­spect­ive elements move. All of this is included in Cu­mu­lat­ive Layout Shift.

For Google, a CLS value of 0.1 is con­sidered good. If you are sig­ni­fic­antly above this, you should optimise your website. The following options can help:

Image: Cumulative Layout Shift (CLS)
Cu­mu­lat­ive Layout Shift (CLS): green: up to 0.1, yellow: more than 0.1 and up to 0.25, red: more than 0.25. / Source: https://web.dev/vitals/
  • Always specify the di­men­sions of the built-in images in the source code of the website. This way, the browser can already reserve the cor­res­pond­ing space when building the layout.
  • Dynamic ads that are placed on the site by external providers also mess up the layout. For this, it’s re­com­men­ded to set a suf­fi­ciently large place­hold­er stat­ic­ally for the ads to avoid objects moving around.
  • When trying to load fonts from the web, the layout can sometimes un­ex­pec­tedly shift. That’s why it’s re­com­men­ded to preload the fonts.
Tip

Google also offer many good tips on how to optimise CLS on your website.

Image: Web Vital CLS measured with a Google Chrome extension
The Chrome extension ‘CLS Visu­al­izer’ lets you view the value as well as the layout shifts of any website.

Why are the Core Web Vitals important?

Google is trying to help shape the web. To do so, the Internet company is making the most of its market power: Websites that don’t appear on the top pages of Google’s search engine results are never noticed by most people. Web­mas­ters and SEO experts therefore go to great lengths to set up their web content with the interests of the search engine in mind. Yet not all ranking factors are of­fi­cially known. With the Web Vitals, however, Google has now presented concrete values that website operators can use to show off their website in the best possible way.

To find out more about the Web Vitals of your own website, you can use the Google Search Console, for example. With this online tool you can get an in­de­pend­ent analysis for both mobile and desktop. Good to know: Since the Core Web Vitals values are derived from real user data, you may have to wait a bit with new projects until Google has been able to gather enough in­form­a­tion for a mean­ing­ful analysis. The key figures are also displayed in other Google tools: In Google Light­house, Page Speed Insights, and the Chrome User Ex­per­i­ence Report, the values are also in­teg­rated.

Summary

Googles Core Web Vitals will soon become one of the key factors in terms of search engine op­tim­isa­tion. Do you want to get your website to the top of the results? The rank­ing­Coach from IONOS can help you out with your SEO strategy.

Go to Main Menu