SEO Glossary: Google Core Web Vitals

What Core Web Vitals are there and what are their functions?

Google has defined three Core Web Vitals that are particularly concerned with the technical requirements of a website: How quickly is content provided, when does the website respond to the user, and how stable is visual content? The following Core Web Vitals are used to measure this:

 

1. Largest Contentful Paint (LCP)
2. Interaction to Next Paint (INP)
3. Cumulative Layout Shift (CLS)

 

If you have already looked into the topic, you may notice that a Web Vital has disappeared and a new value has been added. And indeed: In March 2024, Google replaced the Web Vital First Input Delay (FID) with the Interaction to Next Paint (INP) metric. We'll explain why in a moment. But first, let's look at the current Core Web Vitals and their functions.

 

LCP: The loading speed of a website

The Largest Contentful Paint (LCP ) describes the time it takes for the main content or the largest user-relevant element to become visible after clicking on a page. Initially, this only refers to content above the fold - i.e. blocks of text or images that appear on the website without scrolling.

 

In the past, the duration until the first element appeared on the website was usually measured instead of the LCP: the First Contentful Paint (FCP). This could be, for example, the appearance of loading bars, the table of contents or the input bar in search engines. The LCP is now much more user-friendly, as the user's intention is taken into account. This is because the user is primarily interested in the main content on the website.

 

If you look at your metrics, you will ask yourself: What is a good value for my LCP? Google provides the following clues:

 

• Good: Charging speeds under 2.5 seconds
• Room for improvement: charging speeds between 2.5 and 4 seconds
• Bad: Charging speeds over 4 seconds

 

You can also find out how you can improve Core Web Vitals such as the Largest Contentful Paint in our article.

 

INP: The response speed of a website

The Web Vital Interaction to Next Paint is a measurement for the interactivity of a website. All user actions are recorded - i.e. clicks, keystrokes and touches on touch displays. The time it takes for the desired reaction to become visible to the user is then measured.

 

A low INP indicates that the website responds smoothly and quickly for over 75% of all users . This means that the actions are executed in under 200 milliseconds. Outliers are not taken into account. If the response time is over 500 milliseconds, the INP is poor; anything between 200 and 500 milliseconds is in need of improvement.

 

Why did the INP measurement replace the Core Web Vital FID?

As already mentioned, the INP is a fairly new web vital and replaced the FID (First Input Delay) measurement in March 2024. The INP was first made available for testing by Google in 2022. After its introduction, it quickly became clear that this Web Vital takes the user experience into account better than the FID. But why is that?

 

The First Input Delay could only illustrate the first impression of a website because only the first user interaction was measured. The INP now provides a much more comprehensive picture of the reaction speed, as it records all user interactions on a website.

 

In addition, the INP measures the time until the consumer receives a visual display or a recognizable reaction on their screen. This was also different with the Web Vital FID. This only recorded the time until the browser began to process the interaction. The FID did not show when the user actually received a reaction to their action.

 

CLS: The visual stability of a website

The Cumulative Layout Shift (CLS) is the third web vital that Google has defined to measure the user experience on a website. This involves the visual stability of text blocks, image elements and graphics. As soon as the layout shifts unexpectedly during loading, scrolling or other user interactions, the following two measurements are taken:

 

1. What percentage of the display area does the element occupy, including the displacement? With an impact fraction of 60 %, the measured value would be 0.6.
2. By what distance has the element shifted in relation to the size of the display area? With a distance fraction of 20 %, the measured value would be 0.2.

 

If you multiply the values together, you get the layout shift score. If it is below 0.1, this is a good CLS value. Anything above this is in need of improvement. In our example, the layout shift is 0.12 (0.6 * 0.2). It would therefore need to be optimized. Timo Specht will now explain where you can find the metrics for your Core Web Vitals.

 

How can Core Web Vitals be measured?

The Core Web Vitals are measured by Google both in terms of mobile friendliness and for the desktop versions of a page. Thanks to their user orientation, the values are also easy for non-experts to understand.

 

If you want to measure the Core Web Vitals for your websites, you may be wondering what the best and easiest way to do this is. There are two ways to do this: collecting lab data and measuring real user experiences. It is best to combine both options.

 

Laboratory data (Lab Data)

When measuring lab data, tools are used that imitate user access to your website and thus measure the Core Web Vitals. This is particularly useful before publishing one or more pages in order to prevent problems with the real page experience from arising in the first place.

 

The following tools are used most frequently when collecting laboratory data:

 

• Developer tools from Chrome(Google Lighthouse)
• Google PageSpeed Insights

 

The disadvantage of lighthouse data and other lab data is that they are not a ranking factor and are therefore irrelevant for placement in search engine results. All that matters is the field data. In addition, the Web Vital INP cannot be measured because it requires real user input. Instead, a similar value is collected: TBT (Total Blocking Time). It should be less than 300 milliseconds.

 

