Understanding Core Web Vitals: The Vital Signs of Your Website

In May 2020, Google launched Core Web Vitals, a set of metrics for assessing website performance. As a result, some sites experienced a decline in traffic; however, others who adapted quickly saw significant benefits.

This article aims to demystify Core Web Vitals and highlight their importance for business websites. We'll explore how these metrics can enhance user experience and, consequently, improve business outcomes like conversion rates.

Here’s how Google’s team emphasizes the value of Core Web Vitals:

“Site owners should not have to be performance experts to understand the quality of experience they are delivering to their users. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.”

“We highly recommend site owners achieve good Core Web Vitals for success with Search and to ensure a great user experience generally.”

“Google’s core ranking systems look to reward content that provides a good page experience.”

I work at a web development company, and in this post, I will share my team’s insights and things we do when working at clients’ websites. Additionally, I include practical strategies to align your website with Google’s standards, ensuring a robust online presence. Let’s get started!

What are Core Web Vitals?

Core Web Vitals, introduced by Google, are key elements that play a crucial role in determining a webpage's overall user experience. They are a part of what Google calls 'Page Experience' signals, which are used to decide how well a page ranks in search results.

These metrics are designed to give website owners a clear picture of how real users experience their site. They focus on aspects like how quickly pages load, how stable the layout is while loading, and how quickly a site responds to user interactions. Improving these factors can lead to better positions in Google search results, which is crucial for any business online.

I will explore Core Web Vitals in more detail in the following sections, helping you understand how they work and how you can optimize your website for these important metrics.

Success stories of businesses that care about CWV

To prove the point from the previous section, we can also open a Google Core Web Vitals report and click "Read additional case studies here". This resource tells us about real success stories of websites that fixed their performance issues and gained a huge advantage. Let’s take a look at some of these stories:

• Groupe Renault discovered a significant link between Largest Contentful Paint (LCP) and their website's bounce and conversion rates. They observed that enhancing LCP by just one second could decrease the bounce rate by up to 14 percentage points and boost conversions by 13%.
• Farfetch experienced a 1.3% increase in web conversion rate with every 100ms improvement in LCP.
• Rakuten 24's A/B test revealed that better web vitals led to a 53.4% rise in revenue per visitor, a 33.1% increase in conversion rate, a 15.2% growth in average order value, and a 35.1% drop in exit rate, among other benefits.
• Carpe, by enhancing their LCP by 52% and Cumulative Layout Shift by 41%, saw a 10% growth in traffic, a 5% rise in online store conversion rates, and a 15% increase in revenue.

Impact on SEO

Core Web Vitals are crucial for SEO as they provide clear metrics for user experience, a factor that Google now includes in its ranking algorithm. This integration underscores the need for websites to meet these standards for better search result positioning.

SEO (Search Engine Optimization) is the practice of enhancing a website to improve its ranking in search engine results, helping to attract more visitors and potential customers.

Beyond SEO, Core Web Vitals impact overall website performance. Websites that score well in these metrics load faster, provide stable interaction, and enhance user-friendliness, leading to higher user engagement and conversion rates.

While important, Core Web Vitals are just one of many factors in Google's ranking criteria. Excelling in these metrics can improve a site's search ranking, but they don't guarantee top placement. A well-rounded SEO strategy should consider these alongside other factors.

In May 2021, Google announced Core Web Vitals would become an official ranking factor. This update means websites with better scores may see improved rankings, and those with poor scores could face penalties.

In summary, Google's focus on Core Web Vitals reflects its goal of optimizing user experience in search results. Websites that perform well in these areas are likely to provide better user experiences, aligning with Google's objectives and potentially securing higher search rankings.

Lifecycle of CWV metrics

The lifecycle of metrics is a crucial concept for businesses focusing on web performance. This lifecycle progresses through stages, allowing businesses time to adapt as metrics evolve from experimental to stable. This process is key for effective business planning and website optimization strategies, as it emphasizes the importance of stakeholder feedback and gradual, well-communicated changes for predictability and stability.

Grasping the lifecycle stages helps understand the measurement tools and be ready for incoming updates.

Core Web Vitals have three lifecycle stages:

• Experimental stage

