Understanding & Optimizing Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a critical metric in Google’s Core Web Vitals that assesses the stability of a webpage during user interactions. Since becoming a ranking factor in 2021, it’s essential to grasp what CLS is and how to optimize it to improve both user experience and search engine rankings.

What is Cumulative Layout Shift?

CLS measures the unexpected movement of webpage elements as a user interacts with the page. This could include shifts in fonts, images, videos, buttons, forms, and other content that disrupt the browsing experience. 

A poor CLS score, anything above 0.1, indicates issues that could negatively impact user satisfaction. Addressing CLS not only creates a smoother experience for your users but also aligns with Google’s criteria for ranking pages.

Why Should You Care About CLS?

1. Bad User Experience (UX): Imagine trying to click a button, but it moves right before you tap it! CLS frustrates users and makes them less likely to come back to your site.
2. Search Engine Ranking: Google wants users to have a good experience on the web, so CLS is a factor in how they rank websites. A good CLS score can help your website rank higher. 

Pro tip: Get in touch with our team of SEO experts at 42Works to help your website rank higher in search engines.

What Causes CLS Issues?

There are five main culprits behind CLS issues:

1. Images Without Defined Dimensions
2. Ads, Embeds, and Iframes
3. Dynamically Injected Content
4. Web Fonts
5. CSS or JavaScript Animations

Images Without Dimensions

Browsers cannot predict an image’s size until it is fully downloaded. If the <img> HTML tag lacks width and height attributes, the browser doesn’t know how much space to reserve, leading to layout shifts as it reallocates space once the image loads. To prevent this, always specify the image’s width and height in the HTML to maintain the correct aspect ratio and avoid unexpected shifts.

Ads and CLS

Loading ads like AdSense without proper dimensions can cause layout shifts. This issue arises when ad sizes differ from the allocated space, either leaving too much white space or causing the content to shift when a larger ad loads. The solution involves balancing the ad sizes for consistent user experience and optimal CLS scores, even if it means compromising on inventory or CPMs.

Dynamically Injected Content

Dynamic content, such as social media posts or additional elements, can cause shifts when loaded after the initial page load. For example, if a post from X (formerly Twitter) loads with an unpredictable height, it can shift the surrounding content. To mitigate this, you can pre-allocate space using CSS properties like min-height, or apply a fixed height to the container. If necessary, consider using a static image or a link to the content to prevent shifts.

Web Fonts and CLS

Web fonts can cause FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text), leading to layout shifts as the fonts load. To minimize this, use the preload attribute to load fonts quickly and the font-display: swap; CSS property to display system fonts until the web fonts are fully loaded. Although using system fonts is ideal for avoiding these issues, it may not always align with brand guidelines.

CSS or JavaScript Animations

CSS or JavaScript animations that alter an element’s height or width can cause layout shifts by affecting the surrounding content. To prevent this, use CSS transforms to allocate space for the animated element, ensuring that the layout remains stable during the animation. This approach prevents the unwanted shifts that can occur with traditional CSS animations.

Mitigating CLS Issues

Here are some ways to prevent layout shifts and keep your website stable:

1. Define Image Dimensions: Always specify width and height attributes in your image tags (<img>). This allows the browser to reserve space for the image size before it downloads.
2. Reserve Space for Ads: For ads, you can either allocate space large enough for the biggest expected ad size or use ad networks that provide consistent sizes.
3. Pre-allocate Space for Dynamic Content: Estimate the average size of dynamically loaded content and use CSS properties like min-height to reserve space in the layout.
4. Optimize Web Fonts: Use preload links to tell the browser to prioritize font loading and use font-display: swap; to display a system font initially and swap to the web font when loaded.
5. Use CSS Transforms for Animations: Animate elements using CSS transforms (e.g., translate, scale) instead of changing their height or width directly. This prevents layout shifts and allows the browser to adjust surrounding elements smoothly.

How is CLS Calculated?

CLS is calculated using two metrics: Impact Fraction and Distance Fraction.

• Impact Fraction measures how much space an unstable element occupies in the viewport before and after it shifts.
• Distance Fraction measures how far an element has moved from its original position.

These fractions are multiplied together to calculate the CLS score. While the specific calculation involves further details, it’s the overall concept that matters – a higher score indicates a more disruptive layout shift.

The Takeaway:

Understanding CLS is crucial for optimizing user experience and search engine ranking. By implementing the solutions outlined here, you can create a smooth and enjoyable browsing experience for your visitors, boosting your website’s success.

More resources: 

1. Core Web Vitals Showdown: WordPress, Duda, Wix, and Others
2. The Core Web Vitals: Google’s New Update 2021

For more insights on web performance and digital solutions, contact us at 42Works, and let’s optimize your website together!

FAQs

1. What is the ideal CLS score?A CLS score below 0.1 is considered good. Scores above 0.1 indicate potential issues that need addressing to improve user experience and SEO.
2. How can I check my CLS score?Use tools like Google PageSpeed Insights, Lighthouse, or the Web Vitals extension for Chrome to measure your CLS score and identify areas for improvement.
3. Can I fix CLS issues myself?Yes, many CLS issues can be addressed through proper image dimensions, ad sizing, and CSS techniques. However, for complex issues, consulting with a web performance expert may be beneficial.
4. Why is CLS important for SEO?Google includes CLS in its ranking criteria because it directly impacts user experience. A stable, smooth browsing experience helps improve your site’s SEO performance.
5. What tools can help with CLS optimization?Tools like Google PageSpeed Insights, Lighthouse, and web performance monitoring services can help identify and address CLS issues on your website.