Core Web Vitals Explained

Overview

Web Vitals is a Google initiative to provide a holistic and unified guidance for quality signals that are vital to delivering a better user experience. Over the last few years, Google brought out more tools to measure and report on performance, tools such as an updated Google Search Console, Lighthouse and Page Speed Insights. However, a site owner isn’t a developer, so some challenges arise when trying to understand all these performance tools and metrics. The Web Vitals initiative aims to simplify the landscape and help a site owner focus on those metrics which are really important – Core Web Vitals.

What are Core Web Vitals?

Core Web Vitals are the subset of Web Vitals that apply to any type of web page across all Google tools and should be used by any website owner. Each of the Core Web Vitals are representatives of the user experience and are measurable in the field by reflecting the real-world experience.

Currently, Google is focusing on three aspects of the user experience (note that the Core Web Vitals will evolve over time). These 3 aspects are:

Loading performance – Largest Contentful Paint (LCP) should occur within 2.5 seconds of when the page first starts loading for a good user experience. The LCP is represented by the time for the largest visible element, above the fold, to be fully loaded.

Here is an example of a render timeline where you can see how the page is painted during each of its elements requests; as for the banner image (considered the largest visible element above the page fold), we can see it started at 1.20s and is fully loaded 0.6 seconds later.

Interactivity performance – First Input Delay (FID) should occur within 100 milliseconds. The FID is defined as the delay between a user taking their first action on a page (for example, clicking on a button or opening a navigation menu) and the website response.

Visual stability performance – Cumulative Layout Shift (CLS) should be maintained at 0.1 for a good user experience. The CLS is a measurement of visual stability and with each page element movement (shift) during the loading process the score increases.

Here is an example of a bad shift in your page layout and how can damage your user experience, which can result in an annoyed customer and eventually avoiding your website forever.

Why do Core Web Vitals matter

Core Web Vitals are going to influence rankings directly starting with May 2021. Google has announced a while ago, that pages with a good page experience score will be eligible for Google Top Stories on mobile, which translates as having the prime SERP real estate.

At the moment, to be eligible for Google’s Top Stories on mobile you need to use AMP, but from mid-2021 that will no longer be the case. As for a marketer or a business owner, this means that if your website fails the Core Web Vitals assessment, you are going to miss out on a huge traffic opportunity.

Also, starting with this date, Google may identify pages that pass Core Web Vitals and the other Page Experience criteria directly in the search results, which means that pages with a good Core Web Vitals score would be prioritized in the search results. In other words, these metrics will influence your click-through rates starting with May 2021.

Tools to measure Core Web Vitals

Now that we covered the guidelines for these metrics, let’s see where and how we can find & measure these metrics. Fortunately, all of Google’s popular tools for web developers now support the measurement of Core Web Vitals; these tools are Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, web.dev’s measure tool, Web Vitals Chrome extension and Chrome UX Report API (the newest tool).

Check also our Speed Audit Checklist

So, Core Web Vitals can be measured using:

• Search Console – In GSC, the old Speed Performance report has been replaced with the new Core Web Vitals report. The report identifies groups of pages that require any attention based on real-world data from the Chrome UX report.

(Note: some URLs can be omitted if a minimum amount of reporting data isn’t available)

• PageSpeed Insights – Has been upgraded to use the newest version of Lighthouse (v6.0), which includes the Core Web Vitals metrics.

(Note: Core Web Vitals are annotated with a blue ribbon as shown above)

• Lighthouse – The new version, 6.0, brings these new metrics into the newly composed performance score along with additional audits. A third new metric – Total Blocking Time (TBT) – is considered to correlate with the Interactivity performance metric, First Input Delay (FID).

• Chrome DevTools – As with the Lighthouse tool, a new version of Chrome DevTools was rolled out to help site owners find and fix visual stability issues on any of their pages. Chrome DevTools also measures Total Blocking Time (TBT), which is useful when it comes to improving First Input Delay (FID).

• Web Vitals Extension – Has been specifically created for the three Core Web Vitals launch and is quite useful if you want to measure your metrics in real-time.

• Ryte – The new Ryte Web Vitals report can be used also as a measuring tool for your 6 essential web vitals metrics (including the Core Web Vitals LCP and CLS). This report will help you analyze and optimize vital loading, interactivity, and visual stability issues summarised as a performance score for all the following metrics: FCP, LCP, Speed Index, Time To Interactive, Total Blocking Time, and CLS score.

• Reddico Serp Speed – This beta tool it will compare your page speed at keyword level with the Top 10 ranking results. The report will show you an in-depth analysis of how well your page loads for real users as well as Google’s crawler and is based on Google’s own performance ranking system – Lighthouse API.

Conclusion

Now that we know what Google’s Core Web Vitals are and why are so important, what do we need to do next? At the moment, Core Web Vitals are not directly influencing rankings, but May 2021 is fast approaching and we should be ready for it, especially that Google is pushing more and more for a good performant & user-friendly website.

If you haven’t yet addressed your poor CWV performance, you should definitely look into it and we, at Erudite, are going to provide you with a “How to improve your Core Web Vitals ” guide in the next couple of days. Please subscribe to our newsletter so you can get our guide along with many more useful tools & tips for improving your site performance and visibility.