The Most Important Core Web Vitals Metrics in 2024

Good products alone no longer guarantee consumer loyalty.

In fact…

83% of customers say the experience a company provides is as important as its products and services.

And while measuring user experience a few years ago was close to impossible, today, you can track Core Web Vitals as they quantify the experience of your site and identify opportunities to improve.

Read on to learn why you should aim at passing your Core Web Vitals and how to future-proof your website.

Why are Core Web Vitals important for your business? 

Core Web Vitals measure the real-world experience of your users by focusing on three fundamental aspects – loading, responsiveness, and visual stability. 

That said…

Passing your Core Web Vitals means you have a website that both Google and users love which inevitably leads to:

• better ranking;
• reduced bounce rates;
• increased conversions.

Let me elaborate.

 

Google prefers sites with good user experience

Back in 2020, Google announced the Page Experience algorithm update (released in June 2021), which was an initiative combining some existing Search signals for page experience:

• Mobile Friendly: The page is optimized for mobile.
• HTTPS: The page is served over HTTPS, meaning it is secure.
• No Intrusive Interstitials: The content on the page is easily accessible to the user.

With the newest real-world, user-centric metrics – Core Web Vitals:

• Largest Contetfult Paint (LCP) 
• First Input Delay (FID)
• Cumulative Layoutshift (CLS)

Now, you may be asking yourself:

There are hundreds of ranking factors. How much of an impact do the page experience signals have on my site’s ranking? 

Content relevancy is still the number one factor when Google’s building the SERP.

However, for many queries, there is lots of helpful and relevant content available. In such cases, having a good page experience could be the main differentiator leading to success in search.

And as Google says:

“Optimizing for these factors makes the web more delightful for users across all web browsers and surfaces. We believe this will contribute to business success on the web as users grow more engaged and can transact with less friction.”

In other words, the benefits of passing Core Web Vitals and providing great user experience extend beyond the SERP because…

 

Users love visiting fast-loading websites

Not only that but with the introduction of Core Web Vitals, it became crystal clear that users highly value sites with overall great user experience. This means sites that possess the following three characteristics:

1. Fast loading times
2. Seamless interactivity
3. Visual stability

And there are tons of case studies already showcasing how improving even one of these three components leads to some spectacular results:

1. The Economic Times

The Economic Times, one of the biggest news outlets with over 45 million monthly active users, optimized its Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) to provide its readers with an optimal experience. The end result was improving CLS by 250% to 0.09, LCP by 80% to 2.5 seconds, passing Core Web Vitals, and last but not least – reducing bounce rates by 43% overall.

2. Agrofy

Agrofy, an online marketplace for Latin America's agribusiness market, hypothesized that improved performance would reduce bounce rates. They focused on boosting their LCP score as one of the most important Core Web Vitals metrics. This resulted in a 70% boost in LCP, aligning with a 76% drop in load abandonment (decreasing from 3.8% to 0.9%).

3. Yahoo! JAPAN

Yahoo! JAPAN, one of the largest media companies in Japan with over 79 billion page views per month, identified a massive CLS issue. After applying several optimizations, they saw spectacular improvements - 15.1% more page views per session, 13.3% longer session duration, and a 1.72% lower bounce rate.

Improve your business metrics by passing Core Web Vitals. Install NitroPack today →

Which are currently the most important Core Web Vitals metrics?

As of 2024, the most important Core Web Vitals are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). These three metrics are highlighted explicitly by Google as most indicative of a page's overall user experience.

It's important to note that while these are the primary Core Web Vitals, other performance metrics like Time to First Byte (TTFB), Total Blocking Time (TBT), and First Contentful Paint (FCP) are still crucial for a comprehensive understanding of a website's performance:

• TTFB measures the time it takes from when a client (usually a web browser) makes an HTTP request to the server until the first byte of the response is received.
• TBT measures the time between First Contentful Paint (FCP) and Time to Interactive (TTI), during which the main thread was blocked for long enough to prevent input responsiveness.
• FCP measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. 

