As per Google:
- CLS below 0.1 is a good score.
- CLS between 0.1-0.25 needs improvement.
- CLS above 0.25 is a poor score.
Element distortions during browsing are an annoying experience. But more than that, it lowers a user’s trust in the content publisher and affects SEO and UX. Moreover, in worst-case scenarios, it might lead to financial losses as well.
And you certainly don’t want that to happen!
How to calculate Cumulative Layout Shift score?
The CLS score calculation depends on two factors:
- Impact Fraction
- Distance Fraction
It measures the instability amongst the visible elements of a screen displayed between two frames. The area occupied by the unstable part through its movement in both the frames determines the impact fraction.
For calculating impact fraction, you need to know what impact region is.
The impact region covers the area affected by the layout shift. Google identifies all the elements impacted and combines the original size with the shifted area.
Generally, the impact region is rectangular in shape, but horizontal and vertical layout shifts lead to a more complex form.
Back to impact fraction: divide the impact region area by the viewport area (The visible screen on your mobile or desktop without any scrolls).
Impact region: Impact region area/ viewport area
For example, if an element covers 50% of the viewport in one frame and shifts 40% down in the second frame, the impact fraction is 90%, i.e., 0.9.
It measures the unstable element’s movement in percentage relative to the viewport.
Before calculating the distance fraction, you must know the move distance.
Move distance refers to space before and after a layout shift. In simpler words, it entails how far a shifted element moved.
Coming back to distance fraction: divide the maximum move distance by the viewport height.
Distance Fraction = Max. Move Distance/Viewport Height
For example, if an unstable element moves 40% downwards on a screen, then the Distance Fraction is 0.40.
The significance of distance fraction in the CLS score
Initially, impact fraction dominated the CLS score; however, it suffered from inadequacies. Since huge elements move slightly, they didn’t impact the CLS score unless they shifted too much.
Enter Distance Fraction.
Incorporating it into the CLS score provides a better layout shifting comprehension.
For calculating the layout shift., multiply the impact fraction by the distance fraction for one animation frame.
Layout Shift = Impact Fraction * Distance Fraction
Cumulative Layout Shift
Finally, calculate the cumulative layout shift by considering all the layout shift scores and adding them together.
Layout Shift scores (sum of each animation frame) = Cumulative Layout Shift
What causes Cumulative Layout Shifts?
As per Google, the following leads to a poor CLS score.
Images sans size attributes
Always add width and height dimensions to your images and videos. More so, allocate the image/video space using CSS aspect ratio boxes. It instructs the browser to reserve a suitable area for a web page when loading an image.