Archana Nagarkar | 08 min read | Dec 30, 2020

1. Quickread

Improving Web Vitals are very important. Google has confirmed that Core Web Vitals will be part of it’s ranking factor starting May 2021. According to a recent report, only 13% of eCommerce websites pass the Core Web Vitals. It’s recommended to implement the changes to achieve a standard score of web vitals as this is the must to rank in google search.
Are you not aware about the concept of Core Web Vital?
Don’t worry. Most site owners are unaware of what Core Web Vitals are and they don’t know how to check their site for Web Vitals compliance. Web vitals is a user experience signal that analyzes and shows the report of your web page quality. So that webmasters can audit the site, workout on it’s recommendation and improve the site scores for better page experience.
There are three “Core Web Vitals” which are the most important and you need to focus to improve them. In this article, we will see what the Core Web Vitals are, how you can audit and improve the web vitals.

2. Tools to measure Web Vitals

There are various tools available to monitor Web Vitals and improve the performance as per recommendation. These tools will show you the report with core Web Vitals ranks, such as LCP, FID, CLS. Here are some popular tools to audit your site performance.
  • GTMetrix
  • PageSpeed Insights
  • Lighthouse
  • Google Search Console

3. How Web Vitals Affect Your eCommerce Stores?

Ranking in Google Search is the most important factor for your online store. To rank on Google there might be some site improvement that needs to be done. Google updates the strategy to improve the rank of your website.
From 2021 Web Vitals will become an official SEO rankings metric. Core Web Vitals will play a major role in deciding the traffic load on your site via organic search. The Google algorithm is continuously modified to be able to deliver the right content to the user and offer better customer user experience.

4. Why Core Web Vitals Important?

Google plans to make page experience an official Google ranking factor.
Better user experience is the key factor for your online store to improve in sales. And for better user experience you should have a fast loading website. Once you focus on your site speed optimization and seo ranking then it will be very easy to grab more conversion and sales.
Google announced that Web Vitals are the most important metrics for ranking algorithms starting 2021. There are three important web vitals which you have to improve for better page experience. The object-based approach of analyzing the page speed is efficient than all of the currently used metrics (like the score provided by third-party tools)
Here, Google assigns a specific score for each object element – LCP, FID, CLS.
With a combined score, where each element is assessed separately, Google decides whether the page experience is good or bad.

5. What are the Core Web Vitals

The three Core Web Vitals are:

1. Largest Contentful Paint

LCP measures how long the page takes to load from a user perspective. Generally it refers to the time to take the load with the largest image or text block visible to the user. As per google standard LCP should load within 1.5 seconds, if it takes more than that then definitely you should workout to improve the LCP.
LCP is decided by factors such as the render time and the largest video, image, and text in the user’s visible area of a web page.Google looks at this metric to find out how long it takes for the largest piece of content to load, regardless of the size of the device or the type of content on the page. LCP can be impacted by your CSS, your server time, and client-side rendering.

LCP of:

As per above image, LCP of Less than or equal to 2.5 seconds is regarded as fast.Between 2.6 seconds to 4.0 seconds needs optimization. Greater than 4.0 seconds are considered slow.

2. First Input Delay

First Input Delay measures how responsive your website is, once a user clicks on a link, taps a button or any other interaction with the page. What is the delay between the interaction and the result of the website actually doing something.
Anything less than 100ms is considered good, anything over 300ms is poor and should be addressed with priority.

3. Cumulative Layout Shift

CLS measures the visual stability of a webpage. Does the page shift as you scroll, do you go to click a link for it to move before you’ve clicked it. This usually happens because things are still loading in the background. Visual stability is a frustration for users as it can cause confusion – or worse – incorrect use of the site, form, or application. CLS is a score between 0 and 1 based on the element’s moving distance and visual impact in the viewport. A score of 0.1 or less is good, and anything over 0.25 is considered poor.

6. How to improve Magento Core Web Vitals?

1. Defer Offscreen Images

One of the solutions to fix this warning is use of Lazy Loading. Lazy loading slows down offscreen images loading. Users can’t see offscreen images when they enter the store, they just see a few banners at the top and probably some content on the visible screen.
When a user opens a webpage, all the contents of the page are downloaded, including all images in it. Obviously, if the web page contains more images, then it will take more time to load. Lazy loading is a handy skill to help you prevent downloading of unnecessary images. Instead of loading all images at one time, the images are loaded only when the user accesses the part of the page that relates to these images. With lazy loading, on-screen images are loaded first, and the remaining images are gradually loaded as and when the user scrolls through the page. For Example, if your web page contains 100 or more images then instead of loading all the images at one time we can add images in lazy loading and load only required images on page scrolling.

2. Eliminate Render Blocking Resources

You can eliminate render blocking by moving critical code out of head.
In most of the cases it has been found that js and css are included in Head code. If there is no defer associated with these includes then that code will block rendering. This should be avoided if “defer” was not needed or reduced to the highest possible extent. Also on times there are Java script lines embedded in head this again will do the render blocking if these are getting executed. All CSS and JS needs to be deferred where possible, if possible create a critical CSS file, for all content above the fold.

3. Reduce Initial Server Response Time

Once a user requests the browser, the browser requests a server to fetch the requested content by the user. If your site contains more http requests then it will take a long time to respond to users request and user dislike when pages take a long time to load.
There might be a number of reasons to slow down server initial response. Use Varnish cache to speedup to improve in the load time as Varnish delivered from the cache server instead of origin server. There are lots of benefits using Varnish cache, it reduces the load of the backend, as it delivers the content from the cache server.
Another reason to slowdown your website is the server. If your server is slow then it will impact the initial response time. So optimize the server application logic to faster the website. optimize server queries database, upgrade your server hardware.

4. Avoid large layout shifts

Large layout shifts can be avoided as it’s effect when visitors interact with the page. Once a visitor visits the page Large layout shifts can create a frustrating experience for them. A page element appears suddenly or moves around, and affects how the visitors interact with the page. Avoiding large layout shifts is essential for a smooth user experience.

How do Layout Shifts affect page performance?

When a visitor visits your webpage, they want to quickly interact with the page by clicking buttons, contact forms, images, videos, etc. Sometimes, they are just about to click on a button or something the screen has shifted down and they’ve ended up clicking on something else entirely.

5. Remove Unused JavaScript and CSS

Sometimes your online website contains unused javascript and css files. Unused Javascript and css can slow down your website, because browsers don’t know which is useful or not, so the browser will download, parse, compile and evaluate all the JS/css before it can proceed with all of the other work that is needed for rendering the page. So there is a must to remove the unwanted JavaScript and CSS.

6. Optimize images and video

Use of higher resolution images may affect the site speed. Recommended to use optimized images video on your page to reduce the load time for images and video.If you use larger file size then it will generate more http requests and reduce the load time. You can use properly sizing images, efficiently encoding images. Use sprites for the images to combine the small images. Also recommended to serve images in next-gen format. You can use Webp, JPEG 2000, JPEG XR these will help to reduce the http requests and increase in site speed.

7. Conclusion:

Web vitals are the most important factor to rank in a google. So it must understand the Web Vitals and focus to improve that as per google standard.
Our article will help you to understand the web vitals concept and its importance. You can improve web vital score by applying the given solution in this article.
If you have any questions related to this then please feel free to Contact Us.

For Further Details or Additional Information

OR

If you want to know more about our Services