What are Core Web Vitals and how can they be measured?

Google considers the quality of search results to be a strategically important goal. The main question is: how to reduce the number of websites in search results that cause a negative experience and increase the number of websites that meet user needs? To solve this problem, Google will implement new factors for evaluating resource quality - the Core Web Vitals, which came into force in May 2021. In this article, we will discuss the following:

What are Core Web Vitals?

There are many different indicators that relate to Web Vitals, but the Core Web Vitals consist of LCP, FID & CLS. Each of these parameters rates the quality of the website differently.Largest Contentful Paint or LCP - an indicator that rates the render time of the largest piece of content. This can be the text block, image or video. It does not measure the time taken to upload the entire content, but only the upload of the largest element on the screen.First Input Delay or FID - an indicator that evaluates the time taken for the website to respond to the first user interaction. It can be simply opening the menu by clicking on the button.Cumulative Layout Shift or CLS - an indicator that evaluates the visual stability of the website. The number of elements that move from frame to frame during the complete loading of the site refers to layout shifts. It can be a slow appearing advertisement that overlaps the button the user is about to click.Core Web Vitals checkpoints look like this:

How do you measure Core Web Vitals?

The advantage of Core Web Vitals is the ease of measurement and clarity. There are many tools for monitoring LCP, FID and CLS. The most widely used are presented below.

Lighthouse

Lighthouse is an open-source extension for Google Chrome, an automated tool for monitoring the performance, accessibility, quality and SEO of web apps. It provides loading reports on mobile and computer devices.  It takes a few minutes to add Lighthouse to Chrome and use an algorithm to generate a complex report based on "lab" data.

LCP

According to Google, the LPC, which occurs after 2.5 seconds, needs to be improved. Lighthouse generates a report in which the time of the largest element upload is displayed:

To see how Lighthouse calculates the score, a score calculator is available:

FID

For FID Google, the great result is less than 100 milliseconds and anything more than that needs to be improved. In Lighthouse and PageSpeed Insights, the FID is changed with TBT - Total Blocking Time. TBT measures the amount of time the main thread is blocked by long tasks - tasks that take longer than 50 milliseconds. The user cannot interact with the page because the browser has to finish the task.FID requires a real user and therefore cannot be measured with "lab" data. However, Total Blocking Time (TBT) is measurable in the lab, correlates well with FID and captures issues that affect interactivity.

CLS

For CLS, the result of less than 0.1 means good and anything more must be improved. The layout stability is shown:

PageSpeed Insights

PageSpeed Insights allows you to receive reports on the speed of page loading on mobile devices and computers as well as tips on how to increase this speed. The score is calculated based on the simulation of loading with the Lighthouse tool. PageSpeed Insights contains not only lab data, but also field data - a report on how real users experience the pages. It provides the ability to calculate FID without issues including LCP and CLS.

Web Vitals Chrome-Erweiterung

Extension for real-time calculation of Core Web Vitals. It can be quickly added to Chrome and evaluates LCP, FID and CLS.

How are LCP, CLS and FID optimized?

As already mentioned, the main idea of introducing LCP, CLS and FID is to offer a qualitative and positive user experience. In this way, the number of websites with poor indicators in the search results is reduced. However, bad indicators can easily be changed.

Largest Contentful Paint

BStart with the server response time

A poor server response time affects the uploading of the HTML document and the subsequent rendering of the page. Measures that can improve the server response time:

• Change or upgrade hosting provider (the cheapest or shared hosts can slow down the server)
• Use caching (caching helps to access HTML documents faster, generates static HTML files instead of recreating them)
• Minimize CSS, JS and HTML (removing unnecessary characters to reduce file size speeds up loading)

JavaScript and CSS files

JavaScript and CSS files can slow down the rendering of the page as they have to be loaded first. Reduce rendering blocking by moving the blocking code to an inline script tag on the HTML page and inserting the critical styles into a style block at the top of the HTML page.

Client-side rendering

Client-side rendering makes page loading inconsistent and slow due to multiple cycles. The server-side rendering implementation can speed up the rendering of the first page and increase the performance rate.

First Input Delay

Dividing up long tasks

The parts of the JavaScript code that block the main thread for longer than 50 milliseconds relate to long tasks and do not allow users to interact with the website. Splitting long code into smaller tasks can improve FID.

Web Worker

Web Worker offers the option of placing tasks that block the main thread in a separate stream and executing them in the background thread. This can shorten the blocking time and fix the FID indicator.

JavaScript execution time

Reducing the amount of JavaScript frees up time for the execution of JavaScript code. In this way, the browser can react more quickly to user interactions.

• Remove unused JavaScript.
• Minimize the polyfills.

Cumulative Layout Shift

Add dimensions

By adding image and video dimensions such as width and height attributes, the browser can determine the correct amount of memory while the content is loading. Ads and embeds must also have reserved storage space. This has a positive effect on CLS.

Moving layouts is even more frustrating on mobile devices when the user wants to click on a button but clicks on text due to inertia caused by a block of text suddenly appearing.

Avoid layout changes

Placing the new content above the existing content is only possible if there is a reaction to the user interaction. In other cases, this leads to layout changes. The animation of properties can also lead to layout changes. It is better to use transform animations to provide context and continuity.

These are the most common problems and solutions related to improving Core Web Vitals. Fortunately, most tools like Lighthouse and PageSpeed Insights provide root causes for poor results and suggestions for improvement to simplify the entire process.

It's also worth noting that there are software programs like Shopware 6 and Oxid eShop (enterprise-level ecommerce platforms) that provide all optimizations instantly when the website needs metric optimization. This is a great way to save time when you are evaluating, monitoring and improving yourself.