The Role of Core Web Vitals In Improving Conversion Rates

Imagine this:

You spent the last month preparing a landing page for your latest product. You invested countless hours tweaking every little detail to give the visitor the most seamless experience. You hit publish, and a week later, you see this:

It feels like a punch in the gut.

Should you rewrite the headlines to be more compelling? Add a microcopy under the CTA? Redesign the whole page?

Correct. These are all part of the so-called “best practices” of conversion rate optimization (CRO).

However, one aspect that site owners often put in the “deferred tasks” category is optimizing page speed and Core Web Vitals. 

In this article, we’ll go over the fundamentals of CRO, and you will learn why prioritizing your site’s performance can be the biggest game changer in 2024. 

Let’s get down to it.
 

What is Conversion Rate Optimization (CRO)?

Conversion Rate Optimization (CRO) is the process of increasing a website’s conversions. It involves understanding how users navigate your site or app, identifying obstacles that prevent conversions, and implementing strategies to improve the user experience. 

This process includes identifying web elements that can be enhanced and then validating those hypotheses through A/B testing and multivariate testing. You can significantly boost your conversion rates by: 

• analyzing user behavior with tools like heatmaps and session recordings
• improving page load speeds
• creating compelling calls to action

 

Why is conversion rate optimization important?

Let’s say your landing page attracts 2000 visitors a month. A 10% conversion rate means that the page generates 200 conversions. By implementing CRO strategies, you can improve the conversion rate to 15%, increasing the number of conversions to 300. A 5% increase will immediately lead to 50% more sales, sign-ups, filled forms, etc. 

Put simply, you can multiply the results of your efforts. But also:

Maximize ROI
CRO maximizes your return on investment by extracting more value from your existing traffic. Instead of spending additional funds on attracting new visitors, CRO allows you to convert a higher percentage of your current visitors, thereby reducing overall marketing expenses. This means you can achieve greater results with the same amount of traffic, leading to more efficient use of your budget and resources.

Enhance User Experience
CRO focuses on understanding and improving the user experience, which leads to increased satisfaction and loyalty. By making your site or app more intuitive, responsive, and enjoyable to use, you can create a more positive impression on your visitors. Satisfied users are more likely to return, recommend your services to others, and become long-term customers, fostering a loyal customer base.

 

Reduce Customer Acquisition Costs
Effective CRO enables you to achieve more conversions without the need to attract more visitors. By optimizing the conversion process, you can reduce the cost associated with acquiring each new customer. This means you can grow your customer base more efficiently, lowering the average cost per acquisition and making your marketing efforts more cost-effective.
 

Establishing Conversion Metrics

Before changing a single word, image, or whatever, it’s essential to identify the conversions for the specific page or app screen. And while the term “conversion” is used widely, the success metrics of your website or mobile app will depend on the type of business you’re in. 

These are some common conversions in the most popular industries:

• Media: Pageviews, ad views, newsletter subscriptions, recommended content engagement
• Ecommerce: Sales, add-to-carts, shopping cart completion rate, e-mail newsletter sign-ups
• B2B: Leads generated, deals closed
• SaaS (Software as a Service): Free trial sign-ups, subscription renewals, demo requests
• Healthcare: Appointment bookings, contact form submissions, patient registrations, newsletter sign-ups
• Real Estate: Property inquiries, virtual tour completions, contact form submissions, newsletter sign-ups

Other notable CRO metrics that you need to keep an eye on include:

• Bounce Rate — The percentage of visitors who leave the site after viewing only one page.
• Average Time on Page — The average time visitors spend on a specific page.
• Pages per Session — The average number of pages a visitor views during a single session.
• Exit Rate — The percentage of visitors who leave the site from a specific page after having visited other pages.
• Customer Acquisition Cost (CAC) — The total cost of acquiring a new customer, including all marketing and sales expenses.
• Funnel Conversion Rate — The percentage of visitors who move through each stage of the sales funnel, from awareness to conversion.
• Average Order Value (AOV) — The average amount spent each time a customer places an order.
• Cart Abandonment Rate — The percentage of shopping carts created that are abandoned before the purchase is completed.
• Click-Through Rate (CTR) — The percentage of people who click on a link, ad, or call-to-action compared to the number who view it.
• Page Load Time — The amount of time it takes for a webpage to fully load, which can impact user engagement and conversions.

And speaking of page load time…
 

What Are Core Web Vitals Exactly?

Google’s Core Web Vitals are a set of three user-centric performance metrics that measure key aspects of your website’s user experience, focusing on loading speed, responsiveness, and visual stability:

