For SEO professionals, cumulative layout shift (CLS) is an important metric to understand and optimize for, as it has a direct impact on user experience and search engine results. CLS is discussed in detail in this article, along with its causes and practical solutions, ensuring that users have a better user experience and search engine results that are more accurate.
What is Cumulative Layout Shift (CLS)?
As a measure of webpage stability, CLS quantifies how much content shifts during loading. A high CLS score indicates a poor user experience, as content moving unexpectedly can lead to users clicking on the wrong elements or losing their place on the page. As part of Google’s Core Web Vitals, this metric is crucial to search engine rankings.
What Causes a high Cumulative Layout Shift (CLS)?
CLS scores are influenced by several factors:
- When images are not sized explicitly, browsers assign a default height of 0px, resulting in layout shifts.
- The loading of dynamic content, such as ads or videos, can cause other content to shift, resulting in an unexpected result
- Incorrect handling of font loading can result in text shifting as fonts are applied to a website
- When changes are made to the DOM after the initial page load, content can be repositioning
What SEO Strategies Minimize a high Cumulative Layout Shift (CLS)?
Specify Image and iFrame Dimensions
Explicitly setting width and height attributes for images and iFrames can reserve space in the layout, preventing shifts when these elements load. Despite its effectiveness, 72% of pages still contain at least one unsized image, highlighting the need for broader adoption of this practice
Leverage the aspect-ratio CSS Property
For dynamic content like ads or embedded videos, using the aspect-ratio property can help maintain layout stability by ensuring that elements take up the correct amount of space regardless of their actual size
Optimise Font Loading
To prevent layout shifts caused by font loading, consider using the font-display CSS property to control how and when fonts are displayed. This can minimize the impact of web fonts on CLS
Avoid Unnecessary DOM Manipulations
Minimizing changes to the DOM after the initial page load can reduce layout shifts. If modifications are necessary, try to do so in a way that doesn’t impact the overall layout
Utilise the Back/Forward Cache (bfcache)
The bfcache is a browser feature that stores a complete snapshot of a page in memory, allowing for instant navigation without reloading the page. Optimizing for bfcache can significantly reduce CLS for users navigating back and forth between pages
Monitor and Measure CLS
Tools like Google’s PageSpeed Insights and Lighthouse, available in Chrome DevTools, can help measure CLS and identify areas for improvement. Regular monitoring is essential to ensure that optimisations are effective and to maintain a low CLS score. You should use lab as well as field data and analyse the real result after both have adjusted (big SEO hint 28 days later – no zombies stuck in the lab data).
SEO for CLS Conclusion
Minimizing CLS is crucial for providing a smooth and stable user experience, which in turn can improve search engine rankings. By addressing the common causes of layout shifts and implementing the strategies outlined above, SEO professionals and web developers can significantly enhance the performance and user satisfaction of their websites. As user experience continues to be a key factor in SEO, prioritizing CLS optimisation is not just beneficial but necessary for success in today’s competitive digital landscape.
- AI in SEO: Maximising Your Online Visibility - 21 October 2025
- Effective SEO Reindexing Techniques: A Guide - 21 October 2025
- Local SEO Course Passed - 2 February 2025