Dj Techblog

A blog on web development

How to fix Cumulative layout shift - CLS

Last modified on May 29, 2021
how to fix cls cumulative layout shift

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.

Published on May 29, 2021


Debabratta Jena

I mainly write about HTML5, CSS3, Javascript, Angular JS, Ajax, PHP, Mysql, On page SEO, Google Ads, Tag manager, Universal Analytics, Google My Business, SERP, Apache server configuration etc, Yoga is my passion.

Reach to me in the contact us form below

Follow me on

Contact us



Php HTML5 Javascript CSS Ajax Angular JS Google My bisiness Listing Google tag Manager Google Universal Analytics Search Engine Optimization On page SEO Off page SEO Google Marketing platform Digital Marketing Google Ads Mysql Apache Server


Subscribe to get email notification about our new post



We neither sell nor share your personal information with any third party. Your identity is safe with us.