CLS prevention patterns are in use

Cumulative Layout Shift (CLS) is a Core Web Vital — a score above 0.1 degrades Page Experience ranking on mobile. The most common cause is images rendered without explicit width and height attributes: the browser reserves no space for the image before it loads, so the page shifts downward when the image appears, displacing content the user was reading. A secondary CLS source is cookie consent banners or chat widgets that inject above existing content post-render, pushing the viewport. Beyond ranking, high CLS creates a frustrating user experience where buttons move before users can click them — a direct conversion impact measurable in A/B tests. iso-25010:2011 performance-efficiency covers both the ranking and usability dimensions.

Set explicit width and height on every <Image> component or use the fill prop with a sized container. For dynamically sized images, use the CSS aspect-ratio property to reserve space before the image loads.

// components/post-image.tsx — reserve space before load
import Image from 'next/image'

// Option 1: explicit dimensions
<Image src={src} alt={alt} width={800} height={450} />

// Option 2: fill with sized container
<div style={{ position: 'relative', aspectRatio: '16/9' }}>
  <Image src={src} alt={alt} fill style={{ objectFit: 'cover' }} />
</div>

For cookie banners and chat widgets that inject above content: use position: fixed overlays that overlay rather than push content, or render a fixed-height placeholder server-side so the space is already reserved when the JS hydrates. In app/globals.css, verify no layout-affecting CSS transitions (height, margin, top) run on content elements — replace them with transform: translateY() equivalents which do not trigger layout.

• ID: cls-prevention

• Severity: high

• What to look for: Count all image and media elements. Enumerate which have explicit width/height or aspect-ratio CSS vs. which could cause layout shifts. Cumulative Layout Shift (CLS) measures visual stability. Check for CLS risk patterns: (1) images without explicit width and height attributes — images without dimensions cause layout shifts when they load, (2) dynamic content injection above existing content (cookie notices, chat widgets, announcement bars that push page content down after initial render), (3) font loading without font-display: swap or optional — text reflow during font swap shifts layout, (4) CSS animations using layout-affecting properties (height, top, margin, padding) on visible content elements instead of transform and opacity. Check whether Next.js Image components provide explicit dimensions.

• Pass criteria: All <img> and <Image> elements have explicit width and height attributes, or use fill layout with a sized container. No unsized content injection above the main content area. Font loading is optimized. At least 90% of images and media elements must have explicit dimensions or aspect-ratio CSS to prevent layout shifts.

• Fail criteria: Multiple images lack width and height attributes. Cookie banners or chat widgets inject above main content without reserved space. CSS animations on content use layout-affecting properties.

• Skip (N/A) when: No images or dynamic content injection patterns detected. Project is API-only.

• Cross-reference: For LCP optimization, see lcp-optimization.

• Detail on fail: "CLS risk: 8 images in components/ lack explicit width/height attributes. Cookie consent banner dynamically injects above main content without reserved space. Layout-affecting CSS transitions detected on content elements."

• Remediation: CLS under 0.1 is considered good by Google. Fix the most common causes: always specify width and height on images (or use a fill layout with a sized container). For banner injections, reserve the space before the banner loads using a fixed-height placeholder, or use a position: fixed overlay that does not push content down. Replace layout-affecting CSS transitions with transform-based animations. For a complete performance analysis, the Performance & Load Readiness audit covers Core Web Vitals in detail.

  // components/image.tsx — prevent CLS with explicit dimensions
  <Image src="/photo.webp" alt="Photo" width={800} height={600} />
  // Or CSS: .image-container { aspect-ratio: 16/9; }