Cumulative Layout Shift

Cosa'è il Cumulative Layout Shift?

Speed performance

What is the Cumulative Layout Shift?

The Cumulative Layout Shift (CLS) is an essential user-centric metric that measures the visual reliability of your page: indeed, it is useful to quantify how often your layout shifts when a user is navigating your page. The lower the CLS of your page, the more pleasant your page will be for the user to navigate.

For instance it can happen that while a user is about to click a button, suddenly the layout moves and clicks empty or (even worse) on another button: this happens because page components load at different times or DOM elements are dynamically added to the page on top of already loaded content.

What elements can cause a CLS?

a video or an image that has an undetermined dimension;
a widget or a third-party ad that rescales itself;
a font render smaller or larger than expected.

What CLS score can be considered good?

Cumulative Layout Shift time (in seconds)	Color-coding
0.0 - 0.1	Green (good)
0.1 - 0.25	Orange (needs improvement)
> 0.25	Red (poor)

How can I improve the CLS score of my page?

There are three tips we can give you:

in order to let the browser give the right space for a certain element, remember to write on images and videos the size attributes, or at least use CSS aspect ratio boxes;
avoid inserting content above existing content, unless it appears after user interaction;
do not use animations of property that can cause the trigger of changes in your layout; use instead transform animations that make your page fluid.