Google’s Core Web Vitals explained

We are sure you have heard about Google’s latest page experience measuring tool, Core Web Vitals. Introduced in July this year by Google this tool is yet another a new metric to determine how well web pages perform in SERPs (search engine result pages). These Web Vitals assist in keeping businesses’ websites to ensure they are delivering the best experience to their audiences.

The new metrics, Core Web Vitals are the main focus this coming year. Google are renown for constantly changing and upgrading metrics and measuring tools thus website owners and companies finding them confusing. Generally, site speed metrics can be hard to understand because of the amount of time they change when testing your site, giving different results each time.

Introducing Core Web Vitals

These Core Web Vitals do not work alone, as there are numerous other metrics. Some work with field data, while others are found in controlled lab tests. After a substantial amount of research, Google created a new set of metrics called Web Vitals. Ones we are familiar with, together with some new ones. The Core Web Vitals are considered the most important to date.

Largest Contentful Paint (LCP)

Google created this to measure loading performance. LCP measures the point at which the largest content element appears fully on the screen. Bear in mind that it will not measure the time it takes for your page to load fully, but it simply checks at when the most important part loads.

If you have a straightforward web page with just one piece of text and a large image, the large image will be considered the LCP. This will be the first item to be seen on your web page. As this is the largest piece of content to load in the browser, by making this load faster, your site can appear much quicker. You can achieve this by opitimizing your text or images.

Largest Contentful Paint is pretty easy to grasp. It is simply the time it takes for the largest element to appear on screen. These elements may include images, videos, and other types of website content. According to Google, you should aim for the LCP to happen within the first 2.5 seconds of the page loading. Everything under 4 seconds needs improvement, and you can consider everything over this is performing poorly.

First Input Delay (FID)

This tool focuses on interactiveness, specifically in terms of a website’s response rate. The First Input Delay measures the time it takes for the browser to respond to the user’s first interaction. The faster the browser reacts, the more responsive the page will appear. The FID measures all interactions that happen during the initial loading of the page. These are input actions like taps and key presses, but not scrolling and zooming.

As the browser is busy loading in the background, this will slow the loading of the page down. Once, it has loaded the page, everything looks in place. But when you tap that button, nothing happens! Considered a bad experience, this will lead to frustration. Even with a slight delay, it might make your site feel slow and unresponsive. Unfortunately, this will put off users who may swipe to the next website.

A browser is always busy and has a lot of work to do, and sometimes it needs to pause certain requests and return to them later, as it cannot do everything at the same time. As developers build continuous complex websites, more pressure is put on browsers. To speed things up on uploading content whilst making it interactive, we need to focus on the FID. Anything between 100ms and 300ms needs improvement, and you can view anything above that as performing poorly.

Cumulative Layout Shift (CLS)

This third Core Web Vital is the latest from Google. This metric looks to see how stable other items load onto your screen whilst in the background, the large content area is being loaded. This may be ads, call-to-action buttons, and images. The CLS will check how often things jump around while loading and by how much.

These format shifts are common with web pages with ads. How many times have you been on a web page to click a desired button or feature for it to jump from one side to another? This brings frustration to the user. As websites become more complex, there is so much trying to load at the same time, thus items will load whenever they are ready in no particular order.

The Cumulative Layout Shift score only looks for unpredictive shifts. If a user clicks on a button that calls for a big change in design, this will count as a layout shift. But if a user clicks a menu button for example, and a fold-out menu appears this will not be counted.

This Core Web Vital compares frames to determine the movements of elements. It calculates all layout shifts and the severity of these movements. Google deems anything below 0.1 good, while anything from 0.1 to 0.25 needs work. You can consider everything above 0.25 as poor. 

There are plenty of tools to assist you to monitor Web Vitals and improve the performance of your site.

Here are a few to check out: -

·       PageSpeedInsights

·       Lighthouse

·       Search Console Core Web Vitals report

·       Core Web Vitals report (Chrome 88)

·       Core Web Vitals overlay (Chrome 90)