If you have read through the previous articles in the Magento Core Web Vitals series, you would probably like to follow up with more tips on how you can improve the scores of your e-commerce business. If you missed these posts, you can introduce yourself to CWV metrics by reading and see how you can speed up Largest Contentful Paint by reading .
In this article, we will cover how to decrease the time of First Input Delay and minimize Cumulative Layout Shift. 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.
First Input Delay
As mentioned in the first article about Magento Core Web Vitals this metric is closely related to the interactivity of the page. FID measures basically the delay between the time when a user can try to interact with the website (for example click on 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 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 score can be lowered by:
breaking long tasks – keep in mind that not everything is immediately visible and used
minimize unused scripts
Cumulative Layout Shift
Usually happens when some elements on the page are loaded asynchronously above elements that are already visible. It 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 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().
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.
At Panda Group we focus on providing 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.