When it comes to ranking, eCommerce stores that provide better experience to the users rank higher.
But how do you measure page experience?
Google has more than 200 ranking factors in evaluating the page. Few of them are light signals, while others have a high impact (such as security, loading speed, responsiveness etc..)
Core Web Vitals are the latest metrics Google comes up with to measure the page experience.
In this article, I will show you how you can improve Core Web Vitals for Magento 2 store and prevent losing your search rankings.
What are Core Web Vitals?
The Core Web Vitals focus on the three aspects of the browsing experience — Loading time of the page, interactiveness of the page, and visual stability of the page content.
Each web vitals provide an insight into a different part of the website and the user experience that comes with it.
Core Web Vitals are:
- Largest Contentful Paint: LCP measures the time it takes to load the page’s main content to become visible. An ideal LCP should be less than 2.5 seconds.
- First Input Delay: FID measures how soon the user can perform any action on the page. An ideal FID should be less than 100 ms.
- Cumulative Layout Shift: CLS check if the element on the webpage is shifting position. An ideal CLS should be less than 0.1.
Largest Contentful Paint (LCP)
LCP does not inherently mean the loading speed of the page. It borders on the perceived page speed.
Basically, LCP measures the time it takes to load the largest element on the page.
For example, your Magento store footer can take time to load, and the user will not see it initially. However, the product catalogue is in view and make the main body of the store.
The largest image or the body present in the viewport should load as quickly as possible. It assures the user that the page is loading fast.
LCP should not be more than 2.5 seconds.
First Input Delay
FID measures how quickly the user can interact with the page.
Your Magento store loads fast, but the ‘Buy’ button below the product image is not clickable until every element on the page is visible.
This means the user has to wait longer to interact with the clickable elements. The user can’t interact with the page, even if the page is visible. This adds to create a poor page experience.
Similarly, there are many interactions on the Magento store, such as a live chat button, like a product, or add to cart. If all of these interaction does not work quick enough, the user perceives the page as slow.
Fiest Input Delay should be less than 100 milliseconds to provides a good user experience.
Cumulative Layout Shift
CLS measures the stability of the Magento store.
Sometimes the page loads, and as the user goes to click the button, the button shifts due to some new elements that load at the top of it.
In eCommerce, typically, the pages consist of multiple product images. If the size of images is not the same, then when the large image comes under viewport, the entire page will shift.
Also, a single web page comprises so many resources, and many of them load asynchronously, pushing the elements farther.
Elements such as ads, images, videos, fonts, headings — all change sizes dynamically.
The shifting element and unstable page annoys the users and customers; they may leave the site entirely.
The CLS score of less than 0.1 provides a good user experience.
Importance of Core Web Vitals
Core Web Vitals are not implemented yet, but Google has announced that they will release the new ranking signals from May 2021.
These new signals are not isolated from the other signals but will add to them.
Other important signals are:
Responsiveness: Google is already gone mobile-first indexing. It checks how your Magento store loads on the mobile and prioritises the mobile version while ranking. Besides mobile, your store must load responsively on all type of screens, resolutions and devices.
Intrusive Interstitials: Interstitials, or the large pop-up, ads blocking the main content of the Magento store, is a poor user experience.
Though there are still a few months left, you should optimize your Magento store for the upcoming Core Web Vitals update.
That way, you will stay ahead of the competitors.
Let’s see how you can measure the Magento Core Web Vitals and optimize for each vital.
Test and Improve Magento Core Web Vitals
You can make a copy of the table, and use it to enhance your Magento store performance.
Upcoming few months is going to be difficult for the slow Magento stores.
If you prepare your Magento store for Core Web Vitals today, you will see good results later.
Besides all the tweaks and tuning, the best solution is to get fast Magento optimized hosting. At ServerGuy, we guarantee a 2 second loading time for Magento stores.