B2B Digital Marketing BlogSEOWhat is CLS and what does it stand for?

What is CLS and what does it stand for?

What is Cumulative Layout Shift (CLS)?

Advanced Technical SEO – What is CLS?

CLS stands for “Cumulative Layout Shift”. It is a ranking factor and can be found in the core web vitals report in google search console. CLS measures a user experience (UX) event and became a ranking factor in 2021. It is a google term and refers to the instability of the user’s display of a webpage. High CLS values may occur when the webpage display is unstable. The metric indicates whether or not the page loads according to what the user expectations are.

What causes a high CLS value?

– Image dimensions: images that do not have a pre-defined display size.
– External elements: ads, iframes, external applications that do not have a predefined display size.
– Dynamic content: For example, content created dynamically by JavaScript code.
– Network font: For example, the definition of a font from an external site that changes the font text after it has been downloaded.

How can we pre-define image dimensions in a responsive web design?

– First, define the default width and height for all site media, images and videos and also for tables, iframes and external objects/elements.
– Use the CSS Aspect ratio feature that allows you to check in advance for the ratio between the object that was defined for height and width, and match them to the actual width of the screen while maintaining the same ratio.

img, input[type=”image”], video,
embed, iframe, marquee, object,
table {
aspect-ratio: attr(width) /
attr (height) ;

If your site is defined with 100% image width and Auto height, which is the method used by many responsive websites, your browser will know ahead of time which height to define for a specific image. The method works well even if your site is using responsive Imaging in tandem with SRCSET. Note that this method works only for images.

What else can be done to improve CLS scores?

– Pre-define all dynamic content (for example responsive google ads). banners that appear suddenly and push the text around are exactly the kind of changes that negatively affect CLS scores.
– Ads can be isolated by using external DIV while pre-defining height and width to provide a better UX.
– Avoid adding new content above content that has already been loaded. This can be done only if the additional content was added as a result of user-action.

Inter-Dev is a leading B2B Digital Marketing agency specialized in Search Engine Optimization & PPC for start-ups, SEO for cybersecurity companies, medical device companies, technology companies, e-commerce websites and industrial B2B companies. We have over a decade of experience in helping companies achieve their lead generation goals.

Share on

Contact Us

    Skip to content