Core Web Vitals Uncovered: The New Frontier in Google Marketing

What are Core Web Vitals?

How to measure Core Web Vitals?

How to optimise LCP, FID and CLS?

Google considers the quality of search results as a strategically important aim. The main question is: How to reduce the number of sites in search results that causes a negative experience and increase the number of sites that meet user needs? To solve this problem Google will implement new factors for assessing the quality of resource - the Core Web Vitals, which took effect from May 2021. In this article, we will discuss: 

What are Core Web Vitals?

There are a lot of different indicators that are related to Web Vitals but the Core Web Vitals consist of three: LCP, FID & CLS. Each of these parameters evaluates the quality of the site differently. 

Largest Contentful Paint or LCP - an indicator that evaluates the render time of the biggest piece of content. It can be the text block, image or video. It does not measure the time for full content uploading, just looks for uploading of the largest element on the screen. 

First Input Delay or FID - an indicator that evaluates the amount of time for site reaction on the first user interaction. It can be just opening the menu by pressing the button. 

Cumulative Layout Shift or CLS - an indicator that evaluates the visual stability of the site. The number of elements that are moving from frame to frame during the full site loading relates to layout shifts. It can be a slow appearing advertisement that overlaps the button that the user wants to press. 

The checkpoints of Core Web Vitals look like:

How to measure Core Web Vitals?

The advantage of Core Web Vitals is in their ease of measurement and lucidity. There are a lot of tools for monitoring LCP, FID & CLS, the most widespread 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. Provides loading reports on both mobile and computer devices.

It takes a few minutes to add Lighthouse to Chrome and generate a complex report based on “laboratory” data using an algorithm.

LCP

According to Google, LPC that happens after 2,5 sec needs an improvement. Lighthouse generates a report where the time of the biggest element uploading is presented:

To see how Lighthouse calculates the score there is an available Scoring Calculator:

FID

For FID the great result means less than 100 milliseconds and everything that is more - needs improvement. In Lighthouse and PageSpeed Insights  FID is changed with TBT - Total Blocking Time. TBT measures the amount of time when the main thread is blocked by long tasks - tasks that continue for more than 50 milliseconds. The user cannot interact with the page because the browser needs to end the task. 

As FID requires a real user and therefore cannot be measured with “laboratory” data. However, the total block time (TBT) is laboratory-measurable, correlates well with FID in the field, and captures issues affecting interactivity.

CLS

For CLS the result that is less than 0.1 means good and everything that is more - needs improvement. Layout stability is presented: 

PageSpeed Insights

PageSpeed Insights allows receiving reports on the speed of loading pages on mobile devices and computers, as well as advises on how to increase this speed. The score is calculated based on simulating loading using the Lighthouse tool. PageSpeed Insights has not only “laboratory” data but also field data - a historical report about how real users experience the pages. 

It gives an ability to calculate FID without problems including LCP and CLS.

  Web Vitals Chrome Extension

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

How to optimise LCP, CLS and FID?

As it was mentioned before the main idea of LCP, CLS and FID introduction is in providing a qualitative and positive user experience. In such a way the number of sites with poor indicators will be reduced in search results. However, poor indicators can be simply changed.

Largest Contentful Paint

Start with the server response time

Poor server response time influences uploading the HTML document and then rendering the page. Things 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 get access to HTML document faster, generates static HTML files instead of recreating)
• Minimise CSS, JS, and HTML (removing unnecessary characters in order to reduce the file size will make the loading faster)

JavaScript and CSS files

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

Client-side rendering

Client-side rendering, due to the multiple cycles, will make the page loading inconsistent and slow. Server-side rendering implementation can speed up the rendering of the initial page and increase the performance rate.

First Input Delay

Cutting long tasks

The pieces of JavaScript code that blocks the main thread for longer than 50 milliseconds are related to long tasks and do not allow users to interact with the site. Breaking down the long codes into smaller tasks can improve FID.

Web worker

Web worker gives an ability to place tasks that block the main thread into a separate stream and run them on the background thread. This can reduce blocking time and fix the FID google indicator.

JavaScript execution time

Reducing the amount of JavaScript frees up the time for executing JavaScript code. In that way, the browser can respond faster to any user interactions.

• Remove unused JavaScript.
• Minimise polyfills.

Cumulative Layout Shift

Include dimensions

Including image and video dimensions like width and height size attributes helps the browser to determine the correct amount of space while the content is loading. Ads and embeds also need to have reserved space, this causes a positive effect on CLS.

Layout shifting is even more frustrating on mobile devices when the user wants to click on a button but due to suddenly appearing text block, he clicks on a text by inertia.

Avoid layout changes

Setting the new content over the existing one is possible only in case of response to the user interaction, in other cases it will cause layout changes. Animation of properties can also cause layout changes, it is better to use transformation animations to provide context and continuity.

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

It is also worth noting, that if the website needs metrics optimisation, there are software programs like Shopware 6 and Oxid eShop (an enterprise-level e-commerce platforms) that provide all the optimisations out-of-the-box. It is an excellent way to save time on evaluating, monitoring and improving by yourself.