What causes a high CLS score and how can it be fixed?

Question

Khushi Singh · Answer

A high CLS score is received when multiple elements on a webpage move during the loading phase, in the visibility of the user and cause a bad experience. It is one of Google’s Core Web Vitals, and it relates to the visual stability – the higher figure means the layout is shifting, which may lead to misunderstandings, such as the user clicking on the wrong button, or losing their position during the reading session. Common Causes of High CLS: Images without dimension declarations: When images are loaded without the width and height metrics, the web page does not allocate space, and this causes shift. Ads, embeds and iframes: elements which load last such as advices or social networking sharing icons can move content. Late loading of fonts or styles: Where a H2O-based typeface load after the text has been rendered there is a tendency for the fonts or styles to alter the position, size, and alignment of the text. Arbitrary DOM changes or animations: It means content updates on the page, which might include things like enlarging banners, that don’t smoothly transition will result into jumps. How to Fix High CLS: Define size attributes: When the target media is image or video the width and height should always be set to inform the browser about the necessary space before loading the media. Aspect-ratio: For responsive, layout designs, the aspect ratio is used to preserve space especially when scaling. Web fonts: use rel=“preload” so as to avoid slow rendering of fonts. Do not put new content over old content: When modifying the DOM, it is better to append the new elements bottom of the page or in spaces that have been reserved for it. Pre-hoardling of ad and embeds: Makes specific areas to contain third-party contents, so they don’t cause shift when they load. Animations should be kept appropriate: Prefer the transform and opacity but height and margin of the element should not be changed. If implemented, the described practices would allow to alleviate the problem of layout instability and even gain higher CLS score and thus, further enhancing the site’s user experience.

forum

What causes a high CLS score and how can it be fixed?

Can you answer this question?

1 Answers