Introducing Web Vitals, Google’s Method For Scoring User Experience

It is long-known that Google reward websites that are both useful and accessible, and we’re all familiar with the fact that site speed, responsiveness and trustworthy content all play a role in Google’s judgment of a site’s user friendliness which in turn affects ranking.

But how on earth do we measure it all? Sure, there’s tools (Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console’s Speed Report developed by Google) to help, but with an abundance of them it can be a challenge to keep up.

Thankfully, Google recognise this, therefore, at the beginning of the month Google introduced Web Vitals. An initiative to provide unified guidance for quality signals that are essential to delivering a great user experience on the web helping business owners, marketers or developers to quantify the experience of a site and identify opportunities to improve.

Google says, “The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.”

What are the Core Web Vitals?

Core Web Vitals apply to all pages, and are the subset of Web Vitals. They are metrics that will be surfaced across all Google tools with each of the Core Web Vitals representing a distinct facet of the user experience.

The current set focuses on three aspects of the user experience—loading, interactivity, and visual stability. These metrics aren’t new, nor has there never been any guidance before, but what we do have now are the optimal ranges to target, though Google has said that the metrics making up the Core Web Vitals will evolve over time.

• Largest Contentful Paint (LCP): measures  when the largest content element in the viewport becomes visible. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  
  
• First Input Delay (FID): captures a user’s first impression of a site’s interactivity and responsiveness. It measures the time from when a user first interacts with a page to the time when the browser is actually able to respond to that interaction. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
  
  
• Cumulative Layout Shift (CLS): looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted. To provide a good user experience, pages should maintain a CLS of less than 0.1.

How do I measure Core Web Vitals?

Use Chrome User Experience Report

For a broad overview and a quick way to assess the performance of sites, Google currently recommend Chrome User Experience Report to gather data for each Core Web Vital. Unlike PageSpeed Insights and Search Console’s Speed Report, Chrome User Experience Report covers loading (LCP), interactivity (FID), and visual stability (CLS), though Google says the ability to measure it across the board is coming soon.

However, by using this method you will be missing detailed, per-pageview telemetry that is often necessary to accurately diagnose, monitor, and quickly react to relapses.

Measure Core Web Vitals in JavaScript

Within the web-vitals JavaScript library is a small wrapper for underlying web APIs that measures each metric in a way that accurately matches how they’re reported by the Google tools listed above.

Google claims it’s the easiest method, but it can appear daunting to anyone unfamiliar with code!

Use the Web Vitals Chrome Extension

Unfortunately it’s not as simple as heading straight to the Chrome extension page, it does require a little legwork but the 5-step installation instructions are super straightforward. This is the method we recommend if you shudder at the thought of tackling JavaScript and APIs.

Not only does it enable you to understand the performance of your own sites, you can also review your competitor’s and the web at large.

Recommendations for improving your scores

Once you’ve measured the Core Web Vitals and identified areas for improvement, the next step is to optimize. The following guides offer specific recommendations for how to optimize your pages for each of the Core Web Vitals:

Optimize LCP

Optimize FID

Optimize CLS

Though, we have narrowed it down for you…

Optimise LCP:

• Cache assets if your HTML is static and doesn’t need to change on every request.
• Install a service-worker to run in the browser background to serve HTML pages cache-first.
• Minify CSS by removing characters such as spacing, indentation, or comments to reduce CSS blocking time.
• Optimize and compress images into newer formats (JPEG 2000, WebP).

Optimise FID:

• Defer unused JavaScript if possible.
• Avoid JavaScript bloat and break up “long tasks” (long-running code).
• Consider using a web-worker to run JavaScript on a background thread.

Optimise CLS:

• Always include width and height size attributes on your images and video content.
• If you display ads, statically reserve space for the ad slot.
• Same with dynamic content, reserve sufficient space in the viewport so when it loads it doesn’t cause the content on the page to surprisingly shift around.

We recommend taking on board Google’s recommendations early, because as the scoring metrics evolve, you’ll already have a solid foundation to continue to build upon.

“Web Vitals and Core Web Vitals represent the best available signals developers have today to measure quality of experience across the web, but these signals are not perfect and future improvements or additions should be expected.

(…) For all Web Vitals, changes will be clearly documented in this public CHANGELOG” says Google.

You can read more on Google’s web.dev platform here or view more of our SEO services or find out more about our technical SEO services.