How to Fix Cumulative Layout Shift (CLS)
The common causes of layout shift - unsized media, injected content, and web fonts - and concrete fixes to get CLS under 0.1.
7 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
What causes layout shift
CLS happens when visible content moves after it first renders. The big causes are images and videos without dimensions, content injected above existing content (ads, banners, embeds), web fonts that swap and reflow text, and animations that change layout properties. Each one shoves content the user was about to interact with - the classic mis-tap frustration.
Images and iframes without width/height or aspect-ratio
Banners or ads injected above existing content
Web font swap reflowing text (FOUT)
Animating layout properties instead of transform/opacity
Reserve space for everything
The core fix is to reserve space before content arrives. Always set width and height (or aspect-ratio) on media so the browser allocates the box upfront. Reserve space for dynamic content like ads with a min-height placeholder. Preload fonts and use size-adjust or font-display: optional to limit reflow.
Set width/height or aspect-ratio on all media
Reserve min-height for ads and dynamic embeds
Preload key fonts and tune font-display
Animate transform and opacity, not top/left/height
Measure shifts at real widths
CLS is often worse on mobile, where narrow widths and slower loads exaggerate reflow. Reproduce it at real mobile widths with throttling, watch where content jumps as the page loads, and confirm your fix holds. Sizzy's accurate mobile viewports and throttling let you replay the load and verify the layout stays put.
Reproduce shifts at mobile widths with throttling
Watch the load sequence for jumps above the fold
Confirm reserved space eliminates the shift
Re-check CLS after font and image changes
Release checklist
All media has explicit dimensions or aspect-ratio.
Dynamic content slots reserve space in advance.
Fonts are preloaded and font-display is tuned.
CLS is verified at mobile widths with throttling.
Frequently asked questions
What is a good CLS score?
A good Cumulative Layout Shift score is under 0.1 for most real users. Between 0.1 and 0.25 needs improvement, and above 0.25 is poor. CLS measures how much visible content unexpectedly moves during loading.
How do I stop images from causing layout shift?
Always set width and height attributes or a CSS aspect-ratio so the browser reserves the correct box before the image loads. This prevents surrounding content from jumping when the image arrives.
Do web fonts cause layout shift?
They can. When a fallback font swaps to the web font, differing metrics reflow text. Preload key fonts, use font-display thoughtfully, and consider size-adjust or fallback metric overrides to minimize the shift.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.