CLS (Cumulative Layout Shift)

CLS (Cumulative Layout Shift) is a metric used by Google to measure the visual stability of a webpage during loading. It is part of the Core Web Vitals, essential metrics for evaluating the user experience on a website.

CLS measures unexpected layout shifts that occur when page elements (text, buttons, images, ads, etc.) move unexpectedly after loading. A high CLS score means users experience an unstable page, which can be frustrating, especially if it causes accidental clicks.

Google considers CLS as an SEO ranking factor, meaning websites with poor visual stability may lose visibility in search results.

How CLS Works and Calculation

CLS is a unitless metric that quantifies how much and how often elements shift on a page. It is based on two key factors:

  1. Impact Fraction
    • The proportion of the screen affected by a shift.
    • Example: If an element takes up 50% of the screen and moves by 25%, the impact fraction is 0.5 + 0.25 = 0.75.
  2. Distance Fraction
    • Measures how far an element has moved relative to its original position.
    • If an element shifts by 25% of the screen height, the distance fraction is 0.25.

CLS Formula:

CLS = Impact Fraction × Distance Fraction

A good CLS score is below 0.1, while a score above 0.25 is considered poor.

Benefits of a Low CLS

  1. Better user experience: A stable page prevents frustration and improves readability.
  2. Improved SEO ranking: Google prioritizes sites with good CLS scores.
  3. Fewer navigation errors: Prevents accidental clicks on shifting elements.
  4. Higher conversion rates: A smoother experience encourages user engagement.
  5. Better accessibility: Helps users with cognitive or physical impairments navigate effectively.

Common Causes of High CLS and How to Fix It

Main Causes:

  1. Late-loading images: Images without predefined dimensions cause layout shifts.
  2. Dynamic ads and iframes: Third-party content inserts can disrupt the layout.
  3. Unoptimized fonts (FOUT/FOIT): Text appearance changes can shift page content.
  4. Dynamically injected elements: Scripts adding content after the initial load.

Solutions:

  1. Set explicit image and video dimensions using width, height, or aspect-ratio.
  2. Reserve space for ads and iframes to prevent sudden shifts.
  3. Use font-display: swap to prevent text rendering delays.
  4. Load dynamic content progressively with min-height placeholders.

Conclusion

CLS (Cumulative Layout Shift) is a key metric for ensuring a smooth web experience. A stable layout prevents user frustration and enhances navigation, conversions, and SEO. With Google emphasizing Core Web Vitals, optimizing CLS is a priority for web developers.

Implementing best practices like defining media sizes and managing dynamic content helps reduce layout shifts and ensures a performant, user-friendly site.

Source: https://web.dev/articles/cls

Catégories d’articles