Improving Magento 2 Web Vitals

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. So Core Web Vitals becomes a must factor to ranking your website in search engines.

Do you want to improve the Core Web Vital? Read our article to understand the main core web vitals and how to improve them.

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.

• Largest Contentful Paint (LCP) : LCP is the time it takes for the largest piece of content to appear on the screen.
  As per google standard LCP should be less than 2.5 seconds.
• First Input Display (FID) : FID is the time it takes to respond to any user interaction.
  An ideal FID should be less than 100 ms.
• Cumulative Layout Shift (CLS) : CLS is layout shift when it’s loading.
  An ideal CLS should be less than 0.1.

There are various tools available to measure the Web Vitals and improve the performance. These tools will show you the report with core Web Vitals, such as LCP, FID, CLS. Most common tools to audit your site performance.

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.

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. Focus to improve main web vitals & bring your site in google search ranking to grab more conversion and sales. Because 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.

The three Core Web Vitals are namely, LCP, FID, CLS, let’s see them in detail.

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 work out 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.

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.

For Example, in below screenshot, you can see the LCP is 1.2 s we achieved for one of the client.

Reason for poor LCP?

• Slow server response times.
• Render-blocking JavaScript and CSS.
• Slow resource load times.
• Client-side rendering.

How to improve LCP?

• Optimize images – We recommend to optimize images, compress and reduce the weight of images and use that to appear in the viewport.
• Optimize server – Use CDN to deliver content fast. CDN delivers content from the nearest server to the user. So product images and contents are uploaded faster.
• Optimize JavaScript & CSS – Remove unwanted js/css code.

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.

You can improve FID by reducing unused JavaScript : you can remove unnecessary JavaScript and reduce the time of task execution, or remove the unwanted extensions from your website so that can reduce the js payload on the server.

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.

How elements of your site shift? Element shifts when all content appears to be fully-loaded and visible, but one large element hasn’t finished downloading yet. All of the other content is “pushed”, which results in sudden layout shifts. And as soon as they load, all of the site content is subject to shift.

Now its time to take action to improve web vitals, follow below given steps to improve web vitals.

1. Defer Offscreen Images

Generally images takes more loading time due to that your site can be slow down. We recommend to apply Lazy Loading for images. 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 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.

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

Sometimes your online website contains unused javascript files. Unused Javascript 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 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.

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. Remove unused CSS

Although CSS is useful for improving user experience, we would recommend removing unused css. Most of the time a developer leaves the unused css that is no longer delivering benefits, can slow down your website.

8. Avoid an excessive DOM size

If your webpage contains an excessive number of DOM nodes or HTML tags, or if these nodes or tags are nested too deeply, it has a high DOM size. This might cause difficulties with site performance, such as jerky scrolling and sluggish page loading times. An optimized DOM size, on the other hand, provides a better user experience, which leads to greater conversions.

JavaScript execution time should not be longer than 3.5 seconds. Site speed will affect when JavaScripts take a longer time to execute. If we talk about Magento 2 websites, it contains almost 200 scripts only for the home page. If you’re using more third party extensions on your website it means you are allowing lots of JS

files, and of course there will be a chance to increase in JavaScript execution time. So we would recommend reducing the JavaScript execution time.

We would recommend uninstalling unused extensions from your website. Magento extensions contain JavaScripts files, or sometimes it might contain some unwanted code. So analyse your site extensions, audit code, remove unwanted code.