You are reading an article and suddenly the text moves, an image comes over in that place and you are lost. This type of phenomenon generally occurs in a page with poor web design. Worst scenario occurs when user is about to click a button or link but suddenly the link or button moves to a new location and you end up clicking wrong link or button. This is a completely undesirable situation which results into bad page experience for users.

The unexpected movement of the web element is called layout shift. The overall shift within a page is summed up and called Cumulative layout shift- CLS.

Cumulative layout shift of more than 0.1 is not visually stable, it causes unexpected movement of the page contents. Fix CLS for good page experience and SEO.

CLS is one of the three parameters of Core web vitals. It measures the visual stability of the webpage. A stable design provides a good page experience. Page experience is a major ranking signal in 2021. So, fixing Cumulative layout shift - CLS is an important aspect of SEO. You need to check CLS of both mobile and desktop version and keep it below 0.1.

Common cause of layout shifts:

1. Image without dimensions.
2. Third party ads and iframe without dimension.
3. Dynamically injected content
4. Web fonts causing FOIT/FOUT

Fix Cumulative layout shift- CLS for visual stability and good page experience

Image without Dimension: Always include the size attributes of image and video elements. So, do not forget to manually assign the height and width of the image. Setting the height and width of the image reserves the size for the image.

This generally happens because text and image/video generally do not load at the same time. Page contents are loaded asynchronously. So rich content takes time to load but texts are loaded almost instantly. If you do not reserve the space for image and if the image is between to text blocks, the lower text block will move downward when the image is loaded. So, to overcome this situation we reserve the space for the image.

Third party ads and iframe without dimension: Ads of varying size has many benefits. It helps to generate more revenue by higher click through rate. So, publishers prefer dynamic ad sizes. But, it lead to bad page experience, since the dynamic ads pushes the content of the page downward making it uncomfortable for users.

Common solution to this problem is statically reserves the size for ad container. This will not push the web content downward when the ad loads. This will help to keep the CLS as below 0.1.

Another solution is avoid placing ads at the top of the page. Ads at the top of the viewport will shift all the contents below it. But an ad at the middle of the viewport or towards the end will shift very less web content. So, CLS will remain low.

Embeds and iframes: Web contents like Youtube videos and Google maps are generally embedded in the pages. These are rich contents and are loaded asynchronously. This is a unexpected movement. Browsers generally do not know the size of these embeds in advance. Since, asynchronous load takes time and when they load they push the content downwards.

What we need to do is reserve some fixed amount of height and width. So that, when it loads, do not take extra space making the contents shift downward.

Dynamic generated content : Avoid inserting dynamic content at the top of the existing content, unless the dynamic content is generated by user in response to some action. Such dynamic content do not cause unexpected layout shift as it is generated by user action.