For every extra second it takes for your eCommerce site to load on mobile, the more potential customers will abandon it.
But how can we ensure our site's mobile-friendliness?
It's important to do so quantitatively, by measuring its performance against a set of standards.
Thus, an additional set of metrics for measuring the performance of eCommerce sites has been developed. These metrics specifically assess the performance of your eCommerce site when accessed from a wide variety of mobile devices.
Learning more about them will help you further understand how to make your eCommerce site more mobile-friendly. Are you ready?
Google’s Web Vitals
One initiative to create a small set of metrics is Google’s Web Vitals. The Web Vitals aim to simplify the list of metrics most relevant to web developers targeting mobile users.
Today, the three most important metrics selected by Google are the largest contentful paint (LCP), first input delay (FID), and cumulative layout shift (CLS).
These three metrics measure loading, interactivity, and visual stability, respectively.
Additional metrics are also used to measure the site performance in mobile devices, such as first contentful paint (FCP), speed index, time to interactive (TTI), and total blocking time (TBT).
For this article, we will mostly adopt web.dev’s definitions, methodology, and standards, as they reflect how the performance of your website was assessed by both web.dev Measure and Google PageSpeed Insights.
Loading: Largest contentful paint (LCP)
What is the largest contentful paint (LCP)? The largest contentful paint measures how fast the largest content visible on the screen, without scrolling, is loaded, rendered, and displayed.
For example, if you access the home page of a website and the homepage contains a large banner image on its front, then the LCP measures how long it took to load that large banner image.
Why is LCP important? It’s because the largest content visible on the screen upon loading the page signals the content of the page and, therefore, how useful the page is to the user.
What are the types of content considered for LCP? They are the following:
Background images with CSS;
Text elements, such as paragraphs, headings, and lists.
Since LCP refers to the largest content visible on the screen upon loading, it is important to identify the largest content that will be measured. Depending on how the page is designed and coded, the LCP calculated by the tools may change until a final value is given.
How can we improve LCP? Since images are usually measured for LCP, here are some tips by RockContent to improve loading times, and therefore, LCP:
Manually optimize image quality for mobile browsing
Use a content delivery network (CDN) to automatically handle image optimization and delivery
Interactivity: First input delay (FID)
What is the first input delay (FID)? First input delay, or FIP, measures the time it takes for the webpage to respond to the first interaction by the user, during loading. The interaction can be a click on a link or on a button. Scrolling and zooming are not considered.
Why is FID important? First impressions last. The first user experience of interacting with your website shapes their impression of how light and portable the website is, therefore reflecting on its usefulness.
What are the actions considered for FID? The interaction can be a click on a link or on a button during loading. Scrolling and zooming are not considered.
Break up long tasks (tasks that block the main thread for more than 50 milliseconds)
Optimize your page for interaction readiness
Use a web worker to run tasks on the background instead of the main thread
Visual stability: Cumulative layout shift (CLS)
What is cumulative layout shift (CLS)? The cumulative layout shift or CLS quantifies the amount of unexpected layout shifts in the webpage. CLS, therefore, is a measure of layout stability.
Why is CLS important? Unexpected layout shifts ruin user experience. For example, imagine clicking on the “cancel order” button when the layout suddenly shifts the buttons and you accidentally press “confirm order.” This will cause a headache as you try to reverse the payment sent. This also ruins the user experience and will negatively impact your eCommerce business.
Serve static assets with an efficient cache policy
Avoid an excessive DOM size
Minimize critical request depth
Ensure text remains visible during webfont load
Keep request counts low and transfer sizes small
Everyone quickly loses interest in waiting for a page to load that doesn’t seem to do anything. Therefore, what webpage designers implement is the so-called progressive rendering, where objects in the page are rendered as they are loaded so as to give an impression of progress in loading the page.
The metric to describe such is the speed index. The speed index measures how fast the objects are displayed in the visible part of the webpage. Not only that, but it also captures how they are progressively loaded and rendered, and is a good metric of progressive rendering.
A good speed index reduces the bounce rate, or the rate the user abandons your website.
To increase the speed index of your webpage, you can complete the following recommendations:
Use lazy loading images
Embrace progressive images
Eliminate unnecessary downloads
Compress your data
Create a caching hierarchy
Optimize your images
Optimize your fonts
Time to interactive (TTI)
Another measure of loading speed is the time to interactive, or TTI. the time to interactive, or TTI, is measured as the time it takes from when the page starts loading to the time that it can respond to user input quickly.
An ideal TTI is less than 5 seconds on average mobile hardware.
A small TTI signals that the page is easily usable.
The total blocking time (TBT) measures how long your page is unresponsive to user input. Whenever a task is running on the main thread, it prevents user interaction with the webpage. When that task exceeds 50 milliseconds, it becomes noticeable to the user. The total blocking time is the sum of all the exceeded time by a task in the main thread.
An ideal TBT is less than 300 milliseconds on average hardware.
A low TBT also signals to the user that the page is usable.