Core Web Vitals – improve the score of Magento First Input Delay (FID) and Cumulative Layout Shift (CLS)

If you have read through the previous articles on how to improve Magento Core Web Vitals series, you would probably like to follow up with more tips on how you can improve the core web scores of your e-commerce business. If you missed these posts, here you have links to the articles about Core Web Vitals in general and the Largest Contentful Paint LCP, introduced in May 2021:

• Magento Core Web Vitals – a new ranking signal for your Magento 2 e-commerce
• Magento Core Web Vitals – improve the score of Largest Contentful Paint LCP

In this article, we will cover how to decrease the time of First Input Delay FID and minimize Cumulative Layout Shift CLS. We also want to give you a brief insight on tips and tricks that we at Panda Group discovered and found very helpful during developing Magento projects.

What is First Input Delay (FID)

As mentioned in the first article about Magento Core Web Vitals this metric is closely related to the interactivity of the page.

First Input Delay FID measures basically the delay between the time when a user can try to interact with the website (for example click on the menu item or select dropdown) and the time when the browser is able to respond to the user.

The ideal score is to achieve 100 milliseconds, longer times may affect not only your ranking but also make a bad first impression on your customers. On the other hand, First Contentful Paint, tracks the point at which the first bit of content is rendered by the browser, and Time To Interactive captures the point when the browser is able to start process event handlers. FID First Input Delay happens somewhere between these two points because there is something already visible for the user on the page but it’s not yet able to interact.

First Input Delay FID score can be lowered by:

• optimizing JavaScript execution time – this could be a very broad topic but you can start with some well-known optimization techniques like memoization or reducing the usage of nested loops,
• limiting the effects of third-party JavaScript plugins – there are times when three lines of your own code could be more efficient and lightweight than importing another plugin,
• keeping request counts low and transfer sizes small although carefully use the default Magento JavaScript bundling tool – it may cause fewer but larger HTTP requests. There are other tools for Magento that can better handle bundling,
• breaking long tasks – keep in mind that not everything is immediately visible and used
• deferring JavaScript using async or defer whenever possible
• minimize unused scripts

Cumulative Layout Shift (CLS)

Usually happens when some elements on the page are loaded asynchronously above elements that are already visible.

CLS Cumulative Layout Shift may also take place when some content is added or there is a dynamic change of styling pushing elements that are below. It may be very frustrating for users, especially if happens during the loading of the page when there is no indication that the process isn’t finished yet. Unexpected occurrences of large layout shift may cause misclicks and will for sure impact your rank in Google SERP.

It’s important to note that this doesn’t apply to the situation when layout shift happens within 500 milliseconds after the user interacts with our website. It’s considered that the user expects such behavior. It also doesn’t apply to displaying new elements or changing size of the existing ones as long as it doesn’t affect the position of previously rendered elements.

To provide a smooth user experience we should aim at the Cumulative Layout Shift CLS score of 0.1 or less.

How we can minimize Cumulative Layout Shifts?

• in the first place try to avoid adding content above existing elements except for response for user interaction,
• if you have to add something above existing element, consider using position: absolute or fixed,
• reserve in advance space for elements that will be rendered later. Calculate needed space and reserve it for example by setting min-height of the wrapper where you want to display something later,
• add size attributes (width and height) to your images and videos whenever possible: Magento already enforces it for example in product images, but it’s easy to forget when adding custom features with images and icons,
• use CSS aspect ratio boxes,
• for manipulating the width and height of an element try using transform:scale() and when moving element use transform: translate().

Summary

As you can see, there’s a load of aspects to consider when you want your shop to excel in great UX and modern SERPs. That’s why we believe that we should start working on a new project or functionality with performance and optimization in mind. Optimizing an existing website usually takes much more time.

After each change, we measure our Core Web vitals metrics using various tools starting from those which are built in the browser. Every project is different, and as there are many cases when we use custom or specialized tools, some others might be of use for a greater range of pages. For bundling JavaScript we are usually using more modern optimizers like MagePack. For lazy loading resources, our tool of choice in many projects is lazy sizes which is simple to use and very efficient. We also like to take advantage of built-in Magento features like CSS Critical Path.

At Panda Group we focus on providing a smooth user experience and care about the high position of pages in Search Engines like Google. For us, increasing scores in Lighthouse is only one of many steps we’re taking to help our client achieve their goals.