CLS Fix: Eliminate Cumulative Layout Shift
CLS (Cumulative Layout Shift) measures the total amount of unexpected layout movement during page load. A score of 0 means nothing moved. A score above 0.1 means users experienced visible content jumping around. CLS is one of Google's Core Web Vitals and directly affects rankings. Use Chrome DevTools Layout Shift Regions (Rendering panel) to visually highlight what is shifting on your page.
Images without dimensions
The most common CLS cause. When an image has no width and height attributes, the browser does not reserve space for it during initial layout. When the image loads, it pushes content down. Fix: always add explicit width and height attributes to every img tag: img src=photo.jpg width=800 height=600. Modern CSS with aspect-ratio handles the visual flexibility while keeping the space reserved. In React/Next.js, use the Image component which enforces dimensions.
Ads, embeds, and iframes
Ad slots that load after page content, embeds (Twitter, YouTube, Codepen), and iframes all cause CLS when they appear without pre-reserved space. Fix: always reserve space for ad slots with a fixed min-height matching the largest ad that could appear. For embeds, add a wrapper div with a fixed aspect ratio using the padding-top hack or the CSS aspect-ratio property. This ensures space is reserved before the embed loads.
Web fonts causing FOUT/FOIT
Flash of Unstyled Text (FOUT) occurs when content loads in a fallback font then shifts when the web font loads. If the fallback font has different metrics (character width, height) than the web font, text reflows cause CLS. Fix: use font-display: optional to prevent the font swap if it would cause a shift, or use font-display: swap with size-adjust CSS to match your fallback font metrics to your web font. Preload critical fonts to reduce the delay.
Content injected above existing content
Banners, cookie consent notices, or sticky notifications that inject above existing page content push everything below them down. Fix: reserve space for these elements in the initial layout even before they appear, or animate them in from off-screen rather than inserting them in the document flow. Use position: fixed or position: sticky for notifications that should not affect document flow.
Animations using layout-triggering properties
CSS animations that change width, height, top, left, margin, or padding trigger browser layout recalculations and cause layout shifts. Fix: use CSS transform and opacity for animations - these run on the GPU and do not trigger layout. Instead of animating height: 0 to height: 200px, animate transform: scaleY(0) to transform: scaleY(1). Use the Chrome Performance tab to identify which animations are causing layout shifts.