CLS

Definition

CLS (Cumulative Layout Shift) is a Core Web Vitals metric measuring visual stability. High CLS causes unexpected layout jumps and mis-clicks, hurting user experience and potentially page experience signals.

Why it matters

• Reduces mis-click risk — buttons jumping away as users click is frustrating
• One of the three Core Web Vitals, affects page experience score
• High CLS hurts conversion rates and user trust
• Ads, images, and fonts are the three main CLS culprits
• Mobile screens are smaller — CLS impact is more noticeable
• Dynamic content (toasts, banners) easily causes CLS
• CLS is cumulative — the entire page lifecycle matters

How to implement

• Set explicit width and height attributes on images
• Reserve space for ads/iframes (skeleton or min-height)
• Use font-display: swap or optional to prevent FOUT shifts
• Avoid inserting elements above existing content
• Use CSS aspect-ratio to reserve space for responsive images
• Place dynamic content (notifications, banners) in fixed positions
• Monitor CLS: use PerformanceObserver or web-vitals library

Examples

<!-- Set explicit dimensions -->
<img src="/product.webp" alt="Product" width="800" height="600" />

<!-- Or use CSS aspect-ratio -->
<style>
  .responsive-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
</style>
<img src="/hero.webp" alt="Hero visual" class="responsive-img" />

/* Reserve minimum height for ad container */
.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

/* Or use skeleton placeholder */
.ad-slot:empty::before {
  content: '';
  display: block;
  height: 250px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  animation: shimmer 1.5s infinite;
}

Related