So the next time you run a performance audit, pay extra attention to them. 

But for now, let’s get back to the Core Web Vitals…

 

Largest Contentful Paint (LCP)

LCP measures the time it takes for the largest visible content element on a webpage to be fully displayed in the viewport. This could be an image, video, or a block of text.

Although it’s important to pass all three Core Web Vitals, LCP is considered to be the most critical one since it indicates how long users wait to see the most significant piece of content.

A good LCP score helps ensure that users perceive the page as loading quickly, as they can see the main content without undue delay. Ideally, LCP should occur within 2.5 seconds of when the page starts loading to provide a good user experience.

As it turns out, LCP is the metric websites struggle with the most. According to the CrUX report, only 57.8% of sites have good LCP.

The reason why LCP is such a challenging metric is that there are a lot of moving parts when it comes to its optimization. To reach the excellent threshold, you need to:

1. Ensure the LCP resource starts loading as early as possible.
2. Ensure the LCP element can render as soon as its resource finishes loading.
3. Reduce the load time of the LCP resource as much as you can without sacrificing quality.
4. Deliver the initial HTML document as fast as possible.

It’s a lot of work, but at the end of the article, we share some optimization techniques that will help you do it. 

Also, you can check Philip Walton’s video to gain a deeper understanding of the metric and different optimization methods:

Reach the good LCP threshold automatically. Get NitroPack now →

Interaction to Next Paint (INP)

INP measures a web page's responsiveness by quantifying the delay between a user interaction (like a click, tap, or key press) and the visual response or update to the page. Unlike FID, which measured the page's initial loading performance, INP is designed to evaluate the experience during the interactive phase of a page's lifecycle.

Here’s why it’s important to aim for a good INP score:

1. A good INP score means that the website responds quickly to user interactions, which is a critical aspect of user satisfaction. When users feel that their actions are followed by immediate responses, the experience is smoother and more enjoyable. 

2. Users are more likely to stay longer and engage more deeply with a website that responds promptly to their interactions. Quick feedback to user actions encourages exploring, clicking, and engaging with the content. This increased engagement can lead to higher conversion rates, more page views, and, ultimately, greater success in achieving the site's goals.

3. Poor INP score often results from heavy tasks or long JavaScript executions on the main thread. These tasks can block the main thread, making it unresponsive to user inputs. By monitoring INP, developers can identify and optimize these problematic tasks, improving the site's responsiveness.

To provide a good user experience, Google recommends aiming for an INP of less than 200 milliseconds. This ensures the webpage feels snappy and responsive to user interaction.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures the visual stability of a webpage. It quantifies how many unexpected layout shifts occur during the browsing experience. A layout shift happens when a visible element changes its position between rendered frames, causing content to "jump" around on the page.

A few elements often cause unexpected layout shifts and can worsen your CLS score:

• Images and videos with no dimensions (width and height attributes)
• Ads, embeds, and iFrames without reserved space
• Web fonts causing flashes of unstyled or invisible text - FOUT and FOIT
• Inserting content above existing content

A good CLS score is 0.1 or lower, indicating minimal unexpected shifts. Any score above this suggests that there might be elements on the page causing visual instability, which should be investigated and addressed.

Core Web Vitals in 2024: The Sunset of FID

If there was one thing certain about the Core Web Vitals since they were first announced in 2020, it’s that they will evolve over time:

“Web Vitals and Core Web Vitals represent the best available signals developers have today to measure quality of experience across the web, but these signals are not perfect and future improvements or additions should be expected.”

Fast forward to 2022, Google announced they were working on an experimental metric – Interaction to Next Paint (INP) – that is expected to replace FID.

After numerous tests of its efficacy, INP is now officially the new Core Web Vital and responsiveness metric.

But let’s see how we ended up here…