• Largest Contentful Paint (LCP) measures loading speed
• Interaction to Next Paint (INP) measures page responsiveness
• Cumulative Layout Shift (CLS) measures visual stability

Let’s take a closer look at each of them:

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest above-the-fold element to load on a page. That could be an image, a text block, or a video thumbnail:

For your page to have a good LCP, the largest element should appear in less than 2.5 seconds. 

So, how is LCP affecting your conversion rates? 

Well, it’s a three-fold answer:

1. A good LCP ensures that the main content of your webpage is visible quickly. Users are more likely to stay on a site that loads its main content swiftly, reducing frustration and increasing the likelihood of interaction and conversions.
    
2. Websites with poor LCP scores tend to have higher bounce rates because users are impatient and often leave sites that take too long to load. Conversely, a good LCP will keep visitors on your site longer.
    
3. Fast-loading pages create a perception of quality and reliability. Users trust websites that perform well and are more likely to convert when they have a smooth browsing experience.
    

Interaction to Next Paint (INP)

INP assesses a page's overall responsiveness to user interactions by observing the latency of all qualifying interactions during a user's visit to a page.

Put simply:

INP measures the time from the interaction (for example, clicking on “Add to cart”) until the browser is able to update the screen (changing the Cart icon that the item has been added):

An INP below or at 200 milliseconds means your page has good responsiveness.

So, how is INP affecting your conversion rates? 

Firstly, passing INP ensures that user interactions are smooth and immediate, creating a seamless experience. When users experience quick responses to their actions, they are more likely to stay engaged and continue exploring your site.

Secondly, delayed responses to user inputs can cause frustration and dissatisfaction, leading to higher bounce rates and more rage clicks. If users feel that the site is sluggish or unresponsive, they are more likely to abandon it and look for alternatives.

 

Last but not least, a website that responds promptly to user interactions conveys a sense of professionalism and reliability.

Cumulative Layout Shift (CLS)

CLS calculates the visual stability of a webpage during the loading process. It quantifies the amount of unexpected layout shifts that occur as the page loads and is crucial for assessing the user experience.

Unexpected layout shifts represent involuntary movement, unconsented actions, and surprise alterations that catch users off guard and disrupt the browsing experience:

Unlike the previous two metrics, CLS isn’t measured in seconds or milliseconds. A good CLS is considered anything below 0.1.

So, how is CLS affecting your conversion rates? 

It’s simple:

Unexpected layout shifts disrupt the user experience— from causing the user to lose their place while reading to making them click the wrong link or button. 

In both cases, the layout changes cause frustration, leading to users immediately leaving your web page. 

Let’s not forget that:

 

But if you’re still not convinced of the impact Core Web Vitals have on conversions, let’s look at the real-world results some of the biggest companies achieved after improving the three metrics.

Boost your conversions with a faster website. Get started with NitroPack →

The Real-World Impact of Core Web Vitals on Conversions

You know how the famous proverb goes: “Seeing is believing.”

Or, in your case—reading is believing. 

There isn’t a better proof of concept than learning about someone or some company that did it, and the results were wow. 

When it comes to Core Web Vitals and their direct impact on conversions, numerous case studies prove that there’s an actual correlation between both. 

Here are some of them:
 

1. Rakuten 24 increased conversion rate by 33.13%

Goal:
Rakuten 24 invested in optimizing their Core Web Vitals, focusing on metrics such as LCP, FID*, and CLS to improve overall web performance and user experience. They also want to prove the correlation between Core Web Vitals and conversions.

*Note: First Input Delay is no longer a Core Web Vitals metric, being replaced by Interaction to Next Paint (INP) as of March 12, 2024. 

Action plan:
They eliminated render-blocking resources, optimized JavaScript and images, and implemented performance monitoring. They also run A/B tests, picking a landing page with significant traffic and conversion so that the test can achieve meaningful results. During the test duration, 50% of the traffic was sent to the optimized landing page (version A) and 50% to the original page (version B). The only difference between versions A and B was that version A was optimized for Core Web Vitals.

Final results:
Rakuten 24 saw that the optimized version A brings: 

• 53.37% increase in revenue per visitor
• 33.13% increase in conversion rate
• 15.20% increase in average order value
• 9.99% increase in average time spent
• 35.12% reduction in exit rate

2. redBus increased sales by 7%

Goal:
redBus focused on optimizing their website's INP to improve user experience and performance.

Action plan:
They categorized interaction latency, reduced JavaScript blocking, optimized API calls, debounced scroll event handlers, used requestAnimationFrame for rendering, and minimized unnecessary re-renders.

Final results:
redBus saw a 7% increase in sales, illustrating the positive impact of smoother web interactions on business outcomes.

