Whether your ecommerce business is 100% online or you supplement with bricks and mortar, your website is a critical revenue driver. When your website isn’t performing optimally, you risk not only your revenue but also your reputation as a trusted resource.
It’s a given that you’re monitoring your site so it’s up and running and that you’re swiftly addressing issues when they arise. Additionally, teams are measuring and tracking key business metrics – conversion rates, cart abandonment rates, customer lifetime value, revenue by traffic source, and so on.
But if you’re a performance expert working in ecommerce, you’re looking at the performance of your site. You’re working to ensure that content loads quickly, from the moment someone lands on your website, because that increases the odds that they will finalize their purchase or take another relevant action.
Why Are User-centric Metrics Essential for Ecommerce?
What we don’t always keep top of mind is that many performance metrics, at their core, are user-centric metrics that are critical for all businesses – and ecommerce businesses in particular – to track.
The fact is that even if someone can buy a new white shirt in just a few clicks, they need to be able to do so without delay – or they’ll leave your site and possibly give their money to one of your competitors. If your website doesn’t load on a mobile device within 2-3 seconds, you could lose your business’s reputation and revenue—but, most importantly, it could affect your customers’ trust.If your website doesn't load on a mobile device within 2-3 sec, you could lose not only your business's reputation & revenue but also your customers' trust. - #webperf #perfmatters Click To Tweet
Which Metrics Matter for Ecommerce?
At this point, you’re probably saying, “Great. So, what are the top five performance metrics my ecommerce business should track?”
The short answer is, “It depends.”
The longer answer is that it depends on factors like your site’s design (because not all designs are created equal), your business goals, and the placement of your calls to action (CTA). But there is one nearly universal truth for ecommerce: the visitors who come to your site are there because they want something. And your site should make it as easy as possible for those visitors to take action.
And while websites may have different layouts, style guides, color schema, and business KPIs, they also have one thing in common – visitors expect the pages to be clear and simple and to load instantly.
We recommend the following five metrics as a good starting point for performance monitoring and optimization for ecommerce applications. This is not a complete list by any means. As noted above, their order of importance will still depend on your unique situation, and you will likely need to track other metrics as well:
- Time to First Byte (TTFB): Is It Responding?
- First Contentful Paint (FCP): Is It Happening?
- First Meaningful Paint (FMP): Is It Useful?
- Time to Interactive (TTI): Is It Usable?
- Visually Complete (VC): Is It Rendered In The Current Viewport?
Time to First Byte: Is It Responding?
The Time to First Byte (TTFB) metric (also known as First Byte) measures the speed with which your server delivers content to the user. No matter which CDN serves your website, this metric can help you measure multiple locations simultaneously, assist you in detecting which locations might be delivering slow performance, and let you know if you need to have a chat with your CDN provider about any issues.
Basically, TTFB is a measure of back-end and network performance.
Track Time To First Byte metric to gain insight into the back-end processes of your app so you can ensure that users can access your content from anywhere and that it loads in a timely manner.
Note: According to Sr. Web Developer Programs Engineer at Google Rick Viscomi, the thresholds for fast/average/slow TTFB are 200 ms at the upper limit and 1000 ms at the lower limit.
- <200 ms “fast” TTFB is based on the server responsiveness best practice recommendation.
- >1000 ms “slow” TTFB is due to the requirement for the fast FCP threshold of <1s. A server response that exceeds 1000ms cannot, by definition, meet the fast FCP goal and is thus considered slow.
First Contentful Paint: Is It Happening?
According to the Chromium blog, First Contentful Paint (FCP) “is the point when the browser renders the first bit of content from the DOM, which may be text, an image, SVG, or even a <canvas> element.”
Whether your page is content heavy or has fewer elements, FCP is still a critical metric that developers should care about when it comes to page load. Unlike First Paint, which reports about the moment when the browser has started to render the page while preparing uninformative elements, such as non-default background paint or iframe box, FCP measures the time between First Paint and when the text with pending web fonts starts rendering. This is the first moment at which users can see and consume the first informative content on the page.
In a nutshell, FCP answers the user question, “Is it happening?”
Waiting for an image or a block of text to snap into place all at once is a poor user experience, and if you make users stare at a blank page for even a “short” length of time – rather than indicating that something is loading during that time – they’re likely to start to get impatient.
Track First Contentful Paint to ensure that your customers see that something is coming up. Once they see that it “is happening,” their tolerance for waiting a little bit longer will increase.
First Meaningful Paint: Is It Useful?
First Meaningful Paint (FMP) is defined by Google developers as the metric that answers the question, “Is it useful?” This metric measures the point at which the biggest change to the content above the fold occurs, and it’s critical to a user’s perception of a site’s speed. Improving FMP directly improves a customer’s experience on your site because they’re being served up something they consider “useful” along their journey.
Track First Meaningful Paint to ensure that your customers are quickly seeing a large amount of content that matters to them.
Time to Interactive: Is It Usable?
Time to Interactive (TTI) measures the time until a page is first expected to be usable and to respond to user input. If you make your users wait too long to be able to take action, they’re likely to get frustrated and leave.
TTI relates to conversion rates (and “rage click” rates as well). Essentially, the sooner your page is available for user interaction, the more likely a user will complete an action.
Let’s dive a little deeper into this metric:
What Can Impact Time to Interactive?
It depends on script execution length (prior to execution, your browser has to download, parse, compile, and only then execute the JS). If each script executes for more than 50ms, any DOM or UI created in JS is not going to be available for use until the script completely runs.
Does the Placement of a CTA Matter to TTI?
Check out the following image:
- On the left-hand side, you can see that the CTA is placed lower on the page, and TTI is 5 seconds.
- On the right-hand side, the user can only start interacting with the page in 11 seconds even though the CTA is much closer to the top of the page.
Time to Interactive is impacted by critical resources that may block the initial rendering of a page. This metric can be improved by shortening the critical path length and the number of round trips. The blocking scripts can be deferred, loaded asynchronously, or simply eliminated. Optimizing the critical rendering path is especially important for mobile devices, which have a CPU that is much more limited than that of a desktop.
Note: We recommend that your goal for TTI should have a budget of <= 5 seconds on the first load and <= 2s for subsequent loads, which can only be achieved by optimizing your critical rendering path.
Track Time to Interactive to ensure that your customers can take action sooner rather than later when they access your site. You can find a more detailed explanation of Time to Interactive here.
Visually Complete: Is It Rendered In The Current Viewport?
Visually Complete measures when everything “above the fold” – not just images but also fonts and text – has finished loading. If your ecommerce site is designed so that critical information lives above the fold, VC becomes an essential metric to track. If VC is slow, you may need to take a step back and look carefully at your site design and user experience overall in order to improve it.
Track Visually Complete to ensure that your site is built to let customers see and interact with all “above the fold” information as soon as possible (even if the content outside of the current viewport is still loading).
If you skipped straight to the end of this article to ask, “Which five metrics are most important to ecommerce businesses?” here’s the answer: “It depends.” (But we have some suggestions that can get you started.)
To gain a true understanding of which metrics your organization should track, you need to look closely at your site’s design, your business metrics, and your baseline (among other things). However, many ecommerce sites will benefit from tracking five metrics—Time to First Byte (TTFB), First Contentful Paint (FCP), First Meaningful Paint (FMP), Time to Interactive (TTI), and Visually Complete (VC)—and then taking action to improve those metrics to, in turn, improve the user experience.
The Rigor platform delivers an all-in-one monitoring and optimization solution that provides actionable insights about over 40 performance metrics. Our team of experts will help your ecommerce organization determine which metrics to track and how to use that data to make improvements. For more information and to set up a free trial, reach out now.
Which performance metrics are being tracked by your ecommerce business – and how?
Special thanks to contributing author Alla Gringaus.