CLS

Cumulative Layout Shift (CLS) is one of Google’s key metrics for evaluating the user experience on a website. It is a measure that assesses the stability of the visual layout of a page as it loads. Google introduced this indicator as part of its Web Vitals initiative to improve the quality of websites.

How does CLS affect the user experience? A high CLS index can lead to frustration in users when elements on a page change their position during loading. This can result in accidental clicks or difficulty using the site, especially on mobile devices.

Where does the layout shift phenomenon come from?

1. Layout shift can be caused by various factors such as:
2. Loading images of different sizes
3. Dynamic elements, such as adverts, that change size after loading
4. Fonts that change size or style after loading
5. Elements that are loaded asynchronously or delayed

How is the CLS value calculated?

The CLS value is calculated as the sum of all the layout offsets on a page, when the site is loading. Each offset has its own value, which depends on the impact on screen space and the offset distance.

The optimal CLS value and its impact on Google PageSpeed Insights Google suggests that the CLS value should be less than 0.1 to ensure a pleasant user experience. Pages with a CLS above 0.25 are considered poor. The CLS value affects your overall PageSpeed Insights score, but it is important to remember that it is only one of many metrics evaluated by Google.

How can you improve the CLS on your website?

Here are some tips that can help you improve your CLS:

• Determine image sizes and reserve space for them on the page
• Avoid dynamic elements that can resize without warning, such as unexpected adverts
• Use ‘width’ and ‘height’ attributes for images so the browser knows how much space to reserve
• Try to load fonts and CSS styles at the beginning to avoid changing the appearance after loading
• Limit the number of asynchronously loaded or delayed elements that can affect layout stability
• Use optimisation techniques such as “lazy loading” for images to reduce the amount of shifting

Summary

Cumulative Layout Shift (CLS) is an important indicator that assesses the stability of a website’s visual layout. A low CLS value is crucial to providing a pleasant user experience and can affect your Google PageSpeed Insights score. Improving the CLS on your site can be achieved by following good design and optimisation practices, resulting in a better experience for users and, potentially, higher rankings in search results.

Back to glossary