How To Fix Cumulative Layout Shift (CLS) Issues

/ By / Speed Optimization
cumulative layout shift (CLS)

Cumulative Layout Shift (CLS) is one of Google’s new Core Web Vitals metrics that measures visual stability on web pages. High CLS scores negatively impact user experience and can hurt your site’s search ranking. In this comprehensive guide, you’ll learn what causes CLS issues, how to diagnose them, and fixes to improve your CLS score.

Key Takeaways: How to Fix High CLS

  • Diagnose actual user CLS in the field, not just lab tools. Pinpoint shifting elements with DevTools.
  • Lazy load offscreen images with correct size attributes.
  • Handle third party resources like ads and embeds asynchronously.
  • Fix web font shift issues with Font Display properties.
  • Dynamically size containers for dynamic content.
  • Avoid problematic animations and transitions.
  • Follow CLS best practices like mobile-first design, defer secondary resources, and set dimensions.

What Is Cumulative Layout Shift?

Cumulative Layout Shift measures how much content on a web page shifts unexpectedly while loading. This shift forces users to reshuffle page elements mentally and interrupts their browsing flow.

Some common causes of layout shifts:

  • Images or ads loading late
  • Web fonts causing FOIT/FOUT
  • Static elements changing position

Google recommends a CLS score under 0.1 as a good user experience. Scores above 0.25 are considered poor and can negatively impact search rankings.

cumulative layout shift (CLS)

How CLS Is Calculated

CLS is calculated in the background as users load and scroll on your site. The browser records individual “layout shift events” whenever an element changes position between frames.

The CLS score is a fraction:

CLS = Total Cumulative Shift / Final Viewport Size
  • Total cumulative shift sums all the unexpected shift distances.
  • Viewport size equals the browser height * width.

Google calculates CLS from real user visits to your site over several weeks. You can simulate these results locally using Lighthouse to estimate your average CLS.

Why CLS Matters for Web Performance

CLS directly measures visual stability, which impacts:

  • User engagement: Content jumping as users are reading or interacting disrupts cognitive flow and causes frustration.
  • Bounce rate: Studies show users will leave a site after experiencing shifting content. High CLS also discourages scroll-backs.
  • Ad viewability: Layout shifts can push ads outside the viewport before impressions are recorded.
  • SEO: Pages with a higher CLS take longer for search bots to index crucial content. Poor CLS also signals quality issues to search algorithms.

By minimizing layout shifts, you can provide a smoother user experience and improve search visibility.

Diagnosing CLS Issues on Your Site

Identifying what’s causing CLS regressions takes some forensic investigation:

Check Your CLS Score

First, check your overall site CLS using Google PageSpeed Insights or Lighthouse. Look at the CLS score for both mobile and desktop.

Scores below 0.1 are generally considered good. If your CLS is higher, you’ll need to drill down further to find the source of the shifts.

Measure CLS in the Field

Lab tools only provide estimates of what real users see on your site. To observe CLS directly, you can:

  • Add instrumentation: Google Optimize lets you add a CLS tracker to measure actual user sessions.
  • Monitor in analytics: Connect Google Analytics to capture CLS events per page. Review behaviors prior to shifts.
  • Check Search Console: The CLS metric in Google Search Console shows shifts encountered by Googlebot.
  • Get user feedback: Ask users to describe any content jumping they notice during testing.

Field data gives more accurate insight compared to simulated lab tools.

Audit Common CLS Culprits

Audit your pages for the elements most likely to cause layout shifts:

  • Images/videos: Are large media loading asynchronously? Do placeholders match dimensions?
  • Async JavaScript: Is code loading without blocking rendering? Are dependencies handled correctly?
  • Web fonts: Check for FOIT/FOUT with Font Display.
  • Ads/embeds: Are third-party scripts loading asynchronously?
  • Dynamic content: When does content render relative to onload? Does it shift static elements?
  • Animations/carousels: Do elements change position or dimensions?

Each item moved or resized after load can potentially cause CLS.

Pinpoint Shifting Elements

Chrome DevTools provides a “Capture layout shifts” option which visually highlights elements that shift:

  1. Open DevTools Settings > Elements > Layout Shift Regions
  2. Reload the page and interact normally. Shifting elements will flash blue.
  3. Expand the Layout Shift Regions pane to see distance and time details.

This helps reveal the exact components changing position.

