CLS

What does CLS stand for?

Cumulative Layout Shift

Cumulative Layout Shift (CLS) is a system that web designers use to check how steady a webpage’s visuals are. This metric was introduced by Google in 2020 as a key method for checking a website’s user experience (UX) in a factual way.

As a user begins to look at a webpage’s content, such as text, images, or buttons, they don’t want the elements on the page to move around unexpectedly. If this happens, it can be jarring and confusing. At its worst, things moving around on the page could make a user click on something they didn’t mean to. CLS is a way to measure when this sort of bad user experience happens.

A layout shift is when an object on the screen moves from where it started. If a new object is added to the page, this isn’t considered a layout shift unless it makes other objects move. If an object’s position is changed using the CSS transform property, this also isn’t a layout shift because it doesn’t affect the other content.

Not every layout shift is a bad thing for the user experience. For instance, a user might click a button to load more content, which would move the existing objects on the page. Google doesn’t count layout changes that happen within half a second of the user interacting with the page as part of the CLS score.

Google offers useful tools for measuring and improving CLS. Web designers are advised to try to get their CLS scores for their webpages down to 0.1 or lower. To achieve this, webpages should be designed in a way that doesn’t move objects around unless the user has interacted with the page. The dimensions of images and videos that could move content around after loading should be specified.

Example for using ‘CLS’ in a conversation

Hey, have you heard of CLS?

Yeah, it stands for Cumulative Layout Shift. It’s a metric used by web developers to measure how stable a webpage looks.

Oh, so it’s about how the content on a page shifts unexpectedly?

Exactly! When we load a webpage, we start reading and interacting with the content. If things suddenly move around, it can be annoying or confusing.