There is a new addition to the group of UX-related ranking factors on Google and they are called Core Web Vitals.

They take into account metrics regarding page stability and the load speed of key elements.

Announced by Google in 2020, these new metrics came into effect in 2021. In this guide, we’ll look at what core web vitals are and how they affect eCommerce sites and their performance. 

What Are Core Web Vitals?

Core Web Vitals are a set of metrics that Google marks as key to user experience.  

This is an effort by Google to improve the UX of the sites it ranks on its search engine and makes for a better user experience. Most of the UX measurement is drawn from user testing to see and understand how people will use a site and to measure its performance. However, Google decided to select a few elements that can measure these factors more precisely. 

These metrics are added to already existing UX-related metrics which will check the loading, interactivity, and visual stability.

Image Source

How the Core Web Vitals are measured

Your site can be measured against the performance criteria set by Google, using a plethora of Google tools are your disposal. 

However, the preferred ones are Google Search Console and Page Speed Insights tool. 

The former is recommended to identify pages that fail to meet the standards and thus require attention. The latter provides more insights into these pages. 

Image Source

There are three core web vitals that Google uses to measure the elements of your site and its performance: 

Content Loading – Largest Contentful Paint (LCP)

• This is the measure of time it takes for the largest piece of content on your web page to be visible. It could be an article or a product image. 

For a ‘good’ score, this content should load within 2.5 seconds. 

Interactivity – First Input Delay (FID)

• This measures the time before visitors can interact with a page. Often, on some sites, you may notice that you cannot add information to a form or click on a link until other elements of the page have loaded. 

For a ‘good’ score from Google, the delay before interaction should be less than 100ms.

Visual Stability – Cumulative Layout Shift (CLS)

• This metric looks at the visual stability of a page. It means that the moving or unstable elements, used during page loads, can lead the users to click incorrect links which can create an irritating experience. 

For a ‘good’ score, you will need a CLS of less than 0.1.

Image Source

Are Core Web Vitals Important?

Although relatively new in the ranking algorithm, core web vitals have been given enough weight (in comparison to other metrics) and it can affect your search ranking depending on your site’s performance.

And in this study, Reddico used core web vitals and quantified the speed performance of 500 top retail brands. 

It resulted in just 35% of the brands achieving a good score of Largest Contentful Paint and just 32% for Cumulative Layout Shift. 

And in First Input Delay, most of the brands passed the test by receiving 83% i.e. a ‘good’ score. 

A bad score can hinder your SEO efforts and you may not be able to rank high on search engines. 

How to Optimize Core Web Vitals for eCommerce Websites?

There can be various factors that could affect your core web vitals. These include heavy JavaScript, unnecessary pop-ups, CSS files, large-size media, web pages not being mobile-friendly, execution of additional tasks from integrated software, etc. 

Here are some tips that will help you troubleshoot these issues and boost the performance of elements for core web vitals.

Boost the interactivity and responsiveness of your site

Slow loading and processing can be the reasons why the responsiveness of your site is hindered. 

Large code blocks take more time to process. To rectify this, you can employ code-splitting to break them down into smaller parts. 

And for heavy JavaScript, ensure to remove the unnecessary ones and reduce the data that requires to be fetched and processed. 

Compress all images

eCommerce sites have more images compared to other sites because you’ll need to show the products to your customers. 

In addition to that, there are banners and carousel images too. 

If these are not compressed, they can slow down the speed of your webpage. 

Moreover, remove those images that are not essential for the page.   

Assess your third-party software

eCommerce businesses and sites rely on integrated third-party tools for processes like payment security, shipment, inventory management, data analytics, chatbox, etc.

Third-party software can increase interactivity and UX but can affect the page loading speed because of additional tasks. 

Therefore, you must access these tools to measure their impact on the page loading speed. 

CWVs along with other site performance factors

Core web vitals are not the only factors that are concerning. When it comes to Search Engine Optimization (SEO), there are other affecting factors, including:

Make your website mobile-friendly

Most of the customers are likely to access your eCommerce store from their mobile devices. Thus, it is essential to make your site mobile-friendly. 

The site must have a fast loading speed, it should be easy to navigate through, and should be quick to respond to the user input. 

