This is the second part of our series on Core Web Vitals. The first instalment offers an overview of Google’s unified guidance for quality signals that are essential to delivering a great user experience on the web.
Core Web Vitals utilise a set of predefined metrics that measures important aspects of real-world user experience. Each metric has a threshold, which acts as an aid for developers to understand whether the experience of a site is “good”, “needs improvement”, or “poor”.
The table below identifies each metric and groups their performance. Figures between ‘Good’ and ‘Poor’ fall into the category of ‘Needs Improvement’.
| Good | Poor | Percentile | |
|---|---|---|---|
| Largest Contentful Paint How fast the content is loading | ≤2500ms | >4000ms | 75 |
| First Input Delay How quickly the content is interactive | ≤100ms | >300ms | 75 |
| Cumulative Layout Shift Visual stability – how much the content is jumping around on the page | ≤0.1 | >0.25 | 75 |
In order to rank the overall performance of a page or site, Core Web Vitals uses the 75th percentile value of all page views on a website. Put simply, if at least 75 percent of all page views on a website are categorised in the ‘good’ threshold, the entire site is classified as having ‘good’ performance for that specific metric.
So, for example, a 75th percentile LCP of 2 seconds is classified as “good”, while a 75th percentile LCP of 5 seconds is classified as “poor”.
Bryan McQuade, Google Software Engineer
What is LCP (Largest Contentful Paint)?
The Largest Contentful Paint (LCP) metric reports on the time it takes to render the largest image or text block visible within the viewport. The timer begins relative to when the page first started loading. The faster the largest image or text block is rendered, the better the experience for anyone using the website.
What is FID (First Input Delay)?
First Input Delay (FID) is a measure of the time between when the user first makes an interaction with the page (e.g. clicks/taps on a button) to the time when the browser is able to respond to that interaction and perform an action (e.g. open a popup). The faster the page is interactive, the better the experience.
What is CLS (Cumulative Layout Shift)?
Cumulative Layout Shift (CLS) is the measurement of the layout shift of the entire lifespan of a page. A layout shift takes place any time a visible element adjusts its position from one frame to the next. For example, when you go to click on an article link, and the page content shifts down, preventing you from clicking the link. This would contribute towards a poor CLS score. The lower the CLS score, the better the experience.
Providing a high-quality user experience
The goal of Core Web Vitals is to ensure every website provides an optimised high-quality experience for users. In order to do this, page content needs to load fast, provide interactivity quickly and ensure elements are not shifting around.
User research and the science behind Core Web Vitals has discovered that the amount of time users usually wait before losing focus is just 1 second. Not optimising your website to deliver these Core Web Vitals can mean that your organisation misses out on sales, support, and success.
Let’s keep in touch
Join our mailing list for insight that can boost your business. Unsubscribe anytime.