Core Web Vitals: What Are They and How Can You Test Them?

Anyone that runs a website knows how important it is to have it operating as smoothly as possible. Laggy, poorly constructed sites fail to convey a sense of trustworthiness and credibility. The average web user needs to feel this way before feeling comfortable enough to use your site. In order to better help you and web developers across the world improve their sites, Google recently released Core Web Vitals. This is a new program that provides a series of metrics to help determine the quality and potential user experience on a site. In this article, we’ll break down the main metrics, or web vitals, and how you can test them to determine how your site stands.

What Are the Main Web Vitals?

When determining the quality of service being provided by a site, there are a few metrics one must review to develop a clear picture. Google has narrowed it down for the average web developer. They have determined that three metrics are the main components by which a site can be evaluated. These three metrics are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Largest Contentful Paint is a measure of how fast your webpage loads. It marks the point where the main content of the page in question has been measured. This is the measure of how long it takes for the largest block of text (or image) on your page, to load. In general, you’d like the largest contentful paint on your site to take no more than 2.5 seconds to load. Certainly, this is a point worth considering during web design.

First Input Delay measures how your site behaves when users interact with the page. This involves things like responsiveness. Whenever a user clicks on your page, the time taken by the website to respond to that click is measured by the first input delay. Usually, anything faster than 100ms is good, but after that, you’ll want to make some improvements.

Lastly, Cumulative Layout Shift measures the stability of the visuals on your page. It is a quantifiable measurement of the amount of unexpected layout shift of the page. For each of these three metrics, you’ll want to hit the 75th percentile or better of all page loads. This would be considered “passing” as far as these metrics are considered.

How to Measure Core Web Vitals?

We have established that these metrics can be as important as a well-executed SEO campaign, so how are they measured? As Google considers core web vitals the spine of user experience, they’ve committed to providing tools to measure them. Below are three ways by which one can measure their site’s core web vitals performance.

Through the Chrome User Experience Report, Google collects anonymized, real user experiences for each core web vital. This is useful because it means external applications don’t need to be set up in advance. In fact, Google has already taken care of it ahead of time. Furthermore, tools like PageSpeed Insights run on the same platform, which means you can get to using them right away.

While this method is fairly straightforward and requires little input from you, the analysis offered by this method is not very detailed. It neglects including per-pageview telemetry, among other things. This would help someone accurately diagnose any potential issues with a web page.

Using JavaScript

Alternatively, one can use JavaScript to get a handle on core web vitals. The simplest way to get started is to simply pull up JavaScript’s entry in its library for web-vitals. This provides ready to use web APIs that are accurate. Furthermore, the Chrome Web Store offers an extension, called the Web Vitals Chrome Extension, that allows you to report on each web vital without having to write any code.

Lastly, one can use lab tools to measure each of the core web vitals. This is particularly helpful for those looking to get an idea of the performance of a site before it is launched. It does not mean, however, that field metrics can be disregarded. A user’s experience is affected by a wide variety of factors. Examples include network conditions and additional programs that may be running on the user’s end. Therefore, it’s in your best interest to take advantage of field tool testing once your site is up and running. It is a simple way to make sure everything is in good order.

Other Metrics to Know

While the covered core web vitals are the most important ones to consider, there are other valuable web quality metrics to consider. Any enhancement to site performance and your clients’ enjoyment of a site is desirable, after all. These measures often help in fine-tuning a diagnosis of a webpage. Some of these include measures like Time to First Byte which is important to the loading experience of users on your site, and Time to Interactive, which is helpful if you are suffering from a problem with the interactivity on your site. Both, while important, are not field-measurable, and accordingly, aren’t granted the same status as the main core web vitals.

What’s up With Lighthouse 6.0?

If you are interested in evaluating the quality of your site, one such tool that can get you started if you’re looking for a quick diagnosis is Lighthouse. This auditing program is automated, and it is available in Chrome DevTools either as an extension available through the Chrome Store or as a Node Module and a CLI.

The latest version of Lighthouse incorporates Google’s emphasis on core web vitals such as FDI and CLS and provides an evaluation of how your site performs with regards to those metrics. Now, the performance score provided by Lighthouse regarding your site has been updated to include these new models, which means that the old, weighted model has been adapted to look like this now:

These new changes have tangible effects on the performance evaluations of sites. Just 20 percent of sites have seen an improvement in their evaluation scores, while approximately fifty percent of all sites experienced a five-point or greater decline in scores with the newly implemented weighted scale.

Chrome DevTools

Chrome DevTools, like Lighthouse, has experienced some new changes to better serve web developers. Chief among these changes is the fixing of the issues tab, which in prior iterations suffered from frequent problems and cluttering. Additionally, the performance panel now logs the Total Blocking Time at the bottom of the page after recording your load performance. This tool measures how long a page appears to be functional but isn’t actually usable at the moment due to JavaScript’s blocking of the main thread, preventing user input from being acted on by the page. Lastly, the Chrome UX Dashboard now breaks down pages by content web vitals, allowing users to compare their site’s performance to that of their competition, as well as the industry as a whole.

Core Web Vitals, in short, are measures of user experience on a webpage. As things evolve, it is likely to change in both minor and significant ways. As you optimize your webpage, try to maintain healthy core web vitals, and you will be sure to keep those who drop by your site satisfied.