Core Web Vitals

Over the past few years, Google has defined several criteria for measuring user experience (UX), including what we call Core Web Vitals (CWV): a set of three individual metrics related to overall page experience that are very important factors for the positioning in surveys:

• Largest Contentful Paint (LCP);
• Cumulative Layout Shift (CLS);
• First Input Delay (FID).

This set is based on fundamental aspects for the UX: loading, interactivity and visual stability.

PageSpeed Insights

The PageSpeed Insights is a Google tool that evaluates the site's score in various aspects so that you know what points to improve in relation to Core Web Vitals, both for desktop and mobile.

While it doesn't exactly show all the URLs for the site, you can use it based to make your corrections. 

In addition to PageSpeed, you can also use the Google Search Console and the Core Web Vitals report from the Semrush tool.

To better analyze the mobile version of your website, Google has released an updated and more accurate version of tool: Lighthouse. On this link there are instructions on how it works and how to install.

To make the necessary changes, you may need the development and programming team. 

LCP - Largest Contentful Paint

Largest Contentful Paint (LCP) refers to the rendering time of the website's images and text blocks.

When a site has a load time greater than 4.0 for this metric, bounce rates may increase. This means that if the user enters the site and the loading speed is too high, he will not stay to see the content.

LCP is primarily affected by slow server response time, render blocking Javascript and CSS, slow load time features, and “client-side” rendering.

According to Google, an LCP of up to 2.5 seconds is considered good, between 2.5 and 4.0s reasonable and above 4s bad.

Actions can optimize server response time:

• Optimize your server;
• Use CDN;
• Enable server caching;
• Use Service Worker for “cache-first” HTML pages;
• Anticipate third-party connections;
• Minify and defer JavaScript and CSS that are not critical to the page.

FID - First Input Delay

First Input Delay (FID) refers to the interactivity and response time of the site for users, which concerns the optimization of page performance. That is, the FID calculates the time between the user's first interaction with the page until the browser starts processing response events. 

But beware: FID does not measure the loading itself, but the delay caused between user interaction and the start of loading on each visit to the site. 

According to Google, an FID below 100 milliseconds is considered good, between 100 and 300 milliseconds is a reasonable amount of time that still requires improvement, and above 300 milliseconds is considered a bad FID that needs urgent improvement.

A slow FID is often due to heavy JavaScript executions having a direct impact on the metric. Check out some actions to reduce the FID of the page:

• Split heavy Javascript into smaller, asynchronous tasks;
• Optimize pages for interaction readiness;
• Use a web worker;
• Reduce JavaScript execution time.

CLS - Cumulative Layout Shift

Cumulative Layout Shift (CLS) refers to the website's virtual stability. In other words, it is the metric that helps us measure unexpected changes on the pages.

A CLS below 0.1 is considered good, between 0.1 and 0.25 is reasonable and still requires improvement, and above 0.25 is considered a bad CLS.

In general, the increase in CLS is caused by features such as images, iframes and ads with no predefined dimensions, dynamically added content, and font loading issues.

Some actions that can reduce the CLS of pages:

• Include width and height attributes for images and videos;
• Reserving spaces for ads and dynamic content;
• Using a font loading API can reduce your loading time.

Tips for getting a good grade on PageSpeed ​​Insights

According to Semrush Blog, to optimize a site's Core Web Vitals, it is recommended to analyze each URL individually as they can have different scores considering that a page contains different layouts, content blocks and elements.

Check out some tips to help you with this:

1. Image compression 

Follow the recommendations for image optimization. The biggest cause of slow pages and low scores is very large images.

In addition, you can also use Preload, that is, preloading images on the website. This action loads images that do not appear on the page into the browser's cache immediately and avoids delays caused by downloading when images have to be displayed.

2. Leverage browser cache

Every time someone accesses the website, the process of loading the elements of images, texts and elements takes place. The use of cache makes the browser remember this loading and when the user accesses the site again, it will load beforehand, not requiring as much effort.

3. Reduce codes

Minimizing the space that HTML codes take up is another important factor in getting a good Google score. Minifying means removing or repairing unnecessary or duplicate data without affecting how a browser processes HTML.

There are a few tools to help you with this: HTML Minify, CSS Minifier and JavaScript Minifier.

4. AMP implementation

AMP stands for Accelerated Mobile Pages. It serves to help mobile pages load faster, being a simplified version of the site to facilitate users' experience on mobile phones or tablets.

This feature can significantly improve your site's conversions and speed on mobile, helping a lot with your PageSpeed ​​Insights score.

If you are familiar with HTML, you can follow the detailed tutorial about AMP here.

To learn more about improving your site for Core Web Vitals, read more at Web.dev.

There is also a tool in Semrush so that you can analyze your site's Core Web Vitals. Check out this article from Semrush Blog to learn how to configure auditing.