Get NitroPack with up to 37% OFF
Once you start with NitroPack, you can freely choose your integration platform.
Everything you need to know about
NitroPack features and compatibilities.
Whether you run a blog or
an agency, we have a
partnership opportunity for you!
The place to learn how to
improve your web performance,
how to get the most out of
NitroPack, and what is coming
next to our product.
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.
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:
Let me elaborate.
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:
With the newest real-world, user-centric metrics – Core Web Vitals:
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…
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:
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.
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:
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…
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:
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:
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) 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:
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.
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…
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:
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.
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…
The main culprits affecting your LCP score are:
Use the following optimization strategies to fix possible issues and boost your LCP:
As we already mentioned, the main CLS culprits include:
Here’s how you can deal with all of them:
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:
Use the following optimizations to guarantee a good INP score and responsiveness:
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.
Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.