What is the difference between INP and FID?

The difference between Interaction to Next Paint and First Input Delay lies in their scope of measurement. While FID gauges the responsiveness of the first interaction, INP assesses all interactions throughout the user's entire session.

Put simply, a good FID score indicates a good first impression. However, INP delves deeper, capturing the user experience from when the page starts loading until the user exits the page.

In technical terms:

FID only measures the first interaction's input delay, not the time it takes to run event handlers or the delay in presenting the next frame.

INP, on the other hand, measures the entire spectrum, including:

• Input delay - the time between the user's first interaction with the page and when event handlers execute
• Processing delay - the total amount of time it takes to execute code in associated event handlers.
• Presentation delay - the time between when event handlers have finished executing and when the browser presents the next frame.

The event with the longest duration within the interaction is then chosen as the interaction's latency.

These implementation details make INP a much more comprehensive measure of user-perceived responsiveness than FID.
 

What will happen with FID?

Here's what the official Google documentation says about the future of FID:

Now, considering these changes, let’s see how you can guarantee your site’s Core Web Vitals success in the future…

 

Best Core Web Vitals Practices to Future-Proof Your Website
 

LCP optimization strategies

The main culprits affecting your LCP score are:

• Slow server response times
• Heavy and unoptimized resources (e.g., images, fonts, and other critical assets)
• Render-blocking JavaScript and CSS

Use the following optimization strategies to fix possible issues and boost your LCP:

1. Apply image compression
2. Convert your images to a next-gen format (e.g., WebP)
3. Use link rel=preload to prioritize the loading of LCP elements
4. Minify and compress your code files
5. Implement Critical CSS
6. Eliminate render-blocking resources
7. Upgrade your server infrastructure
8. Use a Content Delivery Network (CDN)
9. Take maximum advantage of caching
    

CLS optimization strategies

As we already mentioned, the main CLS culprits include:

• Images and videos with no dimensions (width and height attributes)
• Ads, embeds, and iFrames without reserved space
• Web fonts causing flashes of unstyled or invisible text - FOUT and FOIT
• Inserting content above existing content

Here’s how you can deal with all of them:

1. Avoid injecting new content at the top of a page over already existing content
2. Add width and height attributes to avoid layout shifts
3. Reserve enough space if you plan on loading ads, embeds, and iFrames
4. Use font-display: optional in your @font-face CSS to control font rendering behavior.
5. Link rel=preload key web fonts to ensure they're available as soon as possible
    

INP optimization strategies

Considering that INP builds upon FID, it’s expected that the main culprits overlap with the current responsiveness metrics. That being said, here’s what might be causing poor INP:

• Bloating the main thread with long tasks
• Having a large DOM size
• Client-side rendering HTML

Use the following optimizations to guarantee a good INP score and responsiveness:

1. Avoid recurring timers that overwork the main thread
2. Break up long tasks to free up the main thread
3. Avoid interaction overlap
4. Consider removing the unnecessary callback
5. Defer non-rendering work
6. Reduce DOM size
7. Avoid excessive or unnecessary work in requestAnimationFrame callbacks
8. Defer ResizeObserver callbacks

 

 

Wrapping up

It’s safe to say that Core Web Vitals will play an important role in the years to come.

Google’s actions since 2020 strongly suggest they will pay more and more attention to user experience, boosting websites that can provide a good one.

Nevertheless, it’s important to remember that achieving excellent Core Web Vitals at the expense of poor content quality is a strategy destined to fail. Google’s job is and will continue to be building SERPs that can answer search queries to the fullest.

So make sure to consistently publish high-quality, helpful content and level up with great user experience.

That’s the formula to having a website both Google and users love.

And while creating engaging content is your responsibility, we can easily take care of your site’s web performance and Core Web Vitals.

All you have to do is install NitroPack, and we will automatically boost your LCP, CLS, and INP score. 

Test NitroPack for free →