What CLS Measures

Cumulative Layout Shift measures how much the visible elements of a page move from their initial position during loading. Everyone has lived through bad CLS. You open an article, start reading, and the text suddenly jumps down because an ad loaded above it. Or you go to tap a button and an image finishes loading, pushes everything down, and you tap the wrong link. That involuntary movement is layout shift, and CLS quantifies it.

What makes CLS distinct from the other Core Web Vitals is that it does not measure speed. Largest Contentful Paint and Interaction to Next Paint are both about time. CLS is about stability. A page can load fast and still score terribly on CLS if the elements that load are constantly repositioning each other. The metric captures the difference between a page that assembles itself cleanly and one that lurches into place piece by piece.

Google included CLS as one of the three vitals because instability is a genuine usability problem, not a cosmetic one. Layout shift causes mistaken taps, lost reading position, and the general sense that a page is broken or untrustworthy. On a transactional page it causes real errors, like clicking the wrong product or the wrong button during checkout. Stability is part of whether a page feels reliable.

The CLS Threshold and How It Is Scored

Google’s threshold for good CLS is a score of 0.1 or less. Between 0.1 and 0.25 needs improvement. Above 0.25 is poor. Unlike the other vitals, CLS is not measured in time units. It is a unitless score derived from two factors multiplied together: the impact fraction, which is how much of the viewport the shifting elements affected, and the distance fraction, which is how far they moved relative to the viewport.

The practical takeaway from that formula is that big elements moving far is what kills your score. A tiny icon nudging two pixels barely registers. A large content block jumping a third of the way down the screen scores heavily. The score accumulates across the entire page lifespan, not just the initial load, which matters because shifts triggered later, by lazy-loaded content or user interaction with poorly built components, also count against you.

One important nuance Google built in: layout shifts that happen within 500 milliseconds of a user interaction are excluded from the score. If a user clicks a button and content expands as a result, that is expected movement, not unexpected shift, so it does not count. CLS only penalizes movement the user did not cause. This is why a well-built accordion or expanding menu does not hurt your score, while content that jumps on its own during load does.

What Causes Layout Shift

Images without dimensions are the most common cause we encounter. When an image tag has no width and height attributes, the browser does not know how much space to reserve, so it collapses the space to zero, renders the surrounding content, then shoves everything aside when the image arrives. The fix is old and simple, and it is the same advice from twenty years ago: put width and height on your images.

Ads, embeds, and iframes are the second major source. These load asynchronously and often from third parties, and they frequently inject themselves into the layout after the surrounding content has rendered. An ad slot that has no reserved space will push content down the moment the ad fills it. Embedded videos, social media widgets, and third-party iframes do the same thing when their dimensions are not declared in advance.

Web fonts cause a subtler form of shift. When a custom font loads, the text re-renders in the new font, and if that font has different metrics than the fallback, the text reflows and shifts. This is the flash of unstyled text or flash of invisible text problem, and it produces layout shift as the text resizes. Dynamically injected content is the fourth source, where JavaScript inserts elements, banners, notification bars, or content blocks above existing content after the page has rendered, pushing everything below it down.

How to Fix CLS

The unifying fix is to reserve space in advance for anything that loads after the initial render. For images and video, always include width and height attributes, or use the modern CSS aspect-ratio property. When the browser knows the dimensions, it reserves the correct space immediately and nothing shifts when the media arrives. This single fix resolves the majority of CLS problems on most sites.

For ads, embeds, and iframes, reserve the space with a container of fixed dimensions sized to match what will load. If you run an ad slot that serves a 300 by 250 unit, give it a container of exactly that size so the space exists before the ad fills it. The space sits empty for a moment, which is a far better experience than the content jumping when the ad arrives. For responsive ad units that vary in size, reserve space for the most common dimension to minimize the shift.

For web fonts, the fix is matching the fallback font metrics to the custom font as closely as possible, using the CSS size-adjust and related descriptors, and using font-display settings that minimize reflow. Preloading the key font files also helps by getting them to the browser earlier, reducing the window in which fallback text is showing. Honestly, this is the area where I see the most people give up, because perfect font matching is fiddly, but getting it close eliminates most of the visible shift even if it is not pixel perfect.

For dynamically injected content, avoid inserting elements above existing content unless it is in direct response to a user interaction. If you must show a banner or notification, reserve space for it in the initial layout or insert it in a way that overlays rather than displaces. CLS is one of the metrics that matter most for perceived quality, and because it can behave differently for real users than in a lab test, verify every fix against real user field data rather than a single controlled run.

FAQ

What is a good CLS score?

A good Cumulative Layout Shift score is 0.1 or less, measured at the 75th percentile of real user page loads. Between 0.1 and 0.25 needs improvement, and above 0.25 is poor. CLS is a unitless score, not a time measurement, calculated from how much of the viewport shifted and how far it moved.

What is the most common cause of layout shift?

The most common cause is images without width and height attributes. Without declared dimensions, the browser cannot reserve space for the image, so it renders surrounding content first and then shifts everything when the image loads. Adding width and height attributes, or using the CSS aspect-ratio property, resolves this.

Do layout shifts from user clicks count against CLS?

No. Layout shifts that occur within 500 milliseconds of a user interaction are excluded from the CLS score, because that movement is expected. A button that expands content when clicked, or an accordion that opens, does not hurt your score. CLS only penalizes unexpected movement the user did not cause.

How do ads cause CLS and how do I fix it?

Ads load asynchronously and inject into the layout after surrounding content renders, pushing content down when they fill. The fix is reserving space with a fixed-dimension container sized to match the ad unit before it loads. The space sits empty briefly, which is far better than content jumping when the ad arrives.

Why does my CLS score differ between lab and field data?

Lab tests run in a controlled environment that may not trigger the same asynchronous loading and user-interaction conditions real visitors experience, so a lab test can miss shifts that happen for real users, or trigger ones that do not. Field data from real users is what Google uses for ranking, so judge your CLS by field data and use lab data to debug.

Do web fonts really affect CLS?

Yes. When a custom web font loads and replaces the fallback font, text re-renders, and if the fonts have different metrics the text reflows and shifts. Matching fallback font metrics to the custom font with CSS size-adjust descriptors, using appropriate font-display settings, and preloading key font files all reduce this shift.