Google Core Web Vitals - Everything publishers need to know
For Google, the quality of a website’s user experience has been difficult to quantify. This led to the development of all the tools to measure every aspect of the user experience, such as Lighthouse, PageSpeed Insights, and the Google Search console.
In an effort to make it easier for webmasters to track and improve their experiences, Google has simplified the landscape into the three most critical metrics for all web experiences
On May 5th, 2020 Google unveiled the “Core Web Vitals” report in the Google Search Console. This draws data from the new Web Vitals engine and simplifies the web experience into three, standardized metrics.
These three metrics are what matter most to the quality of the user experience and will be made prominent in all of Google’s performance tools.
The goal of the update is to make it easier for site owners to make improvements without the need for numerous reports and performance gurus. It will also help Google standardize their assessment of sites’ UX for use in search rankings.
What are Core Web Vitals?
Each of the three Core Web Vitals represents a distinct stage of the user experience: loading experience, site interactivity, and visual stability of page content.
They are designed to be easily measurable and improvements to these metrics will result in ‘real-world’ improvements to the user experience.
Analyzing a site shows how many URLs rank either ‘Poor’, ‘Need Improvement’, or ‘Good’ to make performance analysis as digestible as possible.
Here you can see how a Core Web Vitals report looks from Google’s Search Console.
What metrics are measured in Core Web Vitals?
While Google has stated that these metrics will ‘evolve’ over time, the first metrics used as Core Web Vitals will be:
- Largest Contentful Paint
- First Input Delay
- Cumulative Layout Shift.
Largest Contentful Paint (LCP): measures loading performance.LCP
measures the time it takes to render the largest element of content in the viewport. The size of the element is determined by the size that's visible to the user in the viewport.
Content outside the viewport, clipped, or non-visible parts will not count towards the element’s size. In addition, only certain element types are considered as part of the Largest Contentful Paint:
- Image elements
- Image elements inside an SVG element
- Video elements
- An element with a background image loaded via the URL function (as opposed to a CSS gradient)
- Block-level elements containing text nodes or other inline-level text elements children.
As this element can change as the page loads, Google will switch to the newest, largest element until the page is fully loaded or the user starts to interact with the page.
First Input Delay (FID): measures interactivity.
This is designed to gauge responsiveness so it only focuses on events from user actions like clicks, taps, and button presses rather than on-page interactions like scrolling and zooming.
Cumulative Layout Shift (CLS): measures visual stability.
How many times have you gone to click a story and as your thumb is about to hit the link, the page updates, jolts, and moves and suddenly the AppStore is loading?
This hellscape is caused by Cumulative Layout Shift — or how much the page moves as it loads—and it’s something Google wants to prevent.
To measure CLS, the browser assesses two rendered frames for the viewport size and any movement of ‘unstable’ elements in these viewports. The final score is a product of the ‘impact fraction’ and the ‘distance fraction’. This is basically the total screen space taken by moving elements and then how far an element has moved.
The red area represents the layout shift of the image load.
What is a good Core Web Vital score?
Google has further simplified the process with a 3-step rating of ‘Poor’, ‘Needs Improvement’, and ‘Good’. Each rating has a defined threshold to help webmasters progress.
Here are the thresholds for each core vital:
- Largest Contentful Paint: To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
- First Input Delay (FID): For a good user experience, pages should have a FID of less than 100 milliseconds.
- Cumulative Layout Shift (CLS): Pages should maintain a CLS of less than 0.1.
Google’s advice to ensure that you’re hitting the recommended target for the majority of your users is to ‘measure is the 75th percentile of page loads, segmented across mobile and desktop devices.’
Will Core Web Vitals affect my ranking?
Yes, but not yet.
Core Web Vitals will not be a ranking factor until 2021. Core Web Vitals will join mobile-friendliness, safety, security, and the lack of pop-ups as the signals to measure overall page experience.
Google will give website owners at least 6-months notice before core vitals start to affect page rank. You can measure and improve these metrics now.
How do I measure my Core Web Vitals?
One of the reasons behind this change has been to make these metrics standard across Google’s performance tools. This will help site owners to assess their performance without implementing manual analytics on their pages or accessing multiple tools.
Each Core Web Vital will be available in the Chrome User Experience Report
, PageSpeed Insights
, and Search Console's Core Web Vitals
Developers will also be able to report on each of the Core Web Vitals without writing any code using the Web Vitals Chrome Extension, using the web-vitals library to measure and display these metrics as they browse the web.
This development from Google should reduce the complexity of improving the user experience. Site owners will no longer need to be experts in multiple tools and can focus their efforts on these three core vitals.
If you’d like to learn how to optimize your page experience, check our guide to Lighthouse V6 here