Core Web Vitals: Optimize & Get the Perfect Score for your Magento Store

Explaining Core Web Vitals

Google considers several factors for determining the overall user experience. Core Web Vitals are one such speed metrics that is used to measure user experience. The metric measures speed through three different categories including:

• Largest Contentful Paint (LCP): used to measure loading performance of (largest) text, image, and media block on a web page.
• Visual Stability with Cumulative Layout Shift (CLS): CLS is used to measure the stability of a web page as soon as it loads and starts interacting with the users.
• First Input Delay (FID): FID or First Input Delay is a metric to measure interactivity, which includes determining and loading reports on the time frame that a process (web page loading) and an event takes in response when a user interacts with it.

DID YOU KNOW: Google has been using mobile page experience and Core Web Vitals metrics for ranking pages since May 2021. Desktop signals are now being used from February 2022.

For every Magento extension development company, it is an important update to save their position over Google. By optimising the metrics as per the Google update, it gets easier to win conversions. It additionally ensures good position over the Google ranking.

Google has always favoured sites for raking that are mobile-friendly, offer safe browsing experience, and are responsive in nature. 

The Importance of Core Web Vitals for SEO Ranking:

Google’s search console has already added Core Web Vitals into its metrics. The metric has made it much easier to get performance report of indexed URLs

depending upon the field data.

As optimization of your stores remain in centre of Core Web Vitals for Magento eCommerce store, it can be used to get valuable insights on how the pages are performing and how their performances can be improved.

It provides information on all the fixes that should be done in order to improve the user experience of a web page on the mobile as well as on the desktop.

There is no doubt about Core Web Vitals’ performance for finding page speed. However, one concern associated with Core Web Vitals is that they measure much more than just the page speed.

They evaluate a page’s interactive capability meaning how well a web page interacts with the users. Therefore, the fact that even if your web page checks all the Google Page Speed Insight parameters, it still has a chance of not securing the desired position in Core Web Vitals Test.

However, the important question still remains the same, what role does Core Web Vitals will play in determining the web page ranking? Let’s find out!

From June 2021, Google has made it official to include web page experience as an important signal for finding out page ranking. However, it doesn’t mean that managing your Magento Core Web Vitals will optimize your web page ranking to be on number 1 position.

For Google, page experience is just one of the metrics among 200+ other metrics that is used to find website rank. And among these all metrics content still prevails as the king. However, in coming times Magento Core Web Vitals may become a key priority to stay visible.

Let’s have an extended discussion on the three most important Core Web Vitals one-by-one.

Three Most Important Core Web Vital

The Importance of Core Web Vitals for SEO Ranking:

1. Largest Contentful Paint

Largest Contentful Paint (LCP) is for measuring the time it takes the largest image or text or even a video to appear on a webpage.

The point that every Magento extension development company should understand here is even the largest element over a page should load in 2.5 seconds or less. Web pages that are taking 4 seconds implies that some changes are there to be done. Pages taking more than 4 seconds need major changes.

Magento store with poor LCP can be a major concern for decreased ranking and as a result it can hamper the rate of conversion also.

Factors for Poor LCP

Common reasons for poor LCP for Magento stores are:

• Slower server response time: Slower server response time could possibly happen due to poor web hosting. Database queries that are not optimized, lack of caching, and API responses that are not resolved are some of the most important reasons for the same.
• Slower loading time of resources: Slower loading time of images, videos, block of texts, and other such resources heavily impact the LCP performance.
• Client-side rendering: Magento progressive apps that are rendered on client-side can be a reason to affect the LCP.

Effective Ways to Optimize LCP of Magento Stores:

Optimizing LCP of Magento stores is easier. All it requires is optimizing images, texts, and over-the-fold content of a web page. Optimize these elements as much as possible in order to prevent elements that could stop it from getting downloaded.

In order to measure Largest Contentful Paint, the following tools can be used:

• Chrome user experience report
• Search Console (Core Web Vitals Report)

Here are the ways to Optimize LCP of Magento Stores

• Optimizing Magento Time to First Byte

Measuring your Magento’s time to first byte (TTFB) is important. This measurement will help you to determine whether or not the server response time is slow. A longer wait time is not ideal and therefore optimization techniques should always be performed promptly.

In order to measure TTFB, you can use Google chrome browser inspect tool. In case, the LCP of your Magento store is over 500 ms, your store requires Magento 2 Core Web Vitals optimization, which can be done in the following ways:

• Upgrading server infrastructure
• Improving efficiency of backend code
• Route users to a nearby CDN
• Enabling caching

2. First Delay Input

First Delay Input can be considered as the second pillar of Core Web Vitals. The metric (First Delay Input) is used to measure the store’s responsive nature when users come to interact with it for the very first time. This point of interaction can be anything like tapping a button, selecting an option, or entering a text by the users.

The pages need to respond on time in order to fetch the results. Longer wait time may hamper users’ interest and can be a reason for uses’ immediate exit.

Things to Know About Ideal First Input Delay

A good FID is 100ms or less in score. Anything above 100 needs improvement immediately as FID plays an important role in providing the overall search ranking. FID is a crucial factor too in order to forming a positive first experience.

As FID is very much about the interactivity of a page, it majorly focuses on elements such as keypress, click, press. In case, any of these elements is poorly performing, it won’t result in a positive FID.

Reasons for Poor FID

The only and the most important concern for a poor FID is a heavy task on the prime thread. It can be understood with this example. Suppose, a browser is busy doing some task, it thus will automatically take time to perform the task first and then will reply to users’ input. This delay may be caused because of the following reasons:

