Join our webinar and get expert insights on how to pass LCP →
Good products alone no longer guarantee consumer loyalty.
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, interactivity, and visual stability.
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.
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 2023, the most important Core Web Vitals are Largest Contentful Paint (LCP), First Input Delay (FID), 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:
FID focuses on the responsiveness of a website during the initial phases of page load. In more technical terms, it measures the time interval between when a user first interacts with a website (like clicking a link or tapping a button) and when the browser is able to respond to that interaction.
Here’s why it’s important to aim for a good FID score:
1. When users visit a webpage, they expect it to be interactive and responsive. If there's a noticeable delay between their interaction and the website's response, it can lead to frustration and may deter them from continuing their session or returning to the site in the future.
2. While some metrics measure when content appears on the screen or when it's fully loaded, FID focuses on the initial interactivity. This makes it unique and essential, as a page might visually render quickly but still be unresponsive to user inputs if the main thread is busy.
To provide a good user experience, Google recommends aiming for an FID of less than 100 milliseconds. This ensures the webpage feels snappy and responsive to users upon their first interaction.
Fortunately, most websites find it easy to pass FID, with 95.7% having a good score.
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 was officially moved to status “pending” earlier this year, meaning it will be the new responsiveness metric from March 2024.
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.
Now, considering the upcoming 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:
Although FID is becoming obsolete in less than 12 months, and most websites find it easy to optimize for, it’s still important to know what might lead to suboptimal scores:
To optimize for FID, you need to:
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, FID, 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.