The Importance Of Web Vitals

Optimising web pages to ensure that your users have the highest-quality user experience is vital for your website’s success. In order to achieve your desired goals, your users must have a positive experience, and Web Vitals is important in helping you to quantify your site’s experience while also identifying key opportunities for improvement.

What Is Web Vitals?

Google’s Web Vitals initiative provides clear guidance for achieving quality signals which are vital for delivering optimal web user experiences. Over the past few years, the world’s largest search engine Google has supplied several tools that measure performance and report on it, but keeping up with this abundance of metrics can be challenging. Web Vitals has aimed to make the landscape more simple, helping sites to focus on Core Web Vitals – the metrics that are most important.

What Are Core Web Vitals?

These are the Web Vitals’ subset which apply to every web page and which every site owner should measure. Every Core Web Vital represents one unique element of user experience and can be measured in the field, reflecting the critical user-centric outcome’s experience in a real life setting. Over time, the metrics making up Core Web Vitals evolve. At the present, they focus on three user experience aspects – visual stability, interactivity and loading. They include these metrics:

LCP is short for Largest Contentful Paint – this measures a page’s loading performance and should occur in under 2.5 seconds of the page beginning to load.

FID is short for First Input Delay – this measures interactivity and should be under 100 milliseconds for an optimal user experience.

CLS is short for Cumulative Layout Shift – this measures visual stability and should be under 0.1.

If pages meet the recommended targets for the metrics above at the 75^th percentile they pass for compliance.

Tools That Measure Core Web Vitals

It is Google’s belief that, to ensure optimal web experiences, Core Web Vitals couldn’t be more important. Therefore, all its most popular tools surface these metrics.

The Chrome User Experience Report will collect real, anonymised user measurements data for every Core Web Vital so site owners can rapidly assess performance with no need to instrument analytics manually on their page. Although the data this report offers gives site owners a rapid way of assessing their site performance, it doesn’t provide per-pageview, detailed telemetry which is essential for accurately monitoring diagnosing and reacting to regressions, so sites should always set up real-user monitoring of their own.

You can measure each Core Web Vital using web APIs in JavaScript by using the JavaScript web-vitals library then send the data for analytics before aggregating and reporting on it to determine whether each page meets the recommended threshold.

Lab Tools For Measuring Core Web Vitals

Although all Core Web Vitals are field metrics, you can also measure many of them in the lab. This is the ideal way of testing features’ performance during their development before they’ve been released for users so that performance regressions can be caught before they occur. Chrome DevTools and Lighthouse are ideal tools for this although FID cannot be measured since there isn’t any user input. Nevertheless, TBT (Total Blocking Time) metrics are lab-measurable so can be an ideal alternative for FID. Any performance optimisation that improves TBT in a lab setting should also work to improve FID when used in the field.

It’s important to be aware, though, that although lab measurement forms a key component of delivering an excellent user experience, it shouldn’t be used instead of field measurement.

Site performance varies dramatically depending on the capabilities of the user’s device as well as the network conditions, the other processes running on that device and that way they interact with the web page. User interaction can affect each Core Web Vital metric score, so it’s only by using field measurements that the entire picture can be accurately captured.

How Can Scores Be Improved?

Once Core Web Vitals have been measured and key areas to improve have been identified, you need to move forward to the optimisation stage. There are several ways in which you can optimise your web pages for every Core Web Vital, but it isn’t just about the Core Web Vitals – there are some other key metrics to consider too. These act as supplemental or proxy metrics for Core Web Vitals, helping to capture a larger element of user experience or helping to diagnose a certain issue.

As an example, TTFB and FCP metrics are both essential loading experience aspects and both are very useful when it comes to diagnosing LCP issues such as render-blocking resources or a slow server response time. TBT and TTI lab metrics are also essential for catching then diagnosing potential issues with interactivity which could impact negatively on FID. They aren’t Core Web Vitals since they cannot be measured in the field and don’t reflect user-centric outcomes.

The Evolution Of Web Vitals

Both Core Web Vitals and Web Vitals are representative of the best signals that developers have available to them at the present time to measure the quality of a user’s experience across the web. However, these signals aren’t perfect. It’s likely, then, that future additions and improvements will appear at some point.

Core Web Vitals have relevance to every web page, and this means that they’re featured across all of the most relevant Google tools. When changes occur to those metrics, the impact will be wide-reaching and, therefore, developers must expect the thresholds and definitions of Core Web Vitals to not only be stable, but to receive prior notice of any updates which should have an annual, predictable cadence.

Outside the Core Web Vitals, other Web Vitals typically are tool or context specific. This means that, when compared with Core Web Vitals, they’re likely to be more experimental. This also means their thresholds and definitions are likely to change on a far more frequent basis. Fortunately, a public CHANGELOG will clearly document all changes for Web Vitals so that developers have a consistent point of reference when it comes to staying up to date with the latest best practice.