What Is the Ideal Cumulative Layout Shift (CLS) Threshold for SEO, and How Can I Implement Best Practices to Minimize Layout Shifts?
Summary
For optimal website performance, the ideal Cumulative Layout Shift (CLS) score should be less than 0.1. This metric is important for Search Engine Optimization (SEO) as it affects the user experience, which indirectly impacts your site's ranking. To minimize layout shifts, it is necessary to preload key assets, use CSS containment, communicate size attributes, and be careful with dynamically injecting content.
Understanding CLS
Cumulative Layout Shift (CLS) is a part of the Core Web Vitals and an important signal for Google's page experience score. CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page [CLS, web.dev].
Ideal CLS Score for SEO
According to Google, the ideal CLS score should be less than 0.1. Good CLS scores result in pages that are delightful and easy to use, which tend to suffer fewer abandonment rates by users [Evaluating page experience for a better web, 2020].
Strategies to Minimize Layout Shift
Preloading Key Assets
The render-blocking nature of fonts can lead to high CLS values. By preloading key assets such as fonts, the browser will know about them from the start and can prioritize their loading to reduce layout shifts. This can be implemented using the <link rel="preload"> tag [Preload Critical Assets, 2022].
Use CSS Containment
Using the CSS contain property can indicate to the browser's rendering engine that layout changes within a particular DOM subtree will not affect anything outside that element, minimizing potential layout shifts [Content Visibility, 2021].
Communicate Size Attributes
Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes. This practice will allow the browser to allocate the correct amount of space on the page while the image is loading, preventing layout shifts [Image Aspect Ratio, 2021].
Be Careful with Dynamically Injected Content
Avoid adding content above existing content, especially when that insertion is not in response to a user interaction. This benchmark can help folks to ensure that the network or DOM changes do not force elements to change position suddenly [What's New In DevTools (Chrome 89), 2021].
Conclusion
Managing your website's CLS is a critical part of optimizing for user experience, and inadvertently, SEO. Aligning with best practices for minimizing layout shifts will ultimately enhance the user's browsing experience and improve your website's ranking.