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.
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:
What is a conversion?
A conversion is the successful completion of a desired action by a website or app visitor, such as making a purchase, signing up for a newsletter, filling out a form, etc.
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.
“59% of customers are willing to pay more for a great experience.”
- Deloitte, “Milliseconds make millions”
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.
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:
Other notable CRO metrics that you need to keep an eye on include:
And speaking of page load time…
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:
Let’s take a closer look at each of them:
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:
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.
Term: Rage clicks
Rage clicks occur when users repeatedly click or tap on an element in a website or app out of frustration. This behavior can result from various issues, such as confusion over whether an element is clickable, malfunctioning buttons, broken elements, misleading content, or invisible overlays.
Last but not least, a website that responds promptly to user interactions conveys a sense of professionalism and reliability.
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.
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:
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:
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.
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:
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:
You may expect to see a long list of optimizations like:
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:
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.
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.
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.
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:
When personalizing, keep in mind:
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.
Developing a culture of experimentation is essential for maximizing the impact of your CRO program. However, several challenges can impede this process:
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.
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:
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:
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:
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:
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.
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.
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.
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.
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.
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.
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.