Put simply, the success of an eCommerce site depends on its mobile friendliness. Why?
Well, speed is everything, especially as we enter 2021. The trends and stats all seem to point to the same conclusion:
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?
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.
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:
What is a good LCP score?
A good LCP is clocked at 2.5 seconds or less.
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:
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.
What is a good FID score?
A good FID should be less than 100 milliseconds.
How can we improve FID? During loading, the webpage runs JavaScript to help render the content in the webpage. The browser cannot respond to most user input while running JavaScript in its main thread.
Here are some recommended ways to optimize the JavaScript code running on your webpage:
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.
What layout shifts are considered for CLS? There’s a methodology of quantifying layout shifts in terms of the percentage of the fraction of the page affected by it.
Impact fraction measures the area covered by the layout shift while distance fraction measures the distance covered by the unstable element in its layout shift.
Additionally, there is a distinction between expected and unexpected layout shifts––we want to minimize the unexpected layout shifts and their impact if they are inevitable.
What is a good CLS score?
An ideal CLS score is 0.1 or less.
How can we improve CLS? Reducing the element of surprise is the way to improving CLS and therefore user experience. Here are some ways of doing so:
There are other metrics that can be used to assess the mobile-friendliness of your eCommerce site. Some are listed in this section.
The first contentful paint (FCP) measures the time it takes from the page to start loading to the time the first element is rendered on the screen.
The ideal value of FCP is 1 second or less.
A small FCP signals to the user that there is a good, stable connection between the user and the website.
To ensure a small FCP, you can do the following:
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.
An ideal speed index score is 75 or above.
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:
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.
To ensure a small TTI, you can do complete the following recommendations:
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.
To ensure a small TBT, you can take the following actions:
These metrics are very technical! But, if you are using analysis tools such as that of web.dev Measure and Google PageSpeed Insights, they will give a better overview of your webpage’s performance.
