Developed by Google, Core Web Vitals (CWV) are described as a group of performance metrics that "measure real-world user experience for loading performance, interactivity, and visual stability of the page". The three Core Web Vitals (CWVs) are:
- Largest Contentful Paint (LCP): measures loading performance
- Interaction To Next Paint (INP): measures responsiveness
- Cumulative Layout Shift (CLS): measures visual stability
Improving your Core Web Vitals can lead to a better user experience, increased organic traffic and ultimately more conversions for your website.
Ensuring your users have a positive digital experience should play a key role in any online business as page experience impacts your Google search ranking.
Part of Google's ranking algorithm is already dedicated to evaluate the User Experience (UX). In August 2021 Google added Core Web Vitals as a signal to assess UX quality.
Page experience search signals
Page experience is a set of signals that measure how users perceive the experience of interacting with a web page beyond its pure information value.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) measures loading performance and is part of the Core Web Vitals. Google will use Core Web Vitals as a search ranking signal in 2021.
Understanding Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) measures the render time of the largest content element visible within the viewport (so before the users scroll).
LCP focuses on the speed of delivering the largest (excluding background images, and excluding content displayed outside the viewport e.g. below the fold) and consistent content (temporary content such as loaders or splash screens are ignored).
According to Google guidelines, your web pages should have a LCP under 2.5s, for at least 75% of your users (including both desktop and mobile traffic).
Common causes of slow LCP include large design elements such as images, videos and third-party scripts.
Optimization example
Optimize resources, use lazy load and trim JS to the essentials.
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) is a metric that assesses the responsiveness of a web page. It measures how much time elapses between a user interaction, such as a click or key press, and the next time the user sees a visual update on the page. (Please note, that the visual update may be unrelated to the interaction).
Understanding INP
INP aims to capture the duration between a user initiating an interaction and the subsequent rendering of the next frame, striving to achieve this for most, if not all, user interactions. INP value is the worst delay observed (for page views with more than 50 interactions, the outliers are excluded as INP will be the 98th centile value)
Interactions observed for INP are:
- Clicking with a mouse
- Tapping on a device with a touchscreen
- Pressing a key on either a physical or onscreen keyboard
Optimization example
According to Google guidelines, your web pages should have an INP under 200ms for at least 75% of users (including both mobile and desktop traffic).
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures page stability, by monitoring significant movements of elements on the page that may frustrate or mislead the user, during the entire page lifespan.
CLS is part of the Core Web Vitals. Google will use Core Web Vitals as a search ranking signal in 2021.
Understanding CLS
Cumulative Layout Shift measures the total sum of all individual layout shifts that occur during the entire lifespan of the page (including after the user has started to interact with the page), taking into account the size of the concerned area, and the distance of the shift.
The CLS algorithm monitors every layout shift in the current context, thus excluding the content of iframes.
Layout shifts that happen 500 ms after an active user interaction (like a click, a keystroke, or the resize of the window) have no impact on the CLS. Hovering, scrolling, and update flinging are not considered active interactions.
Each of the other layout shifts are scored according to the total affected area and the distance covered by the moved elements. Cumulative Layout Shift is the sum of all the considered layout shifts scores.
According to Google guidelines, your web pages should have a CLS under 0.1 for at least 75% of your users (including both desktop and mobile traffic).
Optimization example
To improve your Cumulative Layout Shift, make sure that the browser can allocate the right space for your images and iframes (including ads), even before it starts loading them, by defining their width and height, or aspect ratio.