Cumulative Layout Shift (CLS)
Also known as: cls, layout shift seo, cumulative layout shift, core web vitals cls
Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures how much visible content unexpectedly moves while a page loads. Lower is better; Google treats a score of 0.1 or below as good.
- CLS is a Core Web Vitals metric for visual stability; a score of 0.1 or below is rated good.
- Top causes are media without set dimensions, late-injected ads or embeds, and font swaps.
- Reserve space with width/height or aspect-ratio so loading content doesn't push the layout.
How CLS is measured
CLS is one of Google's three Core Web Vitals, alongside Largest Contentful Paint and Interaction to Next Paint. It quantifies visual stability: every time an element that was already visible jumps to a new position without user input, that counts as a layout shift. Each shift is scored from how much of the viewport moved and how far it traveled.
Google buckets the page-level score into good (0.1 or below), needs improvement (up to 0.25), and poor (above 0.25). CLS is part of the page experience signals Google uses, and a poor score can hold a page back when other ranking factors are close.
Common causes and fixes
Most layout shifts come from content that loads after the initial render and pushes everything below it. Typical culprits are images and videos without explicit width and height, ads or embeds injected into the flow, web fonts that reflow text when they swap in, and content added above existing elements.
The fixes are concrete: set `width` and `height` attributes (or a CSS `aspect-ratio`) on media so the browser reserves space, reserve fixed slots for ads and embeds, preload key fonts and use `font-display` carefully, and avoid inserting content above what the user is already reading. Together these stop the page from rearranging under the reader.
Why it matters for app marketing pages
Landing pages for a phone-cleaner app lead with hero imagery, screenshots, and store badges — exactly the elements that cause shifts if their dimensions are not reserved. A page that jumps as it loads makes a visitor mis-tap a button and erodes trust right at the moment they are deciding to install.
Keeping CLS in the good range means reserving space for every image, badge, and embed up front so the layout settles immediately. That protects both the conversion path and the page experience signal that feeds Google ranking.