What is CLS? How (and why) to measure it

What is CLS?

CLS (Cumulative Layout Shift) measures how much the layout shifts unexpectedly when users view your web page.

A layout shift, or content shift, is any time something on the page visibly changes position within the frame.

This can mean the text font changes, images load slowly, and pop-ups that move your page content.

Here is an example:

Why is CLS important?

CLS is important because layout shifts hurt the user experience. And CLS, along with the other Core Web Vitals, is a ranking factor.

Imagine you are reading an article and suddenly new elements like banner ads appear, pushing the content you are trying to read.

Frustrating, right?

This is part of the reason why CLS is one of Google’s overall page experience signals. Along with the other two Core Web Vitals: First input delay (FID) and Largest content-rich paint (LCP).

Having multiple content offsets on a page will add up to a poor CLS score. An ideal page experience is a page with minimal CLS.

And poor performance for Core Web Vitals can affect your performance in Google rankings.

Define good or bad CLS

Google officially defines CLS scores within the following ranges:

• “Good” CLS: Below 0.10
• “Needs improvement” CLS: Between 0.10 and 0.25
• “Poor” CLS: Above 0.25

How to check Google CLS

There are many ways to check your CLS. But with the help of Google PageSpeed Insights tool is a good starting point.

This tool analyzes CLS for both the desktop and mobile versions of your web pages.

Enter your page URL...