Cumulative Layout Shift (CLS) is an important Core Web Vitals metric for Google to assess a page’s visual stability. A CLS score that is low will indicate that content isn’t shifting unexpectedly while a page is loading, creating a positive user experience and an optimized experience for search rankings. In this article we will look at common culprits for CLS and how you can mitigate it for better page load times and a more stable user experience. 

What is Cumulative Layout Shift?

CLS measures the sum of the unexpected layout shifts that take place during the lifecycle of the viewport of the page. Layout shifts are when visible elements move from one location to another, often during page load or when content is being added asynchronously. A good score for your CLS is below 0.1 and poor scores are anything above 0.25.

Common Causes of High CLS

– Images with unspecified dimensional attributes 

– Ads, embeds, or iframes without defined dimensions  

– Web fonts that load slowly (FOIT/FOUT)  

– Dynamic content that is injected above existing content  

– Transitions or animations that push content  

10 Effective Techniques to Reduce CLS

1. Always Add Size Attributes on Images and Videos

Always set size attributes on media elements. This allows the browser to set the appropriate amount of space before the content loads.

example:

<img src=”example.jpg” width=”600″ height=”400″ alt=”Example Image” />

2. Reserve Space for Ads, Embeds, and iframes

Assign either a fixed width and height to the ad slots, or fixed sized container areas, for third-party sponsors, embeds, and iframes so they will not trigger layout jumps.

3. Use Font-Display: Swap for Web Fonts

Differentiate your fonts and adjust how they load to avoid Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) with:

@font-face {

font-family: ‘MyFont’;

  src: url(‘myfont.woff2’) format(‘woff2’);

  font-display: swap;

}

4. Do Not Stack Content On Top of Existing Content

Lazy-loading elements or content within a website should be placed directly below the fold, or within reserved areas on the website to minimize page shifting.

5. Use Transform Animations Rather Than Layout Changes

Dynamic page features like banners, or modals should use CSS transitions for change in transform values and opacities rather than changing layout values.

6. Preload Critical Fonts and Images

Fonts, and images above the fold should be used to pre-load immediately for the quickest and most consistent loading experience.

7. Display Skeleton Screens or Use Placeholder Elements

Display placeholder elements, or skeleton UI placeholders for dynamic content that might require more time to load, so that users do not experience as much content stability.

8. Audit and Manage Third-Party Scripts

Audit and manage your third-party scripts so they do not convert layouts unpredictably, particularly ad and analytics scripts.

9. Defer JavaScript That is Not Critical

Deferring unnecessary script execution for initial loads can help minimize layout reflows with dynamic scripts added to website for build completion.

10. Monitor CLS with Lighthouse or Web Vitals

Lighthouse, PageSpeed Insights, and Chrome’s Web Vitals extension can help you measure your CLS score and monitor it over time.

Resources to Diagnose and Track CLS

  • Google PageSpeed Insights
  • Chrome DevTools (Performance Tab)
  • Lighthouse Reports
  • Web Vitals Chrome Extension
  • Google Search Console (Core Web Vitals Report)

Conclusion

Lowering Cumulative Layout Shift and improving CLS scores are not just technical enhancements. They also have a positive impact on UX and SEO. The best way to put yourself in a position to get the best possible rankings from search engines is to follow these best practices and give users an experience that is free of these shifts. 

If you need help diagnosing CLS issues on your site or optimizing Core Web Vitals, contact us, and we can guide you through it step by step.