3. Carpe increased revenue by 15%

Goal:
After noticing a decline in online store speed over several months, Carpe decided it was time to improve its performance, particularly its Largest Contentful Paint and Cumulative Layout Shift.

Action plan:
They addressed render-blocking resources, corrected lazy loading issues, optimized server response times, and improved their theme to enhance loading speeds and visual stability.

Final results:
Carpe achieved a 52% faster LCP and a 41% improvement in CLS, which led to: 

• A 5% increase in conversion rate
• A 10% increase in traffic
• A 15% increase in revenue
   

4. Sunday Citizen decreased bounce rate by 4% and increased conversion rate by 6%

Goal:
Sunday Citizen’s customer focus led them to look into and improve their online store performance for a better user experience. They focused on improving key performance metrics, including LCP and CLS.

Action plan:
They optimized rendering performance, moved render-blocking resources to a CDN, updated third-party apps, converted CSS background images to standard images, and stabilized layout elements.

Final results:
Sunday Citizen saw a 25% improvement in LCP and a 61% improvement in CLS, leading to: 

• A 4% decrease in bounce rate
• Over a 6% increase in conversion rate
   

CRO and Core Web Vitals Strategies to Implement in 2024

Conversion Rate Optimization Best Practices

You may expect to see a long list of optimizations like:

• Use a stronger color for all call-to-action buttons
• Add testimonials and case studies to build trust
• Make your page content easily scannable

Unfortunately, there isn’t a “one size fits all” strategy in CRO. 

That’s why, instead of checking optimization off a list, a better approach is to play the long game and invest heavily in understanding your visitors and customers. 

The best way to do it is by constantly running high-quality experiments. 

How to do that?

You can follow Optimizely’s 6-step experimentation blueprint:

1. Set the Right Metrics

Prioritize metrics that drive significant business impact rather than superficial measures like clicks or minor interactions. Focus on decision points that lead visitors to the buying moment and monitor metrics like revenue, customer lifetime value, and retention.
 

2. Increase Testing Velocity

The median company runs 34 experiments per year. To be in the top 10%, you need to run 200 experiments annually. If you’re close to the first number, then you should boost the number of experiments by streamlining the testing process. 

Furthermore, move beyond simple changes like button color or copy, as they do not provide long-term knowledge. Make larger code changes that have a greater effect on the user experience. 
 

3. Run More Complex Experiments

Implement multifaceted tests that include several variations. If you have enough dev power, you can optimize things like pricing, discounts, checkout flow, data collection, etc.

This approach provides deeper insights into how different elements interact and affect user behavior.
 

4. Embrace Personalization

Tailor experiences based on user segments and behaviors. Personalized content and offers can significantly improve engagement and conversion rates. In fact, their research shows that personalized experiences generate a 41% higher impact than general experiences.

Here’s a couple of examples of such experiments:

• Suggest products based on past purchases and frequently viewed items to encourage repeat purchases and cross-selling.
• Offer discounts or special deals based on the user's loyalty status or browsing history, enhancing perceived value and driving conversions.
• Display different offers or products based on the user's geographical location, tailoring the experience to local preferences and trends.

When personalizing, keep in mind: 

• WHAT: The change you want to make in the default digital experience 
• WHO: The specific user or group you want to deliver it to 
• WHY: If the change meets the original objective/goal 
• WHERE: The platform you’ll use to create a personalized experience 
   

5. Protect Developer Resources

The dev resource is never enough unless you’re working in a major corporation. You might have millions of things you want to try, but the reality is that they might not happen. That’s why you should manage developer time by prioritizing experiments that require minimal resources or have the highest potential impact. This ensures that development efforts are effectively utilized.

6. Build a Strong Culture of Experimentation

Developing a culture of experimentation is essential for maximizing the impact of your CRO program. However, several challenges can impede this process:

1. Outdated Practices: Teams may focus on minor improvements instead of larger opportunities.
2. Leadership Friction: Overestimating influence on future outcomes can create obstacles.
3. Data Quality: Insufficient quality data can prevent tests from reaching statistical significance.
4. Balancing Risks: Successful scaling requires balancing the exploitation of known strategies and the exploration of new ones.

Effective stakeholder management, cross-team collaboration, and fundamental experiment training are key to success. Utilizing advanced analytics and heat mapping can significantly enhance test outcomes and data interpretation.
 

Core Web Vitals Optimization Strategies

According to the latest Chrome User Experience (CrUX) Report, only 47.1% of all websites pass Core Web Vitals:

Put another way, passing your Core Web Vitals assessment will not only multiply your conversions but also give you a competitive edge.

Let’s see how you can get there, starting with the toughest metric to optimize for:
 

