Web Core Vitals and why they are important for a website’s user experience

Google has announced and introduced a new ranking signal, which combines existing user experience signals with Core Web Vitals. This will improve the way it evaluates the experience provided by a page.

Core Web Vitals - what are they and why are they important?

Core Web Vitals is a concept introduced by Google. The concept consists of a set of specific metrics related to speed, visual stability and responsiveness:

• Largest Contentful Paint (LCP): The time it takes for a page’s main content to load.
• First Input Delay (FID): The time it takes for a page to become interactive.
• Cumulative Layout Shift (CLS): The amount of unexpected layout shift of visual page content.

Google uses these factors to evaluate a page’s overall user experience (UX). Moreover, Google’s plan is to make Core Web Vitals an official ranking factor. Therefore, they will have an impact on your ranking. It is confirmed by Google that Core Web Vitals will become a ranking factor during June 2021. Therefore, it is important to optimize your webpages before this Page Experience update. The update will have an impact on search results on mobile devices as well as desktop.

The set of metrics was designed to help site owners measure user experience on the web when it comes to loading, interactivity, and visual stability. It’s an expansion of the already existing signals that Google considers important when it comes to user experience. Other Web Vitals and signals, which are important for delivering a good page experience in Google Search include:

• Mobile-friendliness
• Safe-browsing
• HTTPS-security
• Intrusive interstitials guidelines

Core Web Vitals will become important metrics from now on and will maybe become the most important metric for your site’s user experience during 2021. However, a good user experience does not necessarily mean that your site will reach high rankings in the search results. You still need to deliver high quality content and optimize your site to the search engine’s other factors.

The article highlights several recommendations from this comprehensive guide published by Citona.dk. Let’s take a look at the three Core Web Vitals and what they are all about.

Largest Contentful Paint (LCP)

LCP refers to the time it takes for a page’s main content to load from the user’s point of view. In other words, it can be described as the time it takes for the main content to be visual when you click on a link on a website. It can also be described as an indication of how fast the user can experience the majority of the content and start to interact with it.

Ideally, your website should aim for a LCP below 2.5 seconds. However, this can be a challenge if you have heavy functions or use many visual activities. Therefore, you may need to make use of a variety of technologies in order to form your LCP-score. Sometimes you may also need to cut down on the amount of pictures or optimize your HTML.

First Input Delay (FID)

FID measures the point in time when a user for the first time interacts with your website to the point in time where the browser reacts to this interaction. An interaction can for instance be when a user:

• Clicks a button
• Clicks a link in the menu
• Fills out an email address in a formula
• Changes the product filters
• Clicks a box which shows more content

FID is considered important by Google because it takes into account how real users interact with websites. The metric is measured as speed - it measures the time it takes for a user to complete the first action on a page.

The importance of FID can be very different from the type of page. If you measure FID on a blog post consisting of only text, it can be limited how much interaction the user has with the page. However, on a page with a contact formula, it is important that the user quickly is able to enter an email address etcetera.

Cumulative Layout Shift (CLS)

CLS is a measurement for how visually stable your website is as it loads. This means, if you have visual elements that move around as the page loads, the CLS of the page is high and poor. Therefore, your elements on your page should be static instead of them dynamically moving around on the page. By making sure of this, the user does not need to learn where links, pictures and boxes are placed when the page is fully loaded.

In order to minimize your CLS you may:

• Add new UI-elements underneath the folder
• Specify the height and width on every media element
• Make sure that ads have a reserved area.

Improving your Core Web Vitals is not always a quick fix. The necessary optimization in order to fulfill Google’s guidelines depends to a great extent on the complexity of your website. Moreover, Core Web Vitals may change from year to year depending on what users expect out of a good web page experience.

A website using Web Core Vitals

A good example of a website that has improved their Web Core Vitals is NovaSolar. NovaSolar runs PrestaShop where they sell heating pumps in Denmark. Speed has been at a very strong focus, and the PrestaShop Agency Bulldesign have helped them improve their speed as well as their Web Core Vitals.

The illustration down below shows how the website ranks in both LCP, FID, CLS and FCP (First Contentful Paint.)

If you are interested, you can check your website’s score on Google PageSpeed Insights to see how it ranks on the different metrics.