A beginners guide to Core Web Vitals

In May 2020, Google introduced Core Web Vitals. We receive hundreds of updates from the world’s largest search engine every year. 

Google is committed to providing its users with an outstanding experience. Core Web Vitals was developed exclusively to improve website quality for visitors to have the best possible experience.

So now, with the release of Core Web Vitals – it is imperative that you maximize the user experience of your website!

You don’t need to worry if you don’t know what this means for your business website or SEO. This guide has got you covered. 

What are Core Web Vitals?

Source

To improve a website’s user experience, website owners need to focus on a set of metrics known as Core Web Vitals.  It evaluates the responsiveness, speed, and page stability of your website.

Google isn’t always forthcoming with the specifics of its algorithm updates, which makes Core Web Vitals and the Page Experience Update exciting. 

In this case, we have been provided with the exact metrics we should measure to improve our site performance. Essentially, the Page Experience update will significantly impact us the day it is implemented. Yet, it’s the one we can prepare for as long as the auditing process is accurate and thorough.

Why are Core Web Vitals important?

• Google has announced that Core Web Vitals will become a ranking factor as of mid-June 2021; Google plans to make page experience an official Google ranking factor.
• Visitors love fast sites that are easy and pleasant to use, on any device, from any location. The bottom line is: you’ll make more money if you’re providing a great user experience.
• Passing the Core Web Vitals assessment will likely result in fewer users retreating to the SERP because you’re providing a good user experience. 
• Google has hinted they may start displaying a “Good Page Experience” badge in their search results. We call these “indirect ranking factors” because they influence searcher behavior (e.g., more clicks for pages with this badge), which is fed back into Google’s algorithms.

Google describes Core Web Vitals ranking factor as real-world page experience metrics, but it’s all about speed. In contrast to traditional methods of measuring page speed, Core Web Vitals divides speed into three separate metrics: 

1. Largest Contentful Paint

Source

According to the Large Contentful Paint (LCP), the most significant component of web page loading time is from the point of view of an actual user. Simply put: it’s the time from clicking a link until the majority of the content appears on the screen.

With the Largest Contentful Paint (LCP), you can identify how long it takes your website to render its largest image or text block. 

The page speed matters a lot because a slow-loading page cannot retain visitors for more than a few seconds since it provides users with a poor user experience.

And according to Google, a good user experience means that LCP should occur within 2.5 seconds of when the page first starts loading.

Remove unnecessary third-party scripts and upgrade your web host to reduce your load time, and you will significantly improve your LCP. You can also use “lazy loading” to make your loading speed faster and make images load only when your viewers scroll down on your website.

2. First Input Delay

Source

First Input Delay (FID) is a Core Web Vital that measures the time in milliseconds from when a user first interacts with your site (when they click a link, tap a button, or press a key) to when the browser can respond to that interaction.

You want your page to be as usable as possible as early as possible!

An excellent first impression for the user is dependent on a great first input delay. The user is unlikely to interact with the site again if the first interaction with the site is delayed.

FID will primarily be based on the LCP – if your website loads fast, then the ability for your visitor to do an action will be quicker!

Your goal should be to achieve about 100 milliseconds or less for response time. 

3. Cumulative Layout Shift

The CLS is basically a metric that gives a measurement of the visual stability of your website. Both field data and lab data are available for CLS. The lower the CLS score, the better the visual stability.

In other words: if elements on your page move around as the page loads, then you’ve got a high CLS, which is terrible.

In contrast to most other metrics, CLS isn’t measured in seconds. Instead, it looks at the viewport size, measures the movement of things between two frames called unstable elements. It further measures their activity in the viewport.

To provide a good user experience, a CLS score should be less than 0.1 or be at least 0.25 to avoid receiving a “poor” score (although between 0.1 and 0.25 still “needs improvement”).

You can minimize CLS by following these simple steps.

• Whenever possible, use fixed-size attribute dimensions for any media (video, images, GIFs, infographics, etc.): That way, the user’s browser knows precisely how much space that element will take up on that page. And won’t change it on the fly as the page fully loads.
• Reserve space for ad elements: Otherwise, they may suddenly appear on the page, pushing content to the bottom, top, or edge.
• Feature new UI elements below the fold: That way, it prevents pushing content down that the user “expects” to stay where it is.

There are other Google Core Vitals that serve as additional metrics. 

As examples, Time to First Byte (TTFB) and First Contentful Paint (FCP) are critical metrics for diagnosing LCP issues. Furthermore, metrics like Time to Interactive (TTI) and Total Blocking Time (TBT) are essential for identifying issues with interactivity that could harm FID.

Source

How to measure your Core Web Vitals?

Fortunately, Google is very precise and clear about Web Vitals. Aside from providing lots of documentation and resources, Google also offers tools to help you optimize your website to ensure it passes Core Web Vitals. 

• That explains why practically every Google tool now supports measuring Core Web Vitals.  
• The 75th percentile of your website’s page loads, segmented between desktops and mobile devices, is the ideal threshold to measure. 

Tools to measure Core Web Vitals

1. Google Search Console

Core Web Vitals can be measured in the field using Google Search Console, which is probably the most accessible and most straightforward tool. However, to use the field data provided by GSC, you need to have a verified property in your Google Search Console account. 

Google Search Console now offers a new Core Web Vitals report that allows owners to evaluate pages across their sites. When running this report, be aware that URLs without sufficient reporting data will be omitted from the report. 

2. Page Speed Insights

You can now utilize PageSpeed Insights to determine your vital web metrics.

Several significant improvements have been made to PageSpeed Insights, making it capable of measuring Core Web Vitals in both the lab and field sections of the report:

• Field data is your actual visitors’ experience (this is probably the more important area to focus on, although the Lab data should be evaluated as well).
• Lab data is a simulation of a visitor’s experience.

It is now possible to use the data provided by the Chrome UX Report without any technical or coding expertise, thanks to Google PageSpeed Insights. 

3. Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can use it to audit any website, regardless of whether it’s public or requires authentication, for performance, accessibility, progressive web apps, SEO, and more.

Several new features have been included with version 6.0, including additional audits, new metrics, and a re-written performance score.

One of the great things about Lighthouse is that it measures these metrics (Core Web Vitals, Google), and it factors them while calculating the overall performance score. 

Source

Updates to Lighthouse are synchronized with the latest Chromium releases (which power Google Chrome). 

4. Chrome DevTools

Chrome DevTools includes a feature that helps webmasters find and resolve visual instabilities that may contribute to Cumulative Layout Shift (CLS).

You can check for unexpected layout shifts using the Chrome DevTools Performance panel (and the Experience section). This tool is invaluable when it comes to detecting and fixing issues with visual stability on your website. 

ChromeDev Tools are a set of advanced tools that allow you to analyze your website in the lab environment deeply. 

Wrapping Up

When managing to reach the minimum thresholds, owners of websites will have a distinct advantage with search visibility. 

You should start improving your website now so that you can take advantage of this new ranking metric when Google turns the switch on!

Despite our inability to predict exactly what Page Experience Update will look like on the day it launches, we hope that this guide will give you an idea of the essential elements of page experience and provide you with a starting point.