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.