How to Diagnose and Fix Cumulative Layout Shift (CLS)

You've finally got your website loading fast, your images are optimized, and everything looks perfect. Then you test it on PageSpeed Insights and see that dreaded red CLS score. Your layout is shifting, and you have no idea why or how to fix it.

CLS measures how much visible content shifts during the entire page lifecycle. A good user experience should have a CLS of 0.1 or less.

— Google Web.dev

Cumulative Layout Shift (CLS) is one of the most frustrating Core Web Vitals to fix because the causes are often hidden and can vary significantly between different devices, network conditions, and user behaviors. But once you understand the patterns, CLS becomes predictable and fixable.

The Numbers Tell the Story

23%

of mobile sites have poor CLS scores (over 0.25)

0.1

target CLS score for good user experience

70%

of layout shifts are caused by images and ads

Understanding What CLS Really Measures

CLS isn't just about whether your page shifts—it's about how much visible content moves and how far it moves. Google calculates this using the impact fraction (how much of the viewport is affected) multiplied by the distance fraction (how far elements move).

The Hidden Truth About CLS

Many developers focus on preventing any layout shifts, but CLS only counts unexpected shifts. Layout changes within 500ms of user interaction (like clicking a button) don't count toward your CLS score. This means you can still have interactive elements that respond to user actions.

Performance Benchmarks

Good

≤ 0.1

Minimal unexpected layout shifts

Needs Improvement

0.1 - 0.25

Noticeable shifts affecting UX

Poor

> 0.25

Significant shifts disrupting users

The Detective Work: Identifying CLS Causes

The key to fixing CLS is becoming a detective. Layout shifts often happen under specific conditions that you might not experience during development, making them tricky to catch.

The CLS Diagnosis Process

Follow this systematic approach to uncover every layout shift on your site.

Use Chrome DevTools Performance Tab

Record a page load and look for red bars in the 'Experience' section. These indicate layout shifts with details about which elements moved and when.

Enable Layout Shift Regions

In Chrome DevTools, go to Settings > More Tools > Rendering, then enable 'Layout Shift Regions' to see visual highlights of shifting elements in real-time.

Test Different Network Conditions

Use Chrome's network throttling to simulate slow 3G. Many CLS issues only appear when resources load at different speeds.

Check Multiple Device Sizes

Test on actual mobile devices or use responsive design mode. CLS often varies dramatically between desktop and mobile viewports.

Audit Third-Party Content

Temporarily block ads, social widgets, and analytics scripts to isolate which third-party content is causing shifts.

The Most Common CLS Culprits

Let's break down the main causes of layout shifts and how to identify them in the wild.

1. Images Without Dimensions

This is the most common cause of CLS, especially on mobile devices where image loading can be unpredictable. When images load without defined dimensions, they push existing content down or sideways.

Image CLS Impact

Without Dimensions

Page loads with placeholder space
Image loads and pushes content down
Layout shift occurs every image load
Mobile users see constant jumping
CLS score increases with every image

With Proper Dimensions

Browser reserves correct space immediately
Content layout remains stable
Images load into reserved space
Smooth experience across all devices
Zero layout shift from images

The Modern Image Problem

Even with modern frameworks like Next.js, developers often forget to set explicit width and height attributes. The aspect-ratio CSS property helps, but explicit dimensions are still the most reliable solution for preventing CLS.

2. Web Font Loading

Web fonts can cause layout shifts in two ways: when they load (FOUT - Flash of Unstyled Text) or when they swap with system fonts (FOIT - Flash of Invisible Text). Both can cause significant CLS if not handled properly.

Real-World Example

A client's e-commerce site had a CLS score of 0.34, almost entirely from web font loading. The custom font was 15% wider than the fallback font, causing the entire navigation menu to reflow when it loaded. By optimizing font loading and using better fallbacks, we reduced CLS to 0.04.

3. Dynamic Content Injection

Content that gets injected after page load—like ads, social widgets, or dynamically loaded recommendations—frequently causes the most severe layout shifts.

Dynamic Content Red Flags

Watch out for these common dynamic content issues:

