Home -> Wagento Way -> How to Optimize Core Web Vitals for eCommerce Websites 2021

How to Optimize Core Web Vitals for eCommerce Websites 2021

Arthur Comeaux October 29, 2021

core web vitals

Google algorithms have always prioritized the user-centric approach of websites. And the recent implementation of Core Web Vitals (CWV) metrics, is just a step forward in improving the user experience. 

Where it might seem more challenging to rank your eCommerce site now. It’s a great opportunity for you to turn your site visitors into paying customers. You can increase the page experience and optimize core web vitals for eCommerce websites by simply ensuring the content loading rate, visual stability, and interactivity.

Let’s find out what exactly these metrics are and how to optimize core web vitals for eCommerce websites!  

Understanding Google’s Core Web Vitals

There are three major metrics that Google introduced to improve the user experience (UX) which are known as Core Web Vitals (CWV). These factors ensure that the customers have a smooth and trouble-free experience in your eCommerce store.

For eCommerce sites, it is absolutely necessary to control the LCP, FID, and CLS. It will not only help you in minimizing the bounce-out rate but will be a contributing factor in ranking the site. 


Content Loading – Largest Contentful Paint (LCP)

As a user, we think that the page isn’t entirely functional until the main content is completely loaded. If it takes too much time, we might just close the site. The Google Webmaster measures this phenomenon too, through the largest contentful paint (LCP). This LCP metric defines the loading time of the largest element on the page.

On eCommerce websites, the hero or carousel images are likely to be the largest items. For Google, the ideal LCP is less than 2.5 seconds which it evaluates to be good. If it’s between 2.5 and 4 seconds, it will tell you that LCP needs improvement. Whereas, Google considers over 4 seconds of LCP to be poor. 

Interactivity – First Input Delay (FID)

Secondly, the users also tend to get annoyed if the site takes too long to respond to a click or any action. This UX is measured through the first input delay (FID). It measures the time a site takes to respond to the first input from the user. If there is a delay, it affects the interactivity between the user and the website.

According to Google, ideally, a site should respond within 100 ms. However, it is also acceptable if the site takes 100-300 ms, but it should not exceed 300 ms as that will be considered poor FID. The reasons behind poor FID are usually the additional tasks performed by integrated software and heavy JavaScript.

Visual Stability – Cumulative Layout Shift (CLS)

Your customers will also find it agitating if there are too many abrupt shifts in the layout of your website. Because of this, they might end up clicking a product or page they did not intend to click. Google uses CLS to assess this kind of UX, which measures the rate at which abrupt layout shifts occur. 

Unlike LCP or FID, CLS is defined through a value that indicates the total number of frames and the distance an item has moved in pixels. Preferably, CLS should be less or 0.1 and it must not be over 0.25.

How to Optimize Core Web Vitals for eCommerce Websites?

There can be a number of factors due to which your core web vitals are performing poorly. These may include heavy JavaScript, large-size media, execution of additional tasks through integrated software, unnecessary pop-ups, CSS files, web pages not being mobile-friendly, etc. 

Here are a few tips that will help you troubleshoot the issues related to page experience and core website vitals for eCommerce websites!

Boost the interactivity and responsiveness of your site

There are several reasons behind slow loading and processing on your website. Firstly, the larger code blocks take more time to process. Therefore you can employ code-splitting for that to break the long codes into smaller parts. Secondly, for heavy JavaScript make sure to remove the unnecessary ones and reduce the data that requires to be fetched and processed at the client’s end.

Compress all images

Another factor for slow processing on your website might be the large media. Usually, eCommerce sites have more images as compared to other types of sites, because you have to show the product to your customers. Other than the product images, there are banner, hero, and carousel images too. These if not compressed slow down the speed of your web page. Also, you should remove the images, if they are not essential for the web page.  

Assess your third-party software

eCommerce businesses mostly rely on integrated third-party tools for various tasks like payment security, shipment, data analytics, inventory management, invoices, chatbots, and others. Where third-party software increases interactivity and UX, it severely affects the page loading speed because of additional tasks.

Hence you must assess these tools to measure their impact on the page loading speed. For this purpose, you can utilize an automated system where the integrated tools are audited for how much they affect the CWVs and overall web page performance.

CWVs along with other site performance factors

Core web vitals are not the only factors you should be concerned about, especially when it comes to Search Engine Optimization (SEO) of your eCommerce website. Four other factors that enhance your site performance, are:

1- Make your website mobile-friendly

Since customers usually access your eCommerce store through mobiles, it is absolutely essential that you make your site mobile-friendly. Your site must have a fast loading speed on phones, it should be instinctive to use, and it should be quick to respond to the user input. 

You can easily test the mobile-friendliness of your site simply through the mobile-friendly test.   

2- Ensure your website is safe for browsing

Google Webmaster evaluates the sites to check the security issues. There can be numerous security issues on a site related to hosting, phishing links, deceptive or engineered content, malware, or other kinds of elements that can be harmful to your customers.

Google provides comprehensive guidelines to make sure that your website is safe for your customers. 

3- Shift from HTTP to HTTPS

Another way of providing secure browsing to your customers is to shift from HTTP to HTTPS. Google always supports HTTPS because it adds data integrity, authentication, and encryption to your website. This will also help in protecting the customer details, payment information, and your overall business data.

For checking whether your URLs are indexed by Google or not, you can use the URL Inspection Tool.

4- Remove intrusive interstitials

The intrusive interstitials can affect both the visual stability as well as the page loading speed. These are pop-ups on your site that overshadow the main content of the page, which can be frustrating for the users. 

Therefore, any and all of unnecessary intrusive interstitials should be removed from the site. This will help you in improving all the core web vitals, especially CLS.

Visually stabilize your web page layout

Sometimes because of the website design, the web page layout is not too stable. Due to that, the elements on the page change positions abruptly, which does not create a good impression on the customer. 

To improve visual stability, prioritize the loading of the content that is required first by the customers. For instance, the elements at the bottom of the web page should not be loaded first, as the user will see the banner and other content before that. 

Consistently audit your site performance

Sometimes the status for core web vitals changes on its own because of some changes that occurred on the website. This usually happens when the status is marginally ‘good’ or ‘needs improvement. Therefore, to make sure that your eCommerce site is completely optimized all the time, audit it consistently.

For evaluating your eCommerce website for core web vitals you can use these tools that Chrome Developers supports. 


Final Thoughts

We would like to acknowledge Howard Steele from SuperbWebsiteBuilders.com for sharing his insights on eCommerce website optimization. With the addition of core web vitals for site performance, optimizing your eCommerce website has become quite arduous. However, if you know the rules introduced by Google and follow the customer-centric approach, you can easily optimize and rank your website.

The core web vitals focus on improving the user experience by providing more content loading speed, interactivity, and visual stabilization on the website. Precisely, the three CWVs are the largest contentful paint (LCP), first input delay (FID), and cumulative layout shift (CLS).

For optimizing these you have to split large code blocks, remove heavy JavaScript, and compress all the images on the web page. Moreover, evaluate how third-party tools affect web page loading speed and make the web page visually stabilized. In addition to that make sure to consistently audit your website and consider other site performance factors too. This includes checking mobile friendliness, ensuring security, and minimizing the intrusive pop-ups on your website.

Let's build something together!

Contact us today to get your project started and hear more about all the awesome things we can do for you!

Become the Next Success Story