Here, new metrics are developed and tested. This stage aims to address web performance issues effectively, refining existing metrics. It also involves gathering feedback from a broad community to spot any issues and possibly adjust the metric's initial definition.

• Pending stage

Metrics that show promise are refined further based on initial feedback. They remain in this phase for at least six months, allowing time for adaptation within the ecosystem. Input from developers and other stakeholders is crucial during this stage as the usage of these metrics grows.

• Stable stage

Once metrics prove effective and pass the Pending stage, they enter the Stable phase. Here, they are finalized and receive ongoing support, including bug fixes and occasional updates. Any changes to these metrics are thoroughly communicated via official documentation.

Google’s evaluation criteria

Understanding how Google evaluates website performance is crucial for ensuring your site meets standards that impact its visibility and user experience. We'll explore Google's evaluation criteria, offering insights to enhance your online presence.

Google uses specific metrics with set threshold values to gauge website performance. For most metrics, Google advises focusing on the 75th percentile of page loads, segmented across mobile and desktop devices. This means aiming for performance targets for at least 75% of your page visits in each category.

This approach ensures that the majority of your users are having a good experience on your site. It considers factors like page loading speed, interactivity, and layout stability.

Tools that check Core Web Vitals compliance use this 75th percentile criterion to determine if a site passes. Meeting these standards in Core Web Vitals metrics ensures good performance for most users, whether on mobile or desktop.

Distinguishing between Field/Lab data

Grasping the nuances of field and lab data is essential for anyone aiming to optimize website performance and ultimately drive better business outcomes. Knowing the strengths and limitations of each data type is key to developing a website that performs well across all user scenarios.

Lab data

Lab data is collected in a controlled environment, making it ideal for debugging. It provides consistent conditions for testing, which can help identify and fix performance issues. However, it may not always represent real-world user experiences due to its controlled nature.

Advantages:

• Ideal for debugging issues.
• Consistent testing conditions allow for targeted problem-solving.

Drawbacks:

• May not reflect real-world bottlenecks.
• Limited in capturing the full range of user experiences.
• Tools like Lighthouse and WebPageTest are commonly used for gathering lab data.

Field Data

Field data is collected from real users in their natural environments, offering insights into actual user experiences under diverse conditions. It helps understand how your website performs in the real world, but it may offer limited metrics compared to lab data.

Advantages:

• Provides a true reflection of user experiences.
• Useful for understanding performance across different devices and network conditions.

Drawbacks:

• Limited set of metrics.
• Less detailed for specific debugging purposes.

For effective website optimization, it’s crucial to balance lab and field data. Lab data aids in identifying and resolving specific issues in a controlled setting. Field data, on the other hand, offers insights into how real users interact with your website under varying conditions. Developers should use field data to guide their test parameters, such as device type and network connections, to ensure testing is reflective of actual user experiences. This approach helps in creating a website that performs well for the majority of your users in real-world scenarios.

Going through each of the key metrics

Web performance metrics are crucial tools used to evaluate the effectiveness and user experience of a website. These metrics are broadly categorized into three types: stable, pending, and experimental. Each category plays a vital role in offering a comprehensive understanding of a website's performance from different perspectives.

Stable metrics

Largest Contentful Paint (LCP)

LCP is a vital performance metric that focuses on the loading speed of a webpage from a user's perspective. It measures the time it takes for the largest content element on a page, like an image or text block, to fully load and become visible after a user navigates to the page.

The significance of a good LCP score lies in its direct impact on user experience. Users generally expect webpages to load quickly, and a slow LCP can lead to frustration, resulting in users leaving the page.

For marketers and business owners, optimizing for an effective LCP (targeting 2.5 seconds or faster) is crucial. A faster LCP helps retain visitors, reduce bounce rates, and enhance the overall performance of the website in achieving its business goals, be it sales, lead generation, or information sharing.

First Input Delay (FID)

FID is a metric used to measure the time from a user's first interaction with a website—like clicking a link or tapping a button—to the moment the site responds to that interaction. This metric is essential for evaluating the responsiveness of a website. A lower FID means the site is quick to react, providing a better user experience. Sites should aim for an FID of 100 milliseconds or less to ensure responsiveness.