• Heave JS files
• Long tasks where the browser must pause
• Long JS bundles

Besides this, any input or element that contributes to increasing loading time is responsible for poor FID.

Ways to Optimize Magento for FID

FID is measured when real users interact with a page. The best way to measure this metric is by using Chrome UX report or by using Search Console’s Report. These tools offer insights based on the filed data.

Here are more specific optimization techniques for making your First Input Delay better:

Make longer tasks smaller by breaking them up

Long tasks (these are basically a piece of code, which blocks the thread for more than 50 ms) overload the main thread. During this period visitors may experience an unresponsive UI. Therefore, breaking out long threads and code-splitting are the two ways the problem can be resolved.

Accelerating third-party Scripts Execution

Magento sites generally have a number of third-party tags, which generally keeps the thread busy and is a cause for store being unresponsive for quite some time. All this impacts the interaction latency negatively.

One effective solution here can be using on-demand loading of third-party codes. The main motive here is to prioritizing loading web elements that could provide greatest value to the users.

Using web worker to run JavaScript

Web workers are the perfect choice for running scripts on background thread and therefore, they can be used for Magento FID optimization. On the other hand, service workers proxy the website network request. And therefore, it is ideal to go with web workers. Web workers provide your app the ability to run multiple JS execution on a parallel track.

Defer Parsing of JavaScript on Magento2

While a web page loads, the content is generally parsed from top to bottom. The process takes time as the browser has to load JavaScript files in case they are at the top of the page. Hence, defer JS till the time JavaScript files need to be executed.

In this scenario, the browser will fetch essential web elements like HTML and CSS in the first place and as soon as the process is completed all the scripts are then parsed. The process remains handy for Magento stores that use extension with heavy JS.

3. Cumulative Layout Shift (CLS)

Every Magento extensions company desires to offer smooth layout shift to customers. Because of the same reason, Cumulative Layout Shift is crucial. No user would like to browse through a page that shifts to different layouts as soon as it is opened. With such an experience the users will not stay on a page, which will ultimately harm the brand reputation.

Therefore, optimizing your Magento store for a good CLS contributes towards providing a Magento 2 Core Web Vitals optimization experience. CLS measures stability of visual content.

Ideal CLS Score Parameter by Google?

As per Google, anything below than 0.1 is considered a good score. Anything higher than this number states that there are things to fix. A poor Cumulative Layout Shift can drastically decrease the rankings, which is neither good for the brand not for users coming over the website.

Reasons for Poor CLS

Unoptimized images are the prime reasons for poor cumulative layout shift. Besides images, embeds, ads, and iframes without dimension are another cause for poor CLS. Additionally, other reasons that could equally contribute to poor cumulative layout shift are:

• Fonts (web) that triggers FOIT and FOUT
• Dynamically adding content that shifts unexpectedly: as unoptimized content contributes towards an unexpected shift, pop-up banners, sign-up forms, and related content can also be a reason for provoking unexpected shifts. This problem is frequently faced by Magento stores and therefore optimization should be done as soon as possible to fix the problem.

How to Optimize Magento Store for CLS

Cumulative layout shift can be measured in the field meaning real-user data as well as the in lab meaning in a synthetic environment. However, measuring in lab can even determine jumps that occur during the loading.

Following are some tools to measure CLS in the lab

• Lighthouse.
• WebPage Test;
• Chrome DevTools;

For the field measurement, use these tools:

• web-vitals JavaScript library.
• CrUX report;
• Core Web Vitals report in the Search Console;
• PageSpeed Insights;

 Here are a few tips for improving a poor CLS score

Specifying Size Attributes for Each Image

All thanks to the introduction of Core web vitals for Magento, it makes it easier to specify width and height attributes of all the images within a Magento store.

Images if not optimized well for a Magento store can easily impact the CLS score. Thus, it’s ideal to set up height and width attributes in order to allocate the required amount of space for images to download successfully.

System Fonts to Prevent Unepected Shift

System fonts help to optimize LCP as a result of reducing the requests that goes to the server. Additionally, it also helps to improve cumulative layout shift to a great extent.

The point to understand here is, contrary to system fonts, Google fonts don’t come preinstalled on a system. This means the fonts should be downloaded by the browser while a page is loading.

For displaying the content faster, the browser may display invisible text till the time the required web font is being downloaded. This is called FOIT or flash of invisible text. However, the browser may sometimes opt for displaying un-styled font while the web font is getting rendered. It is called FOUT, flash of un-styled text.

FOIT and FOUT are responsible for triggering unexpected shifts in the font layout and thus using system font is the best and the fastest method for text rendering.

Using Placeholders to increase perceived performance

In order to reduce layout instability, many Magento extension development companies use a placeholder. In case, placeholders are not used, there may be a considerable shift in layout generally caused by lazy loading.

As a result, the final output for users is negative due to unexpected jumps in the display. To avoid this, placeholders are used, which helps rendering the images as per the exact dimensions

Non-composited Animation is a Big No

Avoiding non-composited animation for your Magento eCommerce store will help keep the CLS smooth unlike using an unoptimized carousel. With an unoptimized carousel your final CLS score gets affected badly. And therefore, it is important to use the CSS transform properly in order to transit web elements as needed.  

The Bottom Line

Optimizing your Magento store with skilled Magento extension development company services can be an ideal move to keep up your store’s performance.

The Core Web Vitals Update is here to stay that would affect the ranking of the Magento eCommerce stores. Hence, this is crucial for every Magento eCommerce owner to work on the update as soon possible.