What is CLS and what does it stand for?
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?
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.