Real user experiences (field data)

The lab data is not only uninteresting for the ranking of your pages in the SERPs, but also often leads to deviating results compared to the field measurements. This is because users use different devicesand have different network conditions.

 

The working memory and CPU performance as well as the interactions with the site also differ from user to user and, above all, from user to laboratory. In contrast to the laboratory measurements, the field data therefore provides a more realistic picture.

 

A number of different tools are suitable for measuring real user experiences, such as:

 

• Report on the user experience in Chrome (Google PageSpeed Insights)
• Google Core Web Vitals report
• JavaScript (Web Vitals library)
• Web Vitals extension for Chrome
• External RUM providers (Real User Monitoring)

 

However, field data also has its disadvantages. For example, new problems on websites are only visible in the reports after about a month. Lab data can be very helpful for viewing the key figures more regularly. Especially after optimizations or changes to the site , they provide immediate information about potential effects on the Core Web Vitals.

 

The most important tips for improving Core Web Vitals

If you want to improve individual or all Core Web Vitals, you first need to find the cause of a poor LCP, INP or CLS. The good news is that with Google PageSpeed Insights you can not only view the metrics of all Core Web Vitals for your website, but also find a diagnosis of the individual Web Vitals and tips on how to improve them.

Options for optimizing the LCP

The Largest Contentful Paint, i.e. the largest user-relevant element on your page, can consist of text or an image element. To improve loading times, you should first find out which element Google defines as the main element. This may look different depending on the user's device. With PageSpeed Insights, you should therefore analyze your page for both the mobile and desktop view.

 

In the Diagnostics section, you will find the Largest Contentful Paint element as well as other helpful tips for improving your Web Vitals. To improve your LCP time, this content element should be loaded as quickly as possible. To do this, you can make the following settings in content management systems such as WordPress:

 

• Set up browser cashing to get a faster server response
• Optimize your website hosting for a shorter TTFB (Time to First Bite)
• Use Content Delivery Network to deliver content faster
• Remove/move unnecessary JavaScript & CSS for faster rendering of LCP elements
• If your LCP element is an image, you should compress it.

 

Even though improving the LCP can require a lot of technical know-how, you should focus on two things first: Make sure your server response time is faster and make the LCP element available to the user as quickly as possible.

 

How you can achieve a better INP

The Web Vital INP can only be measured with field data. As a rule, the CrUX data provided by Google, which you can find in the Chrome user experience report, is sufficient for this. The response time to a user's interaction can be affected in the following three places:

 

1. During input (input delay)
2. During processing (long processing time)
3. During the presentation (presentation delay)

 

To speed up user interaction, you should optimize the Java Script code. Ensure less work in the main thread and delete unnecessary third-party JavaScript code. Long JavaScript tasks should also be split into several pieces. This allows user actions to take place in between without JavaScript having to finish the work completely.

 

For faster processing and presentation of content, you should rule out layout problems by providing content asynchronously. A smaller DOM size also contributes to faster rendering of the page content.

 

How to improve the CLS

The most common cause of a high CLS reading is the lack of assignment of image sizes. To reduce the shifting of the layout, you should specify the width and height of the elements in the HTML code using "width" and "height". This will reserve space in the page layout for your images and videos, even if other elements have already been loaded.

 

You should reserve a sufficiently large space in the page layout in advance for advertisements and banners whose size allocation you have no influence over. If this is also not possible, then dynamic content in particular should be placed further down in the display area.

 

When using web fonts, layout shifts may occur after loading these fonts. To prevent this from happening, the website operator can make the following optimizations:

 

• Sorg dafür, dass die Webschriftart so früh wie möglich lädt (<link rel=preload>).
• Use a fallback font that is similar in size and style to the web font.
• Adapt the fallback and web font to each other using APIs.
• Shorten the loading time of the web font using the Font Loading API.

 

You can find out whether the optimizations have borne fruit in the Chrome user experience report after 28 days.

 

Good Core Web Vitals and poor SERP rankings? That could be the reason!

Core Web Vitals are one of the few ways to make the user-friendliness of a website measurable and comparable in figures . Nevertheless, your site may not rank in the top search engine results despite optimized Web Vitals. Note that other ranking factors also contribute to the user experience and therefore to better rankings on Google.

 

Good SEO also includes on-page optimization, which is achieved, for example, through link building measures, an appealing design, keyword optimization and relevant content with added value. If you take these points into account, the Core Web Vitals represent an opportunity to move up a few places in the SERPs. At Timo Specht, we help you to improve your SEO and SEA measures holistically and get your website to rank 1 on Google.