As a stable Core Web Vital, FID quantifies the experience users have with unresponsive pages. It is crucial to ensure that the page is usable. Notably, FID will be replaced by Interaction to Next Paint (INP) as a Core Web Vital in March 2024.

Cumulative Layout Shift (CLS)

CLS is a stable Core Web Vitals metric that measures the visual stability of a website. It calculates the extent of unexpected layout shifts during and after a page's loading process. For optimal user experience, the goal is to keep CLS as low as possible, ideally at 0.1 or less.

Shifts in a web page's layout often occur due to the asynchronous loading of elements or dynamic additions to the page. These shifts can disrupt the user experience, potentially leading to accidental clicks and difficulty in interacting with the site. A stable layout is particularly crucial for maintaining a seamless user experience and encouraging user interaction.

The importance of CLS extends beyond user experience. It directly impacts conversion rates, as users are less likely to engage with or make purchases on unstable websites. Additionally, since Google factors CLS into its Core Web Vitals for SEO, a poor CLS score can negatively affect a website's search engine visibility.

First Contentful Paint (FCP)

FCP is a key web performance metric that times how long it takes from when a user navigates to your page until the first piece of content is visible on the screen, be it text, an image, or another element. It serves as an early indicator of the page's loading speed, providing the first signal to users that the page is loading.

A quick FCP reassures visitors that the page is responding, which can reduce bounce rates and enhance user satisfaction. From an SEO perspective, Google includes FCP among its user experience metrics for search rankings. Better FCP scores can lead to higher search engine rankings, bringing more organic traffic to your site. A website that loads content swiftly is more likely to succeed in retaining visitors and achieving its online business objectives.

Total Blocking Time (TBT)

TBT is a lab metric for measuring a website's load responsiveness, specifically quantifying the time when the page is non-interactive before it becomes fully interactive. A low TBT is crucial for usability, as it enhances the user experience on the website.

The metric measures the total time from First Contentful Paint (FCP) to Time to Interactive (TTI) where the main thread is blocked, preventing timely input response. This is similar to experiencing delays in a physical store, reflecting the frustration users might feel online when a website is slow to respond to interactions like clicks or scrolling.

Pending metrics

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is set to replace First Input Delay (FID) as a Core Web Vital in March 2024. INP measures the time from a user's interaction with a webpage to when the browser visibly responds, focusing on the responsiveness and interactivity of the page.

INP's significance lies in its impact on user experience. A lower INP score means a more responsive site, enhancing user engagement. This is particularly important for dynamic and complex web pages. Improved responsiveness, indicated by a good INP score, can lead to better conversion rates and customer satisfaction, crucial for business growth.

Optimizing for INP is key in making a website more user-friendly, ensuring smoother and quicker responses to user interactions, and contributing to the success of an online business.

Experimental metrics

Time to First Byte (TTFB)

TTFB is a web performance metric that measures how quickly a user's browser receives the first byte of data from your server after they request a page. This timing starts when a user clicks a link or types a URL and ends when data begins to arrive.

TTFB is essential for both the initial perception of your site's speed and overall user experience. A lower TTFB helps create a sense of a quick-loading site, enhancing user satisfaction. This quick response is less likely to result in users leaving the site prematurely and more likely to keep them engaged for longer sessions. While not a direct factor in Google's ranking algorithm, TTFB contributes to the overall site speed, which is important for SEO.

Improving TTFB requires focusing on server response times and network efficiency. Optimizing these aspects ensures faster data delivery to the user, crucial for a positive experience and maintaining engagement on your site. For most websites, aiming for a TTFB of 0.8 seconds or less is ideal for ensuring a responsive and efficient user interaction.

Outdated Metrics

Time to Interactive (TTI)

Time to Interactive (TTI) was removed from Lighthouse 10 due to its variability caused by outlier network requests and long tasks. This change reflects the continuous evolution of web performance metrics, as the focus shifts to more reliable and consistent measures of user experience.

The transition to metrics like Largest Contentful Paint (LCP), Total Blocking Time (TBT), and Interaction to Next Paint (INP) marks a trend toward metrics that more accurately represent user experience on web pages. These newer metrics are favored for their ability to provide a more stable and precise assessment of how users interact with and experience a website.