Cookie banners that push content down when they appear
Ad slots that expand beyond their allocated space
Social media widgets that resize after loading
Email signup popups that affect page layout
Product recommendations that load below the fold
Chat widgets that appear and resize
Newsletter signup bars that slide in from top
Related content sections that load asynchronously

The Fix: Systematic CLS Elimination

Now that we know what causes CLS, let's fix it systematically. The key is to reserve space for everything that will appear on the page.

Image Dimension Fixes

Always set explicit width and height attributes on images, even when using CSS to control their display size.

Modern Image Best Practice

Use the aspect-ratio CSS property combined with explicit dimensions for the most reliable cross-browser CLS prevention. This gives you responsive behavior without layout shifts.

Web Font Optimization

The goal is to minimize the visual difference between your web font and fallback fonts while ensuring fonts load quickly and consistently.

Font Loading Optimization

Choose Similar Fallback Fonts

Use tools like Font Style Matcher to find system fonts that closely match your web font's metrics (x-height, width, spacing).

Implement font-display: swap

This shows fallback fonts immediately while web fonts load in the background, reducing invisible text time.

Preload Critical Fonts

Use <link rel='preload'> for fonts used above the fold to start downloading them as early as possible.

Use size-adjust CSS Property

Fine-tune fallback font metrics to more closely match your web font, reducing layout shifts when fonts swap.

Dynamic Content Reservations

For content that loads dynamically, the solution is to reserve space in advance. This requires planning and coordination between design and development teams.

Dynamic Content Solutions

Set fixed heights for ad slots based on ad network specifications
Use skeleton screens for loading content areas
Reserve space for cookie banners in the initial layout
Set minimum heights for social media embed containers
Use placeholder elements for async-loaded sections
Implement progressive enhancement for non-critical widgets
Test all dynamic content loading scenarios
Monitor third-party script behavior changes

Advanced CLS Prevention Strategies

For complex sites with multiple dynamic elements, you need more sophisticated approaches to prevent layout shifts.

Container Query Approach

Use CSS Container Queries to create self-contained components that won't affect the layout of surrounding elements when their content changes.

Critical Path Optimization

Prioritize loading critical layout-affecting resources first, and defer non-critical resources until after the initial layout is stable.

Pro Tip: Layout Completion Event

Create a custom event that fires when your page layout is "complete" - after all critical images have loaded and fonts have swapped. Only load non-critical dynamic content after this event.

Testing and Monitoring CLS

CLS bugs have a habit of sneaking back into your site, especially when new content or features are added. Ongoing monitoring is essential.

CLS Monitoring Setup

Implement Real User Monitoring

Use the web-vitals library to track CLS in production and set up alerts when scores exceed your thresholds.

Create Automated CLS Tests

Add CLS checks to your CI/CD pipeline using tools like Lighthouse CI or WebPageTest API to catch regressions.

Set Up Performance Budgets

Define maximum acceptable CLS scores for different page types and automatically fail deployments that exceed them.

Monitor Third-Party Changes

Track when third-party scripts update and correlate with CLS score changes to identify problematic updates.

Your CLS Action Plan

Ready to eliminate layout shifts from your site? Here's your prioritized roadmap for the next two weeks.

Week 1: Foundation Fixes

Audit all images and add explicit width/height attributes
Implement aspect-ratio CSS for responsive images
Add font-display: swap to all web font declarations
Identify and measure all dynamic content areas
Test CLS scores on mobile devices with slow network

Week 2: Advanced Optimization

Optimize web font loading with preload and size-adjust
Reserve space for all ads and third-party widgets
Implement skeleton screens for loading states
Set up real user monitoring for ongoing CLS tracking
Create performance budgets and automated testing

The best way to prevent layout shift is to never cause it in the first place. Design your layouts to accommodate all possible content states from the beginning.

— Jake Archibald, Google Developer Advocate

CLS optimization is about more than just hitting a metric—it's about creating a smooth, professional user experience that builds trust with your visitors. When your layouts are stable, users can confidently interact with your content without fear of accidentally clicking the wrong element.

Start with the biggest impact items—images and fonts—then work your way through dynamic content systematically. Most sites can achieve excellent CLS scores with just a few focused optimization sessions.