Cumulative Layout Shift (CLS) – Defined, Measured and How to Correct

Cumulative Layout Shift (CLS) measures the visual stability of a page as it loads. It does this by looking at how big elements are and how far they move. This is one of the three Core Web Vitals metrics that Google uses to measure page experience.

CLS is calculated during the five-second window where most shifting occurs.

Here’s how it’s measured:

layout displacement score = impact fraction x distance fraction

Or stated in a more comprehensible way, it is:

layout shift count = % of the viewport that changed * the distance an unstable element moved

The reason CLS is important is that it’s annoying when you try to click something on a page that scrolls and then end up clicking something you didn’t mean to.

This happens to me all the time. I click on one thing and suddenly I click on an ad and now I’m not even on the same site. As a user I find this frustrating.

Common causes of CLS include:

• Images without dimensions.
• Ads, embeds and iframes without dimensions.
• Injecting content with JavaScript.
• Apply fonts or styles late in the load.

Let’s look at what your CLS score should be and how to improve it.

A good CLS score is less than or equal to 0.1 and should be based on Chrome User Experience Report (CrUX) data. This is data from real users of Chrome who are on your site...