What is Cumulative Layout Shift (CLS) and how to optimise for best performance

Technical SEO can cover a wide array of factors to consider when optimising a website to perform well in search results. If you own a website and use Google’s search console, then you would have seen the introduction of the Core Web Vitals metrics. The Core Web Vitals report shows how your pages perform, based on real world data. Having a good Core Web Vitals score has been proven to improve user engagement and business metrics.

One of the metrics is called CLS or Cumulative Layout Shift. Below we breakdown exactly what it is and how to optimize your website for the best performance.

Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a website during loading. It calculates the amount of unexpected layout shifts that occur on a page, and assigns a score based on the severity and frequency of these shifts. These shifts can be caused by a variety of factors, including images and ads loading at different speeds, scrolling animations and content sliders, dynamic content that changes size or position, and late-loading web fonts.

Optimizing for best performance with CLS involves minimizing the number and severity of layout shifts on a page. There are several strategies that can help achieve this goal:

Proper sizing and optimization of images: Images that are too large or not properly optimized can cause significant layout shifts. Using compression techniques such as WebP or JPEG XR can help reduce file sizes and improve loading times, while ensuring that images are sized appropriately can help prevent unexpected layout shifts.

Defer loading of non-critical resources: Resources such as ads and analytics scripts can often be deferred until after the page has loaded, reducing the likelihood of layout shifts occurring during the critical rendering period.

Avoiding excessive DOM manipulation: Changes to the Document Object Model (DOM) can cause unexpected layout shifts. Avoiding excessive DOM manipulation, such as using CSS animations instead of JavaScript, can help prevent these shifts from occurring.

Preloading critical resources: Preloading resources such as fonts and images can help ensure that they are available when needed, reducing the likelihood of layout shifts occurring during page load.

Ensuring consistent aspect ratios: When using images or videos on a page, it is important to ensure that their aspect ratios remain consistent during loading. This can be achieved through proper sizing and using CSS techniques such as aspect-ratio or padding-bottom.

Avoiding layout triggers: Certain actions, such as resizing or scrolling, can trigger layout shifts. By avoiding these triggers, or using techniques such as debouncing, it is possible to minimize the number of unexpected shifts that occur.

By implementing these strategies, it is possible to optimize for best performance with Cumulative Layout Shift. It is important to note that CLS is just one of many metrics that contribute to overall page performance, and that a holistic approach to optimization is necessary to achieve the best results.

If you would like to speak to a technical SEO expert and work with us on your technical SEO, contact us today to discuss your requirements.