What Is Cumulative Layout Shift?
Abbreviation: CLSAlso known as: Visual stability score
Cumulative Layout Shift (CLS) measures visual stability by tracking how much page elements move unexpectedly during load.
Last reviewed: 6 August 2026 · Reviewed by iNet Ventures SEO Team
In plain English
CLS is the score for how much the content on your page jumps around while it loads. If a button shifts just as a user tries to click it, or an image loads and pushes text down, that is a layout shift. A low score means the page feels stable.
Technical definition
CLS is a Core Web Vitals metric that quantifies the amount of unexpected layout movement that occurs during the entire lifespan of a page. It is calculated by multiplying the impact fraction of a moving element by the distance fraction it moved.
Quick example
A user begins reading an article, then an ad loads above the text and pushes the paragraph down by half the viewport. That unexpected movement increases CLS.
Quick facts
| Meaning | A score for how much visible content moves unexpectedly during page load and use |
|---|---|
| Main category | Technical SEO |
| Used by | Developers, UX designers, performance engineers, and SEOs |
| Difficulty | Intermediate |
| Importance | High |
| Common examples | Late-loading images, ads, embeds, fonts, or cookie banners pushing content |
| Still relevant? | Yes. CLS is a confirmed Google Core Web Vitals metric and a confirmed page experience signal. |
Why Cumulative Layout Shift matters
CLS matters because unstable pages are frustrating. A user can lose their place, click the wrong thing, or distrust the site.
It protects the user experience
A stable page lets users read and interact without disruption.
It is a ranking signal
Google uses CLS as part of its Core Web Vitals assessment for page experience.
It reduces accidental mis-clicks
Shifting buttons and links lead to frustration and accidental ad clicks, which harms conversion.
It reflects build quality
A high CLS often indicates missing size attributes, late-loaded content, or poor asset management.
How it works
CLS is a score, not a time. It accumulates every time an element moves after it has already been painted.
- 1
A page element is painted
The browser renders an initial layout.
- 2
A later asset loads or a script runs
An image, ad, font, or injected element changes the dimensions of something in the page.
- 3
The layout shifts
Other elements are pushed, pulled, or resized to accommodate the new content.
- 4
A score is calculated
The impact and distance of the shift are combined into a unitless score, summed across the session.
Types and variations
CLS can be triggered by different kinds of content and layout changes.
Image and media layout shift
Images, videos, or iframes without explicit dimensions cause the page to jump when they load.
Ad layout shift
Ads that load above content push the page down, increasing CLS.
Font layout shift
A web font that loads late can cause text to reflow, changing the layout.
Dynamic content injection
Content added above existing material, such as banners or alerts, can push the layout.
Scroll and infinite layout shift
New content loading as the user scrolls can shift existing elements.
Real examples
Common CLS scenarios that hurt or help the user experience.
An image with width and height attributes
<img src="hero.jpg" width="1200" height="600" alt="Hero" loading="eager">The browser reserves the correct space before the image loads, so the layout does not shift.
An ad placeholder of the expected size
An ad slot has a fixed-size container. When the ad loads, it does not push surrounding content.
A late-loading newsletter banner
A banner appears at the top of the article after the user has started reading, pushing the text down by several hundred pixels.
A web font that reflows the whole page
A decorative font loads late, causing headings and paragraphs to resize. The layout shifts twice as the fallback and final font both render.
Best practices
A good CLS is below 0.1. Most problems can be prevented with size attributes and careful loading order.
What to do
- Always include width and height attributes on images and videos
- Reserve space for ads, embeds, and iframes before they load
- Load web fonts with font-display: swap or preload them
- Avoid inserting content above existing content unless triggered by a user
- Use CSS aspect-ratio boxes for responsive media
- Test on real devices and with throttled connections
What to avoid
- Injecting banners or modals over existing content without reserved space
- Loading ads without placeholders
- Letting images load without dimensions in the HTML
- Using web fonts that cause a visible reflow
- Adding late-loading content at the top of the viewport
Common mistakes
Only testing the homepage
Article pages with ads, embeds, and images often have worse CLS than a simple homepage.
Fixing one element and stopping
CLS accumulates. Multiple small shifts can combine into a poor score across a session.
Ignoring user-initiated interactions
Shifts after a click are expected and usually not counted against CLS. Focus on unexpected movement.
CLS is a trust issue
A page that shifts while a user is reading or clicking does not feel reliable. It is the digital equivalent of someone yanking the paper away while you try to write. Beyond the user experience, CLS is also a signal of build quality: sites that reserve space, load assets responsibly, and test on real devices are the ones that win.
- Layout stability is part of a professional user experience
- CLS is measured in the field, so real devices and connections matter
- Third-party scripts and ads are common CLS culprits
- Reserving space is almost always the right fix
- CLS is one of the easiest Core Web Vitals to explain to non-technical stakeholders
How iNet Ventures approaches cumulative layout shift
We audit CLS by testing on real devices, not just synthetic tools. Most fixes are simple once the offending element is identified.
Identify the shifting element
We use DevTools and field data to find which asset or content is causing the shift.
Reserve space for media and ads
We add width, height, aspect-ratio, or fixed-size containers for every late-loading element.
Control font loading
We choose font-display strategies and preload fonts to reduce reflow.
Review third-party scripts
We test how widgets, ads, and trackers affect the layout and adjust loading order.
Continue learning
Frequently asked questions
What is a good CLS score?
Google considers a CLS below 0.1 to be good, 0.1 to 0.25 to need improvement, and above 0.25 to be poor.
Does CLS only matter during load?
No. It measures all unexpected layout shifts during the full page session, including ones caused by late-loading ads or dynamic content.
Can a layout shift from a cookie banner hurt CLS?
Yes, if the banner appears and pushes content. Reserving space or placing it as an overlay can prevent the score from increasing.
Definitions and guidance are reviewed against Google Search documentation, industry usage, and iNet Ventures editorial standards.
- Written by:
- iNet Ventures Editorial Team
- Reviewed by:
- iNet Ventures SEO Team
- Published:
- 6 August 2024
- Last reviewed:
- 6 August 2026
Spotted something out of date or incorrect? Tell us and we will review and correct it.
Need links that actually hold up?
White-label link building and digital PR, priced per placement. Every link comes with a live URL and the context behind it.