Overview of the Core Web Vitals
Core Web Vitals are a set of performance metrics that focus on three crucial aspects of user experience: loading, interactivity, and visual stability. The three Core Web Vitals are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These metrics are designed to help developers identify and resolve performance bottlenecks, thus ensuring a smooth and enjoyable user experience.
Largest Contentful Paint (LCP)
LCP measures the time it takes for the largest element on a webpage, such as an image or text block, to be fully visible on the screen. A fast LCP is crucial for delivering a positive user experience since users tend to gauge a site's performance based on the loading speed of its primary content.
Understanding the LCP thresholds
LCP thresholds are categorized into three performance groups:
- Good: LCP occurs within 2.5 seconds of page load.
- Needs improvement: LCP occurs between 2.5 and 4 seconds of page load.
- Poor: LCP occurs after 4 seconds of page load.
To provide an optimal user experience, developers should aim for an LCP of 2.5 seconds or less.
First Input Delay (FID)
FID measures the time between when a user interacts with a web page (such as by clicking a button or link) and when the browser begins to process that interaction. A lower FID indicates a more responsive webpage, which in turn, leads to higher user satisfaction.
Thresholds for the FID
FID thresholds are divided into three performance groups:
- Good: FID is 100 milliseconds or less.
- Needs improvement: FID is between 100 and 300 milliseconds.
- Poor: FID is longer than 300 milliseconds.
For a seamless user experience, developers should strive to keep FID under 100 milliseconds.
Cumulative Layout Shift (CLS)
CLS quantifies the degree of unexpected layout shifts that occur on a webpage. A layout shift occurs when an element on the page changes its position, which can lead to a disruptive user experience. A lower CLS score indicates a more stable webpage layout.
CLS thresholds
CLS thresholds are also broken down into three performance groups:
- Good: CLS score is 0.1 or lower.
- Needs improvement: CLS score is between 0.1 and 0.25.
- Poor: CLS score is higher than 0.25
To ensure a stable and visually pleasing user experience, developers should aim for a CLS score of 0.1 or lower.
What are the Core Web Vitals based on?
To evaluate a webpage or website's overall performance, Google uses the 75th percentile value for all user visits. The choice of the 75th percentile is based on two primary factors. Firstly, the chosen percentile should guarantee that the majority of visits experience the desired performance level. Secondly, the value at that percentile should not be significantly influenced by extreme cases.
Why does Google use the 75th percentile for Core Web Vitals?
Considering these competing objectives, after thorough analysis, Google concluded that the 75th percentile offers a fair compromise.
- By employing the 75th percentile, Google can be confident that the majority of visits to the site (3 out of 4) achieve the targeted performance level or better.
Moreover, the 75th percentile value is less susceptible to outlier impacts. To illustrate this, if a site with 100 visits has 25 visits reporting large outlier measurements, the 75th percentile value would be influenced by these outliers. While having 25 out of 100 samples as outliers are feasible, it is far less likely than in the 95th percentile scenario.
Is it realistic to pass the Core Web Vitals?
Fortunately, yes. The values Google has given the Core Web Vitals are achievable.
Google has taken into account that not all places in the world have good Internet connectivity and that this may also play a role in your Core Web Vitals. Suppose you have many visitors with slow Internet, is it feasible to get under 2.5 seconds for your Largest Contentful Paint? Also, google looks at the CrUX report to find out if the values they set are achieved in reality. Google says its goal is that 10% of origins should achieve the "good" threshold.
What do we think about it?
We think Google has been quite lenient with the 75th percentile because this is a good baseline worldwide. But if you have a webshop, for example, then you need to get more out of the Core Web Vitals than simply meeting Google's values.
How many websites are passing the Core Web Vitals?
To find out how many websites make it to the Core Web Vitals, we can use the HTTP archive. Google releases big query data that can be used by the community for reports.
The percentage of origins passing all three Core Web Vitals (LCP, FID, CLS) with a "good" experience. Note that if an origin is missing FID data, it's assessed based on the performance of the remaining metrics.
Desktop: 46,7%
Mobile: 40,0%
% Of origins having a good Largest Contentful Paint
The percentage of origins with "good" LCP experiences, is less than or equal to 2.5 seconds.
Desktop: 65,7%
Mobile: 51,7%
% Of origins having a good Cumulative Layout Shift
The percentage of origins with "good" CLS experiences is less or equal to 0.1.
Desktop: 66,5%
Mobile: 74,7%
% Of origins having a good First Input Delay
The percentage of origins with "good" FID experiences, is less than or equal to 100 ms.
Desktop: 99,9%
Mobile: 92,9%
The Connection Between Core Web Vitals and SEO
Search engines, like Google, consider page speed and user experience as crucial factors when determining search rankings. Websites that perform well in the Core Web Vitals assessment are likely to rank higher in search results, leading to increased visibility and organic traffic. By optimizing these metrics, you can improve your website's search engine performance and provide a better overall user experience.
Conclusion
Understanding and optimizing Core Web Vitals is essential for delivering a fast and enjoyable user experience on your website. By focusing on the metrics of Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift, you can identify and address performance issues that may be affecting your site's search engine rankings. By optimizing these factors, you'll be well on your way to providing a better user experience and improving your website's visibility in search results.