You can test how mobile-friendly your site is using a simple mobile-friendly site test.    

Ensure your website is safe for browsing

Google Webmaster analyzes the sites to check for any security issues. And there can be various security issues on a site like phishing links, hosting, malware, deceptive content, etc. 

Therefore, Google provides a comprehensive set of guidelines to ensure your site is safe for your visitors. 

Shift from HTTP to HTTPS

Shifting from HTPP to HTTPS can provide your visitors with an experience of secure browsing. 

Google supports HTTPS because it adds data authentication, integrity, and encryption to your site. This will help in protecting the details and information the customer input on your sites like personal information or payment information. 

To check if your URLs are indexed by Google, you can use an URL Inspection Tool. 

Remove intrusive interstitials

The intrusive interstitials can affect both your visual stability and your page loading speed. 

These pop-ups will overshadow the main content of your page and this can frustrate the users. 

Therefore, remove any and all unnecessary intrusive interstitials, improving your core web vitals. 

Use Simpler Templates

Choosing a simple template over a complicated one can impact your site’s performance in a positive way. 

This is because these simple templates require less code in comparison to the complicated ones which means the pages will load faster.

Limit the Number of Apps You Use

Apps can weigh on your website causing slower loading speeds. Therefore, limit how many apps you want on your site. 

Do not install every app you come across, download and integrate the truly necessary ones. This is an area where website builders have an advantage over Content Management Systems because features will be built into the platform instead of relying on a plugin or apps.

Check Your Website Builder Plan

For those who are using CMS like WordPress, we’d recommend changing your hosting plan or provider. 

Hosting plays a vital role in the site’s performance. 

Look at the resources included in your plan- like the more storage and bandwidth you have, the less likely your site is to load slowly. 

If you are on a basic website builder plan, you may have very limited resources. For instance, Wix’s cheapest plan comes with 3GB storage and 2GB bandwidth. 

Be Careful With Code

As we mentioned, the lesser the code on a site, the quicker it loads. 

The issue various websites run into is creating code-heavy sites because they load all the possible scripts and code blocks. This creates code bloat, which can affect your site speed. 

So, if you want to add a new code, be mindful of how it might impact your site. Don’t make them too heavy either. 

The only way you can change your CSS code is by updating the content in the editor. For instance, if you are changing the color of your font, you are editing the CSS code of your site. 

You can reduce the page’s code by choosing a light font color in the visual editors, without interfering with your CSS. 

Optimize Images

Optimizing your images is important as it can reduce the file size without affecting their quality. This will help your pages to load faster. 

A study shows that websites could save 96 milliseconds on average just by optimizing their images. 

And it is easy to optimize your images using free online tools like TinyPNG or Kraken.io. Using these, you can compress your files before uploading them to your site. 

To boost your page speed, you can try using colors instead of images. And the images you do add, ensure they add value to your content- simply adding pointless stock images can increase the loading speed and ruin the user experience. 

Identify Your Largest On-Page Element

You think you know which elements on your site are the LCP (Largest Contentful Paint). However, Google may think differently and it will be the one that is right. 

Just run your site through PageSpeed Insights to find what Google sees as LCP in the diagnostics section. You’ll see what actually is the LCP. 

And once you know which element is your LCP, you can rectify it to help load it faster. For instance, if your LCP score for a page is 6.9 seconds, it is too slow. It should be 2.5 seconds or less. So once you identify the element, you can modify it to ensure a ‘good’ score. 

Test Regularly on Mobile

It is important to test the performance of your site on different devices. 

The most crucial thing to understand and look out for when testing on mobile is how quickly your site loads and also, the layout shifts while loading (CLS). 

By conducting regular checks and tests on your site, you can easily identify and fix the problems to improve the overall performance of your site. 

Ensure to look at desktop and mobile analysis on PageSpeed Insights. It is important to explore both parameters as they will be different. 

And it is a good idea to do so because Google usually crawls on the mobile version of our site instead of your desktop version. Therefore, your mobile version of the site will be responsible for how your eCommerce business site ranks on the Google search engine. 

Use a CDN

A CDN on the content delivery network is a group of data centers that are located in different places. This help users connect to the server closest to them geographically. 