Common Fixes to Improve CLS

Once you’ve diagnosed the CLS regressions, here are some common techniques to improve layout stability:

Lazy Load Offscreen Images

Images loading late often trigger CLS as page content suddenly resizes.

Solutions:

  • Use native lazy loading with loading="lazy" attribute.
  • For wider browser support, a JavaScript lazy loader like Lazysizes.
  • Add width + height attributes to image tags.
  • Use LCP placeholder images with correct dimensions.

Handle Third-Party Embeds and Ads

Unpredictable third-party content is a frequent CLS culprit.

Solutions:

  • Load scripts asynchronously with async or deferred with defer attributes.
  • Proxy third-party content through your servers instead of direct embeds.
  • Set explicit dimensions for ad slots and embed containers.

Address Web Font CLS

Web fonts rendering invisibly first (FOIT) or with a flash (FOUT) can shift text layouts.

Solutions:

  • Use Font Display properties like swap or fallback to control render behavior.
  • Set optimal font loading strategy based on priority level.
  • Retry with fallback system fonts before web font timeout.

Size Content Dynamically

Dynamic content like comments, tabs, and accordions may resize the page as they load.

Solutions:

  • Size containers statically with CSS first, then reveal dynamic content.
  • Use display: none first, then display: block after content loads.
  • For tabs, prefetch and render hidden panel content without display.

Prevent Cumulative Animations

CSS animations that change size or position can accumulate CLS over the course of the animation.

Solutions:

  • Avoid animating elements which affect layout, like width, height, or transforms.
  • If animating transforms, make sure origins are at a fixed 0,0 coordinate.
  • Consider pausing CSS animations until after onload for non-essential content.

Follow CLS Best Practices

  • Adopt mobile-first responsive design with optimal stacking.
  • Avoid non-size related attributes triggering layout, like fonts or margin changes.
  • Include size attributes for images/embeds and set dimensions for containers.
  • Load core content first, defer secondary assets.
  • Audit third-party scripts and inline/proxy when possible.

Following CLS best practices from the start of development can prevent surprises down the road.

cumulative layout shift (CLS)

FAQs About Improving Cumulative Layout Shift

Does fixing CLS have to be difficult?

No, not if you tackle the problem early and follow CLS best practices. Much of it involves loading resources properly and setting dimensions accurately. For sites with heavy dynamic content, it may require more planning up front.

How long does it take to see CLS improvements?

You can measure improvements right away in lab tools like Lighthouse. But allowing Googlebot to re-crawl and rank pages with lower CLS could take several weeks before you see positive impacts.

Is CLS a big problem on mobile or desktop?

High CLS scores are generally worse on mobile due to smaller viewports. But improving CLS improves user experience across all device sizes.

What CLS score should I aim for?

Google recommends scores under 0.1 as ideal and scores over 0.25 as poor. In general, the lower your CLS the better for all users.

Can I completely prevent all CLS?

It’s difficult to guarantee a 0 CLS score given dynamic web content. But with proper planning and testing, you can minimize CLS as close to zero as possible for most visitors.

What happens if I don’t fix high CLS?

Users may get frustrated with a shifting layout and leave your site. Over time, Google may decrease your site’s search visibility and ranking for relevant queries.

Make Your Website Lightning Fast!

Our experts analyze and optimize site speed for a better user experience.

Book an appointment now

Is CLS a ranking factor now?

Directly, no. But high CLS often correlates with other signals of poor quality and user experience. Fixing CLS should be seen as improving overall user experience.

How is CLS different from layout shifts inSpeed Insights?

The layout shift metric in PageSpeed Insights is based on lab data only. The CLS metric in Search Console represents actual user experience. Fixing field CLS issues should be the priority.

Conclusion

Cumulative Layout Shift is an important new metric that directly measures visual stability on your site.

While minimal layout shifts are expected on dynamic sites, excessive CLS creates a frustrating user experience that negatively impacts conversions and SEO.

By diagnosing real-world CLS using analytics and DevTools, you can identify the primary causes of unexpected layout shifts. Addressing these through proper resource loading, dimensions, and animation usage can significantly improve CLS scores.

Adopting CLS best practices in design and development can help minimize layout shifts from the start before they become problematic.

Prioritizing improvements to real user CLS scores can pay dividends through greater user engagement, lower bounce rates, and sustained organic visibility.

Related Posts

Scroll to Top