Cumulative Layout Shift: Stopping Unwanted Jank
CLS happens when page elements move unexpectedly while users interact. This guide shows exactly where to look and how to prevent it without rebuilding your site.
Written by the SpeedMetrics Academy Editorial Team, focused on practical, honest guidance for improving core web vitals and page speed.
What Is Cumulative Layout Shift?
You're reading an article, and suddenly the text jumps down. You wanted to click a link, but it moved. That's layout shift. It's frustrating, and it's measurable. Google calls it Cumulative Layout Shift (CLS), and it's one of the three Core Web Vitals that affect your search rankings.
CLS measures how much your page elements move around during the entire page load and interaction period. A score under 0.1 is good. Anything above 0.25 means users are getting annoyed. The good news? Most shifts are preventable without a complete redesign.
CLS isn't about speed — it's about stability. A fast page that jumps around feels broken. A slightly slower page that stays still feels professional.
Where Layout Shifts Come From
Most layout shifts happen in the first few seconds of page load. Images without dimensions are the biggest culprit — the browser reserves no space, then suddenly loads the image and pushes content down. Ads and embedded content do the same thing.
Fonts are another silent killer. Your page loads with a system font, then your custom font arrives and everything reflows. If you're not careful with font-display, you'll see visible shifts. Third-party scripts are sneaky too — analytics, chat widgets, and social embeds often inject content without warning.
Common shift triggers:
- Images and videos without width/height attributes
- Web fonts loading after the page renders
- Ads, embeds, and iframes that load late
- Dynamically injected content (modals, notifications, banners)
- Form elements or buttons that expand on interaction
How to Fix Layout Shifts
These are practical changes you can make today, not architectural overhauls.
Reserve Space for Images
Always add width and height attributes to images, even if you're using CSS to resize them. This tells the browser how much space to reserve before the image loads. Use the aspect-ratio CSS property alongside width and height for responsive images that don't shift.
<img src="photo.jpg" width="800" height="600" alt="Description">
This single change eliminates shifts from most images. It's quick to implement and has no downside.
Control Font Loading
Web fonts shift text when they finally load. Use font-display: swap to show a fallback font immediately, then swap to your custom font when it arrives. You'll see text instantly instead of waiting for fonts. The swap happens fast enough that users rarely notice.
If your font takes more than 3 seconds to load, something's wrong with your hosting or file size. Preload critical fonts in your HTML head, and consider self-hosting instead of relying on CDNs.
Handle Ads and Third-Party Content
Ads and embedded widgets are notorious for layout shifts because they load asynchronously and have unpredictable sizes. Create a fixed-size container for ads before they load. Reserve the space, and let the ad fit inside. Your layout stays stable, and the ad still displays properly.
For dynamic content like chat widgets or notification banners, push them to the edge of the screen instead of inserting them into your main content flow. A sticky sidebar or fixed position element won't shift your article text.
How to Measure and Test
You can't fix what you can't see. Start with Chrome DevTools or Lighthouse. Run a PageSpeed Insights test on your homepage — it'll show your CLS score and flag the elements causing shifts.
Use Chrome DevTools
Open DevTools (F12), go to the Performance tab, and reload your page. You'll see a visual timeline of what loaded when. Look for the purple "Layout" bars — those are your shifts. Click on them to see which elements moved.
Test on Real Devices
Slow 4G networks reveal shifts that don't happen on desktop. Use Chrome DevTools to throttle your connection (Network tab Slow 4G) and reload. You'll see exactly how your page behaves for mobile users.
Monitor with Web Vitals Library
Google's web-vitals JavaScript library sends real CLS data from actual users. Add it to your site, send the data to Google Analytics or your own dashboard, and you'll see exactly when and where shifts happen for real people.
Layout Shift Is Fixable
You don't need to redesign your site or rewrite your code from scratch. Start with the three biggest wins: add dimensions to images, control your fonts, and reserve space for ads. Test with DevTools to find your specific problem areas, then tackle them one by one.
A stable page isn't just better for your Core Web Vitals score — it's better for your users. People feel more confident clicking links and filling forms when the page isn't jumping around. That stability builds trust, and trust converts.
Start today: Check your CLS score on PageSpeed Insights. Find the biggest offenders. Fix one thing. Test again. You'll see improvement immediately.
About This Guide
Individual learning outcomes vary from person to person. The techniques and tools discussed in this guide are based on widely-accepted web performance practices, but results depend on your specific website architecture, hosting setup, and traffic patterns. Always test changes in a staging environment before deploying to production. For personalized optimization recommendations, consider consulting with a performance specialist familiar with your particular technology stack.
Related Guides
Continue learning about Core Web Vitals
Understanding Largest Contentful Paint and Why It Matters
LCP measures when the largest element appears on screen. We'll show you how to identify bottlenecks and speed it up.
First Input Delay: Making Your Site Feel Responsive
FID measures how quickly your site responds to user interaction. Learn the JavaScript patterns that hurt responsiveness most.
From Measurement to Action: Real Tools for Real Improvements
PageSpeed Insights, Lighthouse, and WebPageTest all tell different stories. We'll show you how to use each one correctly.