How to improve LCP

As you can see from the screenshot above, only 62.1% of origins have good LCP. The reason why it is such a challenging metric is that there are a lot of moving parts when it comes to its optimization. 

Of course, that does not mean it’s impossible to pass LCP. The first step to its optimization is identifying what causes the issue.  

Poor LCP scores are often caused by large image files, slow server response times, render-blocking resources like CSS and JavaScript, and delays in client-side rendering. 

That being said, here are 5 optimizations that will help you turn things around:

1. Optimize and Compress Images: Use next-gen formats like WebP and compress images to reduce file sizes.
2. Improve Server Response Times: Utilize a content delivery network (CDN) and enhance server performance.
3. Remove Render-Blocking Resources: Minimize and defer non-critical CSS and JavaScript.
4. Implement Lazy Loading: Load images and videos only when they are about to appear in the viewport.
5. Preload Key Resources: Preload essential resources such as fonts and critical CSS for faster loading.

 

How to improve CLS

Although its global pass rate is much better than that of LCP, CLS turns out to be a major obstacle in providing users with a seamless experience. As you know, a poor CLS score is typically caused by elements on a webpage shifting unexpectedly. 

Common culprits include images and ads without specified dimensions, dynamically injected content, and web fonts causing layout shifts. These issues can make the page appear unstable, making the content jump up and down and disrupting the user experience.

Here’s how you can prevent that from happening:

1. Set Size Attributes for Media: Define width and height for images and videos to ensure space is reserved during loading, preventing unexpected shifts.
2. Reserve Space for Ads and Embeds: Allocate fixed dimensions for ads and embedded content to maintain layout stability.
3. Use Font Display CSS: Implement font-display: swap; to ensure text remains visible during font loading, avoiding layout jumps.
4. Preload Key Fonts: Use the preload attribute to load fonts earlier and reduce layout shifts caused by late font rendering.
5. Minimize Dynamic Content Injections: Insert new content below the viewport or use animations to ensure smooth transitions and maintain layout consistency.
6. Implement Lazy Loading for Images: Use lazy loading for images to prevent sudden shifts as new elements load.
    

How to improve INP

In March 2024, INP replaced FID and became an official Core Web Vital. While it’s the metric with the highest pass rate, its release immediately impacted the global CWV pass rate. 

Issues with INP often stem from slow response times to user inputs, such as clicks, taps, or keyboard interactions. Common causes include blocking the main thread with heavy JavaScript execution, inefficient event handlers, and render-blocking resources, which delay the browser's ability to respond promptly to user actions.

Here’s what you can do about it:

1. Optimize JavaScript Execution: Minimize and defer non-critical JavaScript to reduce execution time.
2. Efficient Event Handling: Optimize event listeners, avoid long tasks on the main thread, and use tools like Lighthouse to identify delays.
3. Leverage Web Workers: Offload intensive tasks to web workers to keep the main thread responsive.
4. Reduce Render-Blocking Resources: Minimize the impact of CSS and JavaScript that block rendering.
5. Preload Critical Resources: Ensure essential resources are loaded early to improve response times, prioritizing scripts and styles necessary for initial interactions.

Pass your Core Web Vitals on autopilot. Get started with NitroPack today →

FAQs

What is A/B testing in CRO?

A/B testing involves creating two versions of a webpage (Version A and Version B) and testing them with your audience to see which one performs better in terms of conversions. This helps identify which elements of a webpage are most effective.
 

How long should I run an A/B test?

An A/B test should be run long enough to collect a statistically significant amount of data. This can vary depending on the traffic volume, but typically, tests should run for at least 2-4 weeks to gather reliable results.
 

Can CRO be applied to mobile websites?

Yes, CRO can and should be applied to mobile websites. With an increasing number of users accessing websites via mobile devices, optimizing the mobile experience is crucial for maximizing conversions.
 

What is multivariate testing?

Multivariate testing is a method of testing multiple variables simultaneously to determine which combination of changes produces the best outcome. Unlike A/B testing, which compares two versions of a single element, multivariate testing evaluates multiple elements (such as headlines, images, buttons, etc.) at the same time to see how they interact with each other. This helps identify the most effective combination of elements for improving the conversion rate.
 

How do I measure Core Web Vitals on my website?

You can measure Core Web Vitals using tools such as Google PageSpeed Insights, Google Search Console (Core Web Vitals report), Lighthouse, Chrome User Experience Report, and Web Vitals Chrome extension.
 

How often should I monitor Core Web Vitals?

Core Web Vitals should be monitored regularly. Continuous monitoring helps ensure your website maintains good performance and user experience, which can positively impact conversion rates.