Core Web Vitals for eCommerce

Core Web Vitals, Google’s ranking factor for SEO, for websites, was released in 2020 and has become a very important metric for eCommerce businesses with the rollout being completed in March 2022. They focus on select page elements and take into account page speed and stability with each vital representing a core facet of the user experience as Google attempts to improve the UX of the sites it ranks. With your website being key to your eCommerce success, ensuring your users have a fast and good user experience will help increase revenue and accelerate your site’s growth.

The key reasons to improve your Core Web Vitals for your eCommerce site:

User Experience – Professionalism and dependability are linked to efficiency and quickness. According to a Google survey, 61% of users will try a different site if they can’t find what they’re looking for quickly.

Google Rankings – Core Web Vitals are one of the many ranking factors for Google. While this does not imply sacrificing quality, it does mean that the material on your site should be worthwhile.

Lowers Bounce Rates – Poor user experience increases the likelihood of users abandoning your site especially due to slow content rendering. According to SOASTA, for every one-second delay in mobile page load, conversions can fall by up to 20%. When calculated annually, that is a significant amount of revenue lost.

The three most important Core Web Vitals

Core Web Vital LCP Core Web Vital FID

The percentage of sites that pass Core Web Vitals is around 32% for mobile and 41.1% for desktop with there being three vitals that are tested, LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift). The hardest vital to pass? Largest Contentful Paint, which measures your page’s perceived load speed. Under 2.5 seconds is the optimum speed and over 4 seconds can be detrimental.

In the world of eCommerce, speed and efficiency can be the difference between a purchase and a lost sale or abandoned basket. So focusing on improving these main vitals is an efficient way to generate more sales:

LCP or loading performance.
CLS or simply put, visual stability. Ensure your cumulative layout shift (CLS) is maintained at 0.1 or less.
FID or first impression is optimising the quality of interaction the user experiences on your site. Make sure your pages have an FID of 100 milliseconds or less.

And for a bonus vital:

FCP or First Contentful Paint measures the time from the beginning of the page load to the point when any part of the page’s content is rendered on the screen

How to test your Core Web Vitals

The performance of your website can vary drastically depending on a user’s circumstances, affecting your Core Web Vital ratings. The easiest way to get a quick snapshot of your website’s current performance is by using the Page Speed Insights tool. You simply enter your website URL and it will display a real-time view of your website’s performance as opposed to Lighthouse which is a Chrome development tool that uses field data. The traffic light-style system with green, yellow, and red ratings, raises issues and recommends ways to improve your eCommerce Core Web Vitals.

You can also use a more comprehensive tool in the form of GTmetrix which offers performance results and analysis for your site in different countries which is ideal if you are a global eCommerce company.

Does Core Web Vitals use lab data or field data?

Different tools will use different data to analyse your Core Web Vitals, they’ll either use field data or lab data which can display varying results.

Lab data

Lab data is taken from simulated tests in a controlled environment where the conditions are predefined. This can mean the results are more consistent, making them more reproducible. Most Google products rely on synthetic tests that take place in simulated environments (known as lab data). Tools such as GTmetrix also rely more on lab data in controlled environments.

Field data

Field data captures the dramatic effects of real-world variables including device, network, and/or setting changes which is why the data can differ from one tool to another. Page Speed Insights use a combination of field and lab data, mainly using lab data for debugging.

Core Web Vitals as a metric is measured using field data collected from Google Chrome User Experience (CrUX), a library of real-world Chrome user data.

Common issues on eCommerce sites

There are numerous issues that eCommerce websites can encounter when it comes to Core Web Vitals. Some have easy fixes and others that require more work depending on the vital. Here are just a few of the issues that you can come across with each vital.

Large Contentful Paint

With LCP, there is no single modification that will make a significant effect; instead, little actions will affect the total rating. Some of the main factors are:

Time To the First Byte the time it takes for a user’s browser to get the first “byte” of data from your website’s server is measured in milliseconds which is optimally 100ms. The response time of your server to a visitor’s browser request is measured using TTFB. In other words, the time it takes a user to arrive at a web page and the server to acknowledge it.
Resource Load Delay and Resource Load Time is the time it takes for any resource of your site to load from imagery to any other form of media.
Element Render Delay is the last step of the process and loads up the final parts of any function on your site.
Resource Load Time is the time it takes for any resource of your site to load from imagery to any other form of media.

First Input Delay

FID is the only metric that is only measured by field data with Google directly tracking user interactions and ideally needs to be 100 milliseconds or less. Common factors affecting FID are:

Total Blocking Time is the total time between FCP (first contentful paint) and time to interact, measuring all tasks that are longer than 50 milliseconds.
Third-party Code sources such as Analytics, and social media widgets can seriously impact on optimising the JavaScript on your site.
Code Bottlenecks resources that require a lot of space but aren’t necessary can have a big impact on eCommerce websites.

Cumulative Layout Shift

CLS is measured through the lifetime of the page and optimally needs to be under 0.1. Images, advertisements, or other elements can all cause shifts in content layout.

Responsive Imagery is media that is incorrectly sized so jumps about when clicked.
Web Fonts any fonts that are put in that that can cause flash or FOIT (Flash of invisible text)
Dynamically Injected Content is any content that is put in such as a youtube video link or an embedded tweet

Core Web Vitals Fixes for eCommerce sites

There’s no standard checklist of fixes as every eCommerce website is different, but there are some common issues that you can focus on that will help improve your Core Web Vitals performance and overall SEO:

Eliminate render-blocking resources
Remove unused CSS
Remove unused JavaScript
Implement Lazy Loading
Optimise and compress images

Summary

Core Web Vitals are key to eCommerce websites. Focusing on improving the three main vitals in LCP, CLS and FID will prove integral for enhancing the user experience on your site and ultimately increasing revenue. We can provide a full audit of your website, a historical report, and a page-by-page performance report via Data Studio to enhance your UX design and experience.

Data Studio Report Vitals Data Studio Report Issues