Simplifying web vitals for e-commerce.

Web Vitals is a service by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Google has provided several tools over the years to measure and report on performance. But only the developers who have mastered the skill can only effectively use the tools, while others have found the abundance of both tools and metrics challenging to keep up with the competition.

With Web Vitals, Google is specifying a set of 3 performance metrics to make up their “Core Web Vitals” that they use to make a judgment on whether or not your website has a good user experience.

The Core Web Vitals focuses on three UX characteristics of a page namely

• Loading time
• Page responsiveness
• Visual page stability

The three Core Web Vitals:

• Largest contentful paint (LCP)

• First Input Delay (FID) / Total Blocking Time (TBT)

• Cumulative Layout Shift (CLS)

1. Largest Contentful Paint (LCP)

The purpose of LCP is to measure how much time it takes to load the main content of the page on the user’s browser, It reports the render time of the largest content element visible within the viewport, focusing on the user’s perceived experience instead of a long list of metrics that measure various steps of the loan process.

Importance of LCP

LCP is very important for a good user experience. Users don’t generally wait around till the website loads, they usually have tons of other options where they can get a better experience.

When your LCP is bad, your overall ranking would be taking a dip, lowering the conversion rate and growth of your website.

How to analyze LCP

You can analyze LCP in two ways

• Directly on the site, by using a method known as “field”.
• Through the ‘lab mode performance’ simulations performed by algorithms

Tools

For the field method, you can use the following tools

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals report)

And for Lab mode, you can use tools like 

• Chrome DevTools.
• Lighthouse.
• WebPageTest.

How to improve LCP

1. Remove any unnecessarily third-party scripts.
2. Upgrade your web host as better hosting=faster load times overall
3. Setting up lazy loading helps only load images when someone scrolls down your page. This means that you can achieve LCP significantly faster.

2. First Input Delay (FID)

The First Input Delay (FID) measures how quickly a page responds to user input. FID is the time it takes for a user to interact with such a page for the first time, such as clicking a link or tapping a button, to the moment the browser can respond to that interaction.

FID is essential as it detects even the tiniest delays on the website, which can be annoying to users.

Importance of FID

In 2022, FID will not only improve a website’s user experience but will also be a ranking criterion for SEO. As a result, Google will begin ranking sites based on how users interact with them. Optimizing your site’s First Input Delay now will provide you an edge over the competition while also making it more fun to use.

How to analyze FID

FID is a field metric that requires a real user to interact with your page. By visiting “Page Speed Insights,” entering the page URL, and analyzing it, you may determine FID for any online page. The FID metric appears at the top of the report’s ‘Field Data’ section.

Tools for FID

Because FID is a field metric, you can use the following field tools to measure it:

• Chrome User Experience Report
• PageSpeed Insights
• A JavaScript Library called web-vitals

How to Improve FID

1. You can speed up your website by minimizing and optimizing third-party codes and scripts like analytics and social media buttons.
2. Minifying, compressing, and eliminating superfluous CSS files on your site can also benefit FID.
3. You can get rid of unwanted JavaScript in the same way that you can get rid of unused CSS. You can use Chrome DevTools to detect the JavaScript codes that aren’t required.

3. Cumulative Layout Shift (CLS)

Have you ever been reading an article on the internet and the page mysteriously changes? The content suddenly moves, and you’ve lost your spot. Even worse, you’re about to press a link or a button when your finger moves just before it rests on the link, and you unintentionally click something else.

These kinds of experiences are not only frustrating, but they also create a negative customer experience.

Importance of CLS

For your eCommerce site, a positive customer experience is essential. It will not only help to build a loyal consumer base, but will also help to improve your brand’s goodwill. CLS ensures that the UX of your website is not affected by rapid page shifts by monitoring page stability and providing us with continuous data on which we can improve. In May 2020, Google revealed that Cumulative Layout Shift (along with several other Core Web Vitals) will become a ranking indication in 2021, making it more crucial than ever to maintain a stable website that loads quickly.

How to analyze CLS

There are three major ways by which you can analyze CLS

1. Controlled Testing: Using lab tools to simulate real-world UI scenarios.
2. User Data: You will typically find out most of your CLS issues once the website goes live and users start interacting with your web pages.
3. JavaScript: You can use JavaScript’s Layout Instability API to measure CLS, which you can tweak the code to gain in-depth knowledge about the issues that your users might be facing.

Tools for analyzing CLS

CLS can be analyzed in the lab or the field, and it’s available in the following tools:

1. Field tools 

• Chrome User Experience Report
• PageSpeed Insights
• Search console
• web-vitals JavaScript library

2. Lab tools 

• Chrome DevTools
• Lighthouse
• WebPageTest

Tips to improve CLS

1. Always use size attributes on your photos and video elements, or use something like CSS aspect ratio boxes to reserve the necessary space. This method ensures that the browser can assign the appropriate amount of document space while the image is loaded.
2. Except in response to user input, never insert content above existing content. This ensures that any layout changes are predicted.
3. Ads can also cause changes to the website layout. Especially ads that aren’t well integrated. As a result, the Ad slot should have set dimensions so that the space is booked even before the advertisement is loaded.

Conclusion:

With Google’s introduction, developers don’t have to be experts to understand the quality of experience they are delivering to their users. The Web Vitals initiative aims to simplify the landscape and help sites focus on the metrics that matter most.