In this blog we will learn about what cumulative layout shift is (CLS) is:
What is Cumulative Layout Shift?
Cumulative Layout Shift calculates the increase in all frame changes that happen in a website while it is loading.
Whenever a page is loading few page elements shift unexpectedly unnoticed, which might affect the way of users interacting with webpage. Types of these: Button, Subscription forms, Contact forms, Images, Fonts and Videos.
Images and Videos without dimensions
It is always said to specify the width and height of your images and videos you have choose.
You can also use the CSS aspect ratio boxes to permit the browser to locate the correct amount of space on the web page while the image is being loading.
Dynamically injected content
Don’t insert any new content above old content, unless it is in response to user interaction.
This will make sure any layout shifts that occur are always anticipate rather than click the image or text to move without notice.
Acts waiting for a networks answer before updating the DOM
Always go to transformation animations which will trigger the layout changes.
For further information sign in on Mahimeta.com.