E-Commerce Guides
Site Speed Matters But You’re Tracking It Wrong
Site Speed Matters But You’re Tracking It Wrong
By
James Koshigoe
By
Alex Kiziah
February 21, 2023

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:

The right speed metric: Largest Contentful Paint (LCP)

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.

Largest contentful paint visual illustration
Hero Image as LCP example (credit)

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.

Largest contentful paint timing thresholds
LCP ranges (credit)

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).

How to test the right way: Simulated vs Real Users

Simulated User Monitoring

You may have heard of PageSpeed Insights, Lighthouse, GTMetrix, or WebPageTest before, and you're probably familiar with Shopify's own Speed Report.

Shopify speed score based on simulated data
Shopify's Speed Report, filling the minds of merchants with dread and anxiety

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:

  • They only test a single page
  • They only test the content at the top of the page (above-the-fold)
  • They usually only test from the perspective of a new visitor (i.e. without the browser's cache)
  • They don't test interaction with the page itself (e.g. adding things cart)
  • They often report inconsistent measured results
  • For mobile tests, they don't test with real hardware on real mobile networks

The following is an example of results from a report inside PageSpeed Insights for an eBike product page…

PageSpeed Insights metrics based on simulated data
Simulated Largest Contentful Paint from PageSpeed Insights

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.

Real User Monitoring (RUM)

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:

PagesSpeed Insights metrics based on real user data
Real User Largest Contentful Paint for the same eBike Product Page

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?

  • It can tell you which of your pages perform the worst, so you can prioritize the most impacted pages first.
  • It can tell you what exactly is loading slow for real users so you can fix the right things (this is also often incorrectly reported in simulated tests).
  • It can tell you which geographic regions are hit the worst by slow loading times, so you can get to the bottom of why you might not be making as much revenue from certain markets.

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.

Google Search Console Core Web Vitals
The Core Web Vitals report in Search Console provides a basic real user monitoring report

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.

Let’s look at what a real user sees

Continuing with our eBike product page example…

Example visitor journey from Facebook ad to LCP
eBike real user journey from Facebook Ad to LCP

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! 💰

Better LCP correlates with better user experience and better business outcomes

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.

Google Study: 1 second faster = 13% conversion rate increase

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).

Renault data showing correlation between LCP conversions and bounce
10 million visits showing correlation between LCP, Bounce Rate, and Conversion Rate

Two things are very clear:

  1. Lower LCP results (left side of x-axis) in a higher conversion rate (height of dotted blue line.
  2. Lower LCP results in a lower bounce rate (height of yellow bar)

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.

Blue Triangle Study: Conversions increase significantly as LCP decreases from 6 to 2 seconds

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.

case study showing correlation between LCP and conversions
data showing the conversion rate for real users experiencing LCP between 2 and 6 seconds

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.

case study showing correlation between LCP and bounce
same real user data, but now showing the correlation with bounce rate

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!

Render Better Study: Faster LCP increases average order value 41%

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.

Google Analytics screenshot showing LCP drop from 2.59 seconds to 1.81
Google Analytics measured LCP drop from 2.59s to 1.81s

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!

Google Optimize demonstrates revenue per session increases 28% with Render Better’s LCP optimizations
Revenue per session increases 28% with Render Better’s LCP optimizations.

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!

Google Analytics demonstrates Render Better increased average order value by 41%
Revenue increased due to a 41% increase to average order value

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.

How to easily measure and optimize your own web performance

“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!

Optimized Performance =
Happier Customers
A site that isn't slow means happier customers, more revenue, and better search rankings.
Get in touch to learn how Render Better automatically cranks up site speed and fixes Core Web Vital errors. No developer required.
Get in Touch
© 2024 Render Better. All right reserved
Privacy PolicyTerms of Service
×
Get in Touch
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.