Everyone has tried to tap a link just as an ad loads above it, pushing the page down so the tap lands on something else. Cumulative Layout Shift puts a number on that experience. It adds up unexpected movements of visible content and reports the worst burst of shifting during the visit.
CLS is unitless. A score of 0 means nothing moved. Google rates 0.1 or less as good, up to 0.25 as needing improvement, and above 0.25 as poor. It’s one of the three Core Web Vitals.
Why it matters
Layout shifts cause wrong taps, lost reading position and, on forms, mistakes. Brightside Dental’s booking page might load a cookie banner at the top after a second, shoving the “Book appointment” button down just as a patient reaches for it. That’s annoying on a blog. On a booking or checkout page it costs appointments and orders.
Shifts that happen right after the visitor’s own action (within half a second of a click, like opening an accordion) don’t count. CLS only measures unexpected movement.
Common causes
- Images and videos without dimensions. The browser doesn’t know how much space to reserve, so text jumps when the image arrives.
- Ads, embeds and iframes that load into a space with no fixed size.
- Banners and notices injected at the top of the page after it starts rendering.
- Web fonts that swap in with different sizes from the fallback font.
- Content added above existing content, such as “related posts” loaded by JavaScript.
Fixes
Give every image and video width and height attributes, or a CSS aspect-ratio, so the space is reserved:
<img src="/images/brightside-team.webp" width="1200" height="675" alt="The Brightside Dental team at the front desk">Reserve a fixed-height slot for ads and embeds. Show cookie notices as an overlay at the bottom of the screen rather than pushing content down. Use font-display: optional or matched fallback font metrics to reduce font swaps. When adding content dynamically, add it below what the visitor is looking at.
Common mistakes
Lazy loading images without dimensions makes CLS worse, because every image pops in and pushes text down as you scroll. Another trap is testing only in Lighthouse, which measures the initial load. Shifts that happen as people scroll or interact show up in field data but not in a lab test.
How to check
PageSpeed Insights lists the elements that shifted most. Search Console’s Core Web Vitals report shows which page groups fail. RankThat’s Site Audit reports CLS alongside LCP for the pages it tests, with a plain-English explanation of what to fix.