With the removal of TTI from key performance tools like Lighthouse 10, there's a clear indication that the web performance community values metrics that offer a better balance of accuracy and consistency. As of 2024 and beyond, TTI is considered less relevant compared to these newer, more representative metrics.

Tools for measuring website performance

Let me share top tools we use at Anadea when working on clients’ websites.

Web Vitals Chrome extension

The Web Vitals Chrome extension offers a straightforward way to measure CWV key metrics with one click. It provides instant feedback on loading, interactivity, and layout shift metrics, aligning with Chrome's measurement methods and those used in other Google tools like the Chrome User Experience Report, Page Speed Insights, and Search Console.

Once installed, the extension displays an ambient badge in your browser. This badge has three visual states to indicate the performance status:

• Disabled (gray)
• Passing (green)
• One or more metrics failing (red)

Simply navigate to the website you wish to evaluate, and the badge will display the current Core Web Vitals status.

By clicking on the badge, you can access a detailed report.

This report combines your local Core Web Vitals data with real-user data from the field through the Chrome UX Report (CrUX) API. This feature provides contextual insights, helping you compare your individual experiences with those of other desktop users on the same page, offering a comprehensive view of the website's performance.

Page Speed Insights (PSI)

PageSpeed Insights (PSI) is a by Google for analyzing the user experience of a web page on both mobile and desktop devices. It offers recommendations for improvements and provides both lab and field data about a page.

PSI simulates page load conditions for performance measurement. For mobile, it uses a mid-tier device (Moto G4) on a mobile network, and for desktop, it emulates a desktop with a wired connection. The testing environment, including network conditions, is based in a Google data center, and you can view details like location in the Lighthouse Report's environment block.

Using PSI is straightforward: visit the PSI website, paste the URL of the page you want to test into the input field and click ‘Analyse’. PSI then provides Core Web Vitals stats for mobile and desktop, categorizing the user experience quality as Good, Needs Improvement, or Poor. Scores of 90 or above are considered good, 50 to 89 need improvement, and below 50 are poor.

An example of using PSI with a web page shows distinct results for desktop and mobile. Desktop performance might be good, but mobile performance can vary due to factors like device capabilities and network conditions. For instance, high-resolution images that load well on a desktop might cause a poor Largest Contentful Paint (LCP) score on mobile due to their size. Optimizing the first image for mobile screens can improve LCP and First Contentful Paint (FCP) scores.

For example, enter a page of anadea.info, desktop:

The analysis shows that the page performance is quite good for desktop users. However, PSI also highlights some areas for improvement:

Bear in mind that mobile checks can reveal results different from those for desktop. It’s crucial to consider mobile optimization as seriously since many users access the internet on their mobile devices rather than on PCs.

‘Performance’ score on mobile is often not as good as on desktop due to different internet speeds (wired internet vs. mobile internet). To improve this, we need to look at what's causing poor performance.

Two important metrics are Total Blocking Time (TBT) and Largest Contentful Paint (LCP). Those two metrics alone compose 55% of the performance score.

How to fix this? As we already know about LCP, it quantifies how long it takes for the largest content element (such as an image or text block) on a page to become fully visible once a user opens the page. On this page LCP is an image, it probably has a high resolution (for PCs), which is redundant for small mobile screens. The solution would be to add a smaller and better optimized first image for the mobile screens: it will improve the LCP and probably also increase the FCP score.

Then, Total Blocking Time (TBT) can be affected by heavy or unnecessary scripts. PSI diagnostics can help identify issues like unused scripts and third-party script interference. Addressing these can improve TBT scores.

If you are interested in how Google calculates the ‘Performance’ score, see the image below.

The calculation places significant weight on metrics like TBT, LCP, and Cumulative Layout Shift (CLS), which collectively can impact up to 80% of the score. From this, we can conclude that monitoring and optimizing these metrics is crucial for maintaining good performance on both mobile and desktop versions of a site.

Bottom line

In conclusion, Core Web Vitals are crucial for your business's online success. They ensure your website is fast, responsive, and enjoyable for users. This not only improves user experience but also helps in achieving better search rankings and higher conversions.