CLS measures how much your page layout jumps around while it loads. When elements shift unexpectedly — pushing content down or moving buttons as users try to click them — it creates a poor experience that Google penalises with lower rankings. Here is how to diagnose and fix it.
📊 Diagnose CLS Issues All Performance Tools →CLS is one of Google's three Core Web Vitals. It measures the total amount of unexpected layout movement that happens during a page's lifetime. Every time an element moves after the initial render — pushing other content out of the way — CLS increases. A high CLS score means your page is visually unstable and creates a frustrating user experience.
When a browser encounters an img tag without width and height attributes, it does not know how much space to reserve. When the image loads, the browser inserts it and pushes everything below it down — causing a significant layout shift. Fix: add width and height to every img tag.
When a page loads with a system font and then swaps to a web font (Flash of Unstyled Text), text can reflow and shift surrounding elements. Fix: preload critical fonts and use font-display: optional or font-display: swap with font metric overrides.
Ad slots that load content dynamically after the page renders are a major source of CLS. Reserve space for ad units with explicit dimensions even before the ad loads. Use min-height on ad containers.
Cookie banners, chat widgets and newsletter popups injected above existing content push everything down. Use fixed or absolute positioning so they overlay content rather than pushing it.
Run the CLS & CSS Linter and get actionable results in minutes. Pay as you go — no subscription needed.
Diagnose CLS Issues →