And this will, in turn, help your site load faster in their browser. 

The most popular CDN providers are Cloudflare and Fastly, and you will need to purchase a plan to get the best results. 

Some website builders have inbuilt CDN like Wix that automatically connects a CDN serve, meaning you can not integrate a third-party CDN with this one. 

And other builders that may allow you to use your own CDN but can impose specific requirements. Like Squarespace allows you to connect Cloudflare but you’ll need to change your domain nameservers. 

Therefore, ensure to check with your website builder before purchasing a CDN plan. 

Be Mindful of Your Layout

If you have a variety of dynamic content like pop-ups or ads, you may not get a good CLS score. And this is because your content will jump around as your page loads which will make it difficult for the user to navigate through. 

Therefore, in order to combat this, you should try minimizing the amount of dynamic content on your page and choose a fixed layout. 

Plan ahead to leave enough space for the content, which will shift around when loading. 

Furthermore, include size attributes for images and videos. It will help preserve the space they’ll require in the page’s code and will guide other elements to load around them. 

(There are various platforms that don’t support this function, so check what your platform allows and do the needful accordingly.)

Don’t Neglect Your SEO

It is easy to forget about simple SEO purposes and tactics when you are optimizing your site to get a good score on Core Web Vitals. Do not forget the SEO practices while learning LCP and FID; stay on top of them. Ensure:

• To write proper meta titles and descriptions
• To use HTTPS by installing an SSL certificate
• To add alt text for your images
• To create help, keyword-focused content
• To add high-quality internal and external links

And other best SEO practices. 

These are important to rank on Google. While Core Web Vitals are crucial, it does not mean neglecting your current SEO techniques. 

Combined CWV and SEO practices can overall improve your eCommerce site. 

How to Test Your Website Today

#1. Google Search Console: Core Web Vitals Report

Google Search Console measures the search traffic and performance of your site, including core web vitals. 

One of the most valuable features of Search Console is that it assesses groups of similar pages, like pages that use the same template. And it also includes a CWV report based on data from CrUX (Chrome User Experience Report).

Search Console is suited for both developers and non-developers to assess search and page performance. Its presentation of CrUX data and grouping of pages by similarity provide vital insights into areas of improvement to enhance performance. 

Although, Search Console may not be right for the projects that use a range of third-party tools that group pages by similarity. Or if a website isn’t represented in the CrUX dataset. 

Search Console may not fit for projects that use different third-party tools that group pages by similarity, or if a website isn’t represented in the CrUX dataset.

#2. PageSpeed Insights

PageSpeed Insights (PSI) measures and reports on the performance of a page on both mobile and desktop devices, providing suggestions to improve the page’s performance. 

It provides both lab and field data about a page. 

Lab data is of great help when it comes to debugging performance issues since it is collected from a controlled environment. But it may not be able to capture real-world issues. 

Field data, on the other hand, can capture a real-world user issue but has a limited set of metrics for tracking.

PSI may not be for websites that aren’t represented in the CrUX dataset, from a field data perspective. 

Ways to improve your page speed and core web vitals

Understanding your page speed report

There are 6 core areas that Google will use to measure and analyze your site:

• First ContentFul Paint (FCP)

It is the time taken in which DOM (Document Object Model) content is first rendered on your website. Loading in 2 seconds or less is a ‘good’ score. 

• Speed Index
  
  It gives a rating based on how long it takes for your content to be populated. A video is captured to understand how your site appears as it loads and the progression of your site in between the video keyframes dictates your results.
  Ideally, it should be under 4 seconds which should net a 75-100 speed index.
  
• Largest Contentful Paint (LCP)
  
  This measures the time that it takes to render a raw and uncompressed blog image. If it times over 4 seconds, it will receive a bad score.
  
• Time to Interactive (TTI)
  
  This measures the time it takes your website to understand the code of your website so that all functions are fully accessible to the user.
  You must be under 3.8 seconds for a ‘good’ score.
  
• Total Blocking Time (TBT)
  
  It indicates how long a user a blocked from the site when accepting their inputs.
  It could be mouse clicks, screen taps, or keyboard clicks.
  
  This can dictate your bounce rate as well because users will get frustrated if something doesn’t work right away.
  
• Cumulative Layout Shift (CLS)
  
  It measures the web vitals of your site. This influences Google’s search algorithm and page ranking. Use the aforementioned tactics to optimize your site for green scores on CLS. 

1. Core Web Vitals

Identifying what your LCP, FCP, etc. scores are can be done within chrome. 

All you need to do is open your dev tools on chrome and select the performance tab. Hit refresh or the record button which will initiate a diagnostics run. 

Now scroll down on the right side and look for the timing sections. Here, you will see multiple tags for the areas you need to address and improve. 

By highlighting them, you will what Google sees when considering the LCP. It could be a headline, a video, or a long paragraph. 

Based on what it highlights, you need to make changes. Image? Use TinyPNG to optimize it. Text issues? Consider changing the font. 

Check this out thoroughly and make the changes accordingly to have a good LCP score. 

2. Defer your Scripts

Determining which scripts don’t need to load the right way and deferring them can be of great help. 

These can be third-party trackers or libraries. Just ensure that they are not connected to any functions that can give you runtime errors. 

For example, 

<script src=”somelibrary.js” defer></script>

You can also use ‘async’ as a command to run libraries asynchronous which will execute after downloading. 

This is different from deferring since it does not wait for fo rht page to fully parse before running. 

3. Use Lazy Loading

Lazy loading will help reduce your initial image loading by initialization until necessary. This converses the bandwidth of the user, allowing for a faster page load. 

Many modern browsers support lazy loading natively. You can simply append a loading=“lazy” with your <img> tags.

For example, 

<img src=“your-image.jpg” alt=“your image” loading=“lazy”>

Do keep in mind that not all browsers will support this feature, therefore consider a library like LazyLoad that works across all browsers. 

4. Compress your images

Again, it is easy to forget about compressing your image when you are in a rush to push out your new product or a new blog post. 

Platforms like Shopify and WordPress have an inbuilt image compression feature or you can add third-party tools at a CMS level. 

Uploading a non-compressed image can hinder your page speed and tools like TinyPNG can help you mitigate that- it is a drag-and-drop tool that is easy to use and free. 

5. Minify your CSS and Javascript

Minification is a process where white space and other markups are removed in order to reduce file size. 

If your website does have an inbuilt tool to help minify your CSS and JavaScript then consider a third-party tool like a minified. We’d recommend Minify, a drag-and-drop tool that will allow you to minify your files. All you need to do is upload these files and update the source from your HTML. 

Most libraries will provide you with a minified version, so do use that instead of your uncompressed version. 

These are the 5 tips that will help you improve your page speed significantly.

Top Tools to Identify your E-commerce Store’s Core Vitals

1. Google PageSpeed Insights: This free tool analyzes e-commerce business owners’ websites’ performance and provides recommendations on how to improve it.
   
2. Pingdom: This paid tool offers a more detailed analysis of e-commerce business owners’ websites’ performance, including metrics such as load time, page size, and number of requests.
   
3. WebPageTest: This free tool offers a variety of testing options for e-commerce business owners, including mobile testing and testing from different locations around the world.
   
4. GTmetrix: This paid tool offers a detailed analysis of e-commerce business owners’ websites’ performance, including recommendations on how to improve it.
   
5. SpeedCurve: This paid tool offers continuous monitoring of e-commerce business owners’ websites’ performance, so they can track their performance over time.

Top Tools to Compress Images for You E-commerce Business

1. TinyPNG: This free online image compression tool uses lossy compression to reduce the file size of images without sacrificing too much quality. This can benefit e-commerce business owners by reducing the loading time of their product pages, which can lead to increased sales.
   
2. Kraken.io: This another free online image compression tool offers a variety of compression options, including lossy and lossless compression. This can benefit e-commerce business owners by giving them more control over the quality of their image compression.
   
3. ImageOptim: This free desktop app can be used to compress images. It also offers a variety of compression options and can be used to batch compress images. This can benefit e-commerce business owners by saving them time and effort when compressing their images.
   
4. Squoosh: This free online image compression tool offers a variety of compression options and can be used to preview the results of compression before you download the compressed image. This can benefit e-commerce business owners by giving them a visual representation of how their images will look after they are compressed.