Cumulative layout shift
What is the Cumulative Layout Shift ?
The CLS is one of the metrics created by Google for the implementation of its Core Web Vitals program. It is a metric that measures how often users of a website experience an unexpected layout change. In other words, CLS aims to analyze the amount of content moved during page layout and measures the "distance" that this content is moving within the page.
For example: CLS will examine layout changes when a user reads a text and that same text is unexpectedly moved due to the appearance of an advertisement. This can lead to a negative user experience.
What is a good CLS ?
A good CLS score is under 0.1. Above 0.25 it is urgent to intervene in order to restore a proper visual stability so that the user experience and the page positioning in SERPs are not impacted.
How is the CLS calculated ?
It is calculated as follows: impact fraction x distance fraction. This calculation corresponds to the part of the screen that has moved unexpectedly, by the distance taken in both width and height.
What are the causes of a bad CLS ?
The causes of a bad CLS can be :
- images with no dimensions. As a result, the space assigned to the image will be determined by the browser after it is imported, causing unexpected shifts. To avoid this, specify height and width attributes with a proportional aspect ratio in the HTML code of the page.
- Advertisements. In order to be able to prevent the displacement of content due to the appearance of advertisements, do not hesitate to create static spaces to integrate advertising inserts.
- embeds and iframes not dimensioned. To avoid this, find the height of the final integration and create a custom location.
- the dynamically injected content (banner, form, RGPD notice, ...). It is possible to allocate a place for these modules so that they can overlap the content and do not disturb the layout.
- Web fonts. It is possible to indicate and preload these.