Does the speed of an eCommerce site really make a difference in sales?
Yes, but you may be looking at the wrong metrics in the wrong tools!
In this post, we'll make an argument for why LCP, or Largest Contentful Paint, has the strongest correlation with sales based on real world case studies and how to track it properly.
Here's what we'll be covering:
What does "site speed" actually mean? 🤔
There are many metrics to measure how fast your site is, such as: LCP, FCP, TTFB, DCL, onload, etc. All these metrics, in addition to vanity performance scores, have been conflated to mean “site speed” and make web performance confusing for the average layperson.
For the sake of simplicity, we believe Largest Contentful Paint (LCP) is the most important metric to optimize for ecommerce.
Why?
LCP measures how long visitors wait to see the largest content on your site, such as images and text blocks (hence “Largest Contentful Paint”). For many ecommerce sites, this is often product images, the most important content considered during a buying decisions.
LCP is also the only load time metric of the three metrics included in Google's Core Web Vitals initiative, so Google is clearly indicating this metric should be a priority for measuring speed.
Don't just take our word for it though. There are a ton of studies on the business impact of LCP specifically, which we'll get to later.
Note: Each performance metric tells a different story, so once you master LCP, we recommend optimizing other performance metrics too.
What’s an optimal LCP?
Based on Google's studies around web performance, they consider an LCP under 2.5 seconds good and over 4 seconds poor. That means, for example, if your product images are the largest content loading on pages and they take over 4 seconds to load, your visitors are getting a poor experience.
CAUTION: A lot of scammers have begun to sell fake optimization solutions that fool LCP into being lower. This is akin to Volkswagon's emission cheating scandal. We were the first to break the news on this way of cheating years ago. One of the most foolproof ways to tell if you're getting scammed is if you have a very low Largest Contentful Paint (LCP) metric and it's exactly the same value as your First Contentful Paint (FCP) metric. This would be very rare in the real world. You can easily check these metrics with PageSpeed Insights.
There’s one more important consideration often overlooked when measuring speed: you should aim to measure from real users (aka Real User Monitoring or RUM, aka field data), which is a lot more accurate than what most tools give you through simulation of your users (synthetic data, aka lab data).
You may have heard of PageSpeed Insights, Lighthouse, GTMetrix, or WebPageTest before, and you're probably familiar with Shopify's own Speed Report.
These tools are often used to evaluate site speed and give very misleading results, because they simulate how visitors load a page on your site. But that's not the only problem:
The following is an example of results from a report inside PageSpeed Insights for an eBike product page…
At the top is an overall performance score of 15 with an LCP of 19.4s. The score is calculated based on web performance measurements from a fake simulated visitor sent to this page.
Google simulates this by opening a browser on their servers and loading the page. But those measurements don’t reflect what real users are seeing, and from our tests of thousands of sites with these tools, they are often far off the mark.
That doesn’t mean these tools aren’t helpful. These tools are useful for digging deeper into specific issues and immediately measuring the difference before you publish changes to your site, to determine if you’re making progress.
But to understand what your users are really experiencing, you need to measure performance from real users. That's what Real User Monitoring is for.
In the screenshot above, you’ll notice LCP was measured at 19.4 seconds. However, if we look at the same eBike product from PageSpeed Insights for real user data (this is found under the Core Web Vitals Assessment), the measurement is quite different:
LCP fore real users is 6.6 seconds (based on the 75th percentile measured visits). A whopping 12.8 seconds of difference in loading time! That means this page is definitely not loading as slow as Google’s simulated test claims.
This makes it hard to optimize your site when the tools are completely wrong about their measurements compared to what your actual users are experiencing 🤦
Why else should you be looking at monitoring real user performance besides it giving you more correct results?
In short, with Real User Monitoring (RUM), you'll be able to measure the true performance of your website from your visitors' perspective, which makes optimizing your site much more effective.
Optimizing based on Real User Monitoring is critical for improving your business KPIs, such as conversion rate, bounce rate, average order value and more.
So which tools provide real user monitoring?
The free one you may already be familiar with is Google's Core Web Vitals report in Search Console. It's not perfect (it's not very specific and its results don't reflect immediate changes), but it's a good place to start and an overwhelming improvement over simulated testing.
Other tools include: Speed Curve, Datadog, and Blue Triangle. In our next article in this series, we'll show you how to set up real user monitoring in Google Analytics for free with a single line of code! Stay tuned.
Now that you understand the key differences in how LCP can be measured, we’ll dive into why we’re so focused on optimizing LCP.
Continuing with our eBike product page example…
For the above real user journey, you see an ad for an eBike that catches your interest on Facebook. You tap the image and at first you see nothing, then the logo and navigation, and finally, after 6.5 seconds, an image of the eBike you saw while scrolling Facebook.
Now imagine instead you see the eBike product image in 2.5 seconds after tapping the ad (right at Google’s “good” threshold). While it may not seem like a big difference, in those 4 extra seconds you're more likely to hit the back button or get distracted.
With an LCP of 2.5 seconds, you’re more likely to stick, have a better experience, and make a purchase. How much more likely varies a lot, but it's significant enough that all online stores should pay attention.
It seems intuitive that the faster we see what we want to see on the site, the greater chance we will browse and purchase...
But has this actually been correlated with other business KPIs?
Yes! 💰
There are countless case studies that demonstrate the impact of optimizing LCP and seeing a real positive impact on business outcomes. The following 3 case studies provide proof of this. Your results will vary of course, so don’t assume the exact same results.
Based on this case study from Google, Renault, a French multinational automobile manufacturer, monitored real user web performance in their Google Analytics, and found a strong correlation between LCP and conversion rate, as well as bounce rate.
The following data from Renault consists of 10 million visits, captured between December 2020 and March 2021, and shows conversion rate (blue dotted line), bounce rate (yellow bars), and LCP (x-axis).
Two things are very clear:
According to the study, they found a 1 second improvement to LCP could be worth an approximate lift of 13% in conversions! This gave their team a clear incentive to focus on web performance, and they managed to shift the percentage of their visitors experiencing a 2.5s LCP or less from 51% to 73%, by optimizing above-the-fold content such as text and images to load faster (many of the optimizations Render Better does automatically).
Imagine a site doing 100,000 sessions per month, with an existing conversion rate of 1.5% and an average order value of $60. A 13% increase would mean an additional $93,600 in additional annual revenue! Just from making LCP 1s faster.
This is hypothetical, but these numbers are very similar to what we see at Render Better for medium-sized Shopify sites.
In this case study from Blue Triangle, a company that offers real user monitoring for web performance, they also found a strong correlation between LCP, conversion rate, and bounce rate.
The following histogram from the study depicts product page data for one of their clients, where the blue shaded area shows traffic volume at each LCP interval (from just under 2s on the left to just under 6s on the right) and the orange line shows the corresponding conversion rate.
From this data, we can see a visitor to this site is 25.93% likely to convert if they see the Largest Contentful Paint in 2.1 seconds. As you look to the right of the chart (LCP increasing - slower user experience), it's clear visitors to this site are far less likely to convert.
If we swap the conversion rate line with bounce rate, we see a beneficial correlation there as well.
At 2 seconds, the bounce rate is 10.8%, and as you move to the right, the bounce rate increases. So, the slower your site, the more likely you're wasting marketing dollars on bounced traffic.
Blue Triangle also claims a lower LCP correlates with higher average order value for this particular client, though screenshots weren't available, but this is something we're testing as well!
At Render Better, we’re interested in conducting similar studies, because Render Better automatically optimizes web performance and provides real user performance monitoring.
For the following study, we split traffic 50/50 in an A/B test to measure the difference in web performance metrics, as well as business KPIs for an outdoor retailer. We labeled the traffic RB Unoptimized (automatic optimizations from our platform disabled) and RB Optimized (all our current optimizations enabled).
With real user monitoring in place, we were able to demonstrate an improvement to LCP with Render Better going from 2.59 seconds to 1.81. In other words, Render Better was automatically making sitewide LCP speed 30% faster.
What impact did that make to the business? Running our A/B test through Google Optimize, we verified the Treatment group with Render Better saw a whopping 28% lift to revenue per session!
Why did so much additional revenue come from site speed improvements? In this particular instance, the metric that moved most was average order value, increasing from $159 to $224. That’s a 41% increase to the amount customers were spending!
This customer has nearly 37,000 different pages since they have thousands of SKUs. With a lot of products to search, filter, and shop through, the faster a visitor can browse, the more pages they'll visit and more products they’re likely to add to their cart before running out of time or getting distracted. ⏱️
Speed doesn’t just matter for the first page a visitor lands on, it matters for subsequent pages as well.
“All of these results sound great” you might be thinking, "but how can I do this for my site?"
Check out part 2 of this series, Track Core Web Vitals in Google Analytics, where we make tracking your own real user web performance data in Google Analytics as simple as adding a single line of code to your Shopify store.
Shopify sites using Render Better receive best-in-class web performance optimizations automatically, and will soon be able to monitor their performance far easier than before with our coming Real User Monitoring dashboard.
If you’re interested in learning about how Render Better can make your site faster automatically in minutes, hit the big blue button below to get in touch with us!