5 need-to-knows about Google Core Web Vitals for every marketer and web developer

When tracking web performance, the number of possible metrics can be overwhelming. So which ones are critical to your business? With the Core Web Vitals initiative Google (again) summarizes the most important metrics for the best user experience, this time with a clear focus on user interaction. From 2021 and onwards, your performance on these metrics will affect your ranking. So, what do you absolutely need to know about Core Web Vitals?

1. The Core Web Vitals consist of 3 factors: LCP, FID, and CLS

There are 3 Vitals: loading performance, responsiveness, and visual stability. Each vital focuses on the overall page-experience. “Great page experiences enable people to get more done and engage more deeply; in contrast, a bad page experience could stand in the way of a person being able to find the valuable information on a page,” explains Google. The vitals will help marketers, web developers, product owners and IT-managers to quantify the user experience on their website. 

Loading performance, measured in Largest Contentful Paint (LCP)

Loading performance measures how long it takes for the most significant piece of content to show on screen? That content might consist of an image, block-level elements, and elements with background images loaded via URL. Most of the time, this is an image, video, or sizeable block-level feature.

Bear in mind: this metric measures perceived loading speed by looking at the render time of the most significant piece of content. It doesn’t measure the speed of the webpage overall. However, perception is what matters for your users, therefore the perceived loading speed of the page counts towards a better user experience.

Responsiveness, measured in First Input Delay (FID)

Responsiveness measures how long it takes for the web page to react to a user interaction? An interaction is a click, tap, or keypress, but not scrolling or zooming. A quick reaction gives your user the feeling of quick responsiveness of your website.

The metric of FID measures the interaction that happens while loading the complete page. A delay can occur, for instance, when the browser is still executing Javascript. If a visitor clicks a button and nothing happens immediately, the overall user experience can take a hit. 

Visual stability, measured in Cumulative Layout Shift (CLS)

This is something everybody can relate to, you try to click on an item but there is stuff moving on-screen while loading? Unexpected shifts in already loaded content, caused by the rest of content loading, can confuse and lead the user to chase a button around the screen and damage to user experience. This metric only looks at unexpected movements. A regular ‘click this button to show the fold-out menu’ doesn’t count. Significant layout shifts often appear with ads loaded via Javascript and images without a clearly defined width and height (thus moving the text when fully loaded).

The score for CLS is the product of two measurements: the impact fraction and the distance fraction. The impact fraction defines the impacted area between the two frames of the shift. The distance fraction measures the distance an unstable element has moved. 

2. The Core Web Vitals performance has influence on the ranking

Recently, Google announced that Page Experience (the score on these Core Web Vitals) will become a new ranking factor for 2021. “By adding page experience to the hundreds of signals that Google considers when ranking search results, we aim to help people more easily access the information and web pages they’re looking for, and support site owners in providing an experience users enjoy,” Google wrote on their Webmaster Central Blog. Mobile Speed has already been added to the list of ranking factors. A high Performance Score on the Core Web Vitals means a higher organic ranking in 2021. By announcing the Core Web Vitals early on should provide everybody enough time to conquer speed challenges and make improvements before your competitors do.

3. Know what to aim for with recommended values

How do you know if your website’s performance is on par with these metrics? Overall, the values below are regarded as the best benchmarks:

Largest Contentful Paint: below 2.5s. Higher than 4s is considered as poor performance.
First Input Delay: below 100ms. Higher than 300ms is considered as poor performance. 
Cumulative Layout Shift: below 0.1. Higher than 0.25 is considered as poor performance.

4. Compare your data to this Benchmark for e-commerce

Google provides access to Core Web Vitals data in various ways, with Chrome User Experience (CRuX) reports being the most common. The data is collected from chrome users on mobile and web and therefore provides an overview of all chrome visitors from the previous month. The caveat here is that this works perfect as long as there is enough traffic for a specific url and enough traffic for the whole domain to be part of the Chrome UX data. Below an example of CRuX report from the Twinkle top 3 (Bol.com, Coolblue, Zalando) and the Twinkle100 top10.

5. Monitor your metrics and improve continuously

Last but not least: monitor your own metrics! While there are free web performance tools such as Chrome UX report, Google’s Lighthouse and PageSpeed Insights, these tools provide either a snapshot in a certain timeframe or provide an average of all users. This data isn’t sufficient for testing over time or testing specific page elements or use cases. Any change or degradation in between those snapshots is not captured.

Continuous monitoring is crucial for constant improvement of your website or app and to avoid small regressions, lost over time. With our benchmark toolset MeasureWorks is able to provide different types of tools to monitor the vitals and compare the results to your competitors or industry benchmark results continuously. Below we’ve added an example of the same kind of data that is being captured with our benchmark tooling, but then zooming in on specific use case (iPhone 6).