Core Web Vitals

The Core Web Vitals are a new SEO feature introduced by Google in 2020. It deals with the time in which a website can make its content available to the user. At the presentation of the feature, Google announced that the Core Web Vitals would be an important ranking factor in the future. If they are not optimized, this could lead to penalties. Therefore the Optimization of the Core Web Vitals an important part of the SEO strategy.

What are the Core Web Vitals?

The Core Web Vitals are a feature to measure and evaluate the usability and user experience (UX) over time. The Core Web Vitals are divided into 3 sub-areas: Largest Contentful Paint LCP, First Input Delay FID and Cumulative Layout Shift CLS.

Largest Contentful Paint LCP

In short, the time it takes for main content to load legibly for the user.

Explanation: Largest Contentful Paint measures the time that elapses between the page load and the first appearance of content. This refers to the visible area of the web page. In detail, this can be text content, graphics, images or headlines (the H1 heading).

A good charging time is estimated at up to 2.5 seconds specified.

First Input Delay FID

In short, the time it takes for the website to become operational or responsive.

Explanation: First Input Delay FID measures the time it takes the server to load the web page until it is ready to interact with the user. These interactions include: Scrollability, links loaded and ready for use, form elements ready for use, image scalability, etc.

In this segment, a good loading time of up to 100 milliseconds specified.

Cumulative Layout Shift CLS

In short: the time that passes until the website or its contents are displayed stably.

Explanation: The Cumulative Layout Shift CLS measures how long the server needs to display the content of a web page in a stable manner without shifting, jerking and jumping. Common causes for this unstable behavior of the content are unnecessarily large images or videos, loading of non-optimized and compressed files, but also frequent reloading of advertisements, banners, etc.

Here applies a time until 0.1 seconds than good.

Are Core Web Vitals Important?

As described at the beginning of this article, Google has directly issued the information that the Core Web Vitals are an important ranking factor. Google probably wants to achieve with the Core Web Vitals that the webmasters get an incentive to pay more attention to the usability and thus the user experience.

How can I measure the Core Web Vitals?

Good and readily available tools for measuring Core Web Vitals are:

Pagespeed Insight
GSC Google Search Console
Chrome UX Report
Chrome DevTools -> are built in to Google Chrome

How to optimize Core Web Vitals?

Basically: Always optimize and compress images, videos and graphics to conform to web standards.

Optimize Largest Contentful Paint LCP

Optimize CSS files

CSS is a resource that must be loaded when a web page is called. Here it is recommended to remove unnecessary code snippets and comments.

Optimize JavaScript

The JavaScript code should be checked if it is still up-to-date and compatible with the browsers. Clean up your code and remove unnecessary code snippets.

Integrate preconnections

Preconnections are HTML features that allow to preload content from foreign domains.

Code snippet is included in the HEAD:

Preload CSS and JS

As with Preconnections, load files in advance.

href="style.css">

Optimize First Input Delay FID

Presumed main cause of slowed down FID could be in JavaScript

Remove all unnecessary JavaScript applications from the page. Apply code splitting if necessary.
Reduce JavaScript execution times
A look at the Third-party tags because they can also influence the FID.

Optimize Cumulative Layout Shift CLS

One of the main causes of Cumulative Layout Shift is the reloading of ad banners. Here, among other things, you could assign a static space to the banners.

Further measures for optimization:

Images, graphics, and videos with a priori fixed sizes via CSS. This allows the browser to allocate space to the element during the loading process.
Do not add dynamic elements in the header.
When rendering web fonts, a FOUT or FOIT can cause position shifts. Here you can use the font-display with a car or swap.

Conclusion: Site owners are strongly advised to incorporate this relatively new feature into their SEO strategy. These vitals should become a central part of the SEO strategy. As SEO Agency in Munich, we can stand by you there.