◆Error Codes Wiki

Cumulative Layout Shift (CLS) — Content Jumping and Layout Instability Fix

Warninggeneral

Overview

Fix high Cumulative Layout Shift (CLS) scores caused by images without dimensions, dynamic content insertion, and web fonts causing text reflow.

Key Details

  • CLS measures visual stability — how much the page layout shifts during loading
  • Google considers CLS good if under 0.1, needs improvement between 0.1-0.25, and poor over 0.25
  • Layout shifts are counted when visible elements change position after being initially rendered
  • CLS is a Core Web Vital metric used as a search ranking signal
  • User-initiated layout changes (clicking a button, typing) do not count toward CLS

Common Causes

  • Images and videos without explicit width and height attributes
  • Ads, embeds, or iframes inserted dynamically that push content down
  • Web fonts causing text to reflow when custom fonts load and replace fallback fonts (FOIT/FOUT)
  • Dynamic content injected above existing content (banners, notifications, cookie consents)

Steps

  1. 1Add width and height attributes to all images and videos: <img width='800' height='600'>
  2. 2Use aspect-ratio CSS: aspect-ratio: 16/9 to reserve space before the image loads
  3. 3Reserve space for ads and embeds using min-height on their containers
  4. 4Optimize font loading: use font-display: swap and preload critical fonts
  5. 5Inject dynamic content below the fold or in reserved placeholder spaces

Tags

clscore-web-vitalslayout-shiftperformancestability

Related Items

browser-largest-contentful-paint-slow

More in General

printer-offlinePrinter Offline Error
Warning
driver-unavailablePrinter Driver Is Unavailable
Warning
spooler-errorPrint Spooler Error
Warning
pcl-xl-errorPCL XL Error — Subsystem Kernel
Warning
printer-duplex-printing-errorsPrinter Duplex (Double-Sided) Printing Errors — Jams, Alignment & Blank Pages
Warning
printer-usb-connection-errorsUSB Printer Errors — Not Detected, Driver Issues, and Connection Troubleshooting
Warning

Frequently Asked Questions

Without width/height attributes, the browser does not know the image dimensions until it loads. It renders the page with zero space for the image, then shifts content down when the image arrives. Setting dimensions lets the